Placeholder Image

字幕表 動画を再生する

  • >> Hiya.

  • What's happening!

  • I'm really happy to be here, and to talk to you about a topic that is very close to my

  • heart.

  • Today, I want to talk with you about comics, and more specifically, I want to show you

  • some of the great things that I found on the internet, and how to create comics on the

  • web and the learning I had when I tried to create my very own web comic and how to make

  • this comic actually accessible, not only for a few or some but, actually, for literally

  • everyone.

  • This topic is so close to my heart because as many of you here in the audience, I'm a

  • great fan of comics myself.

  • I can remember when I was young, I would go to the comic book store, or maybe to the corner

  • shop and grab a magazine, sometimes like even hard-cover comic books, and try to learn more

  • about the stories and the adventures of my favourite protagonists and heroes.

  • I think most of you can actually relate to this.

  • Probably everyone can relate to this, don't you think?

  • I was thinking back then, when I was so enthusiastic about comics, it would be so cool to make

  • comic art myself.

  • Things turned out differently - I'm working as a software engineer, build web applications

  • and other things, but I like to draw in my free time.

  • I thought maybe I could make it a hobby or activity that I just pursue in my after-hours

  • after work, and I actually maybe create something?

  • So I had a look at what my options were.

  • I remember from back in the time that print comics like the traditional medium of comics

  • as we already know it for centuries, in fact, is something that might be worth pursuing.

  • And I looked at what the challenges were that I had to overcome to do this.

  • I realised that there were a couple of them that came into my realm as a comic artist.

  • First of all, I would have to find a way to publish myself, or maybe find a publisher.

  • I couldn't get ... to get my work out, which seemed like a laborious process.

  • Then I also realised that, when I actually wanted to make people aware of where my comic

  • is and what it does, I had to focus on print-based marketing.

  • Maybe I go to a fair, or tell me in person what this comic is about.

  • Last but not least, also I would have to go to this month or a year-long thing where I

  • actually draw everything, hand it into my publisher, and they edit, and they correct

  • it, and send it back, I have to reedit it, until I actually publish my first comic.

  • And this already seems like a bitch, but then I looked on the other side, how does it look

  • for challenge-wise for people who want to read my comic later on?

  • How do readers of my comic interact with this and what do they have to overcome?

  • I realised that first of all they have to have physical access to the medium, so they

  • have to go down to the book store, or at least they have to go to the door when the mail

  • order arrives, or pick up the package at the Post Office.

  • They also have to carry around the book and actually bring it with them.

  • They can't even go out with a whole library of comics.

  • They maybe take a book or two, and this is about it because of portability concerns.

  • But something that really struck me when I thought about it a little bit longer was something

  • much more significant, and, in fact, I kind of like didn't really consider that there

  • is this very kind of essential prerequisite that I have to fulfil when I actually read

  • a printed comic.

  • That is it actually requires me to have almost perfect vision.

  • I actually am required to be a sighted person to read a comic book from, I don't know, everything

  • funny - or my Mickey Mouse magazine.

  • This is something I found really odd to think about.

  • I was, "I didn't even consider this."

  • Because I looked like a sighted person all my life.

  • I never even bothered to think about it.

  • Then, after this, I was okay, but, actually, are there options?

  • Like how do you actually read comics when you're blind?

  • Or a visually impaired person?

  • I looked on the internet and I found a lot of interesting ideas of people who are already

  • putting into practice what I couldn't imagine even until this point.

  • People who actually tried to expand out of the visual realm of comics to other fields

  • of senses.

  • One project, for example, I found interesting was some that tried to explore haptic senses

  • and audio senses, so people who might have never had the ability to actually read comics

  • but also those who might have lost their vision during their life could go back and read their

  • favourite stories again as they used to.

  • One of these projects, for example, is called Live, by Philip Meyer, and he creates a Braille-like

  • comic book which shows the stories in a haptic manner.

  • You can touch the material in front of you to understand what is going on, and to understand

  • where locally and spatially protagonists are currently in.

  • This is an interesting web comic written by Christopher Wright who makes an intentional

  • effort not only to upload every single image of his strips on to his personal website,

  • but also includes right next to it a comic transcript that can be read by screenreader

  • users once they browse the website.

  • I think the most inspiring project in my opinion has been Comics and Power which is a comic

  • book store created for the blind which features several very popular comic books very well

  • that are narrated by a - generated by a single person in a fashion that creates this illusion

  • that you actually reading the comic, you're putting up the comic book reading from panel

  • to panel the text, but also the sound-like descriptions of any kind of noises.

  • And I found this really cool.

  • Looking at this, and actually trying to find out more about the guy who actually did this

  • to create this very immersive experience using audio-generated comics, I wanted to try something

  • similar myself.

  • I wanted to dive deeper into what can you do with audio?

  • How can you tap the potential of audio-narrated stories and how can you make use of this quite

  • easily on the web?

  • I knew that screenreaders were a quite straightforward approach because I knew so many web pages

  • could be read by screenreaders if it was done right.

  • So I started out.

  • In my day-to-day work, I actually work at a consulting firm that also specialises in

  • helping clients with Ruby and Amber, and this would be familiar for me, I was thinking it

  • would be cool if it was like a JavaScript application with the Amber text stack because

  • this is familiar.

  • Also, it actually helps me later on because it's already a fully fledged single-page application

  • framework to scale my application easily with co-released and co-maintained dependencies,

  • like data library, a testing solution, or also routed solution out of the box to make

  • it easier for me.

  • I would know that two years and three years from now, this app exists, and it should also

  • work and be maintainable.

  • Last but not least, I also thought it would be so cool if it was like a proper JavaScript

  • application because then I can actually with all of this interactivity, interesting animations

  • for a sighted user experience that might also be very immersive and interesting to explore.

  • So, looking at the approach that comics Comics of Power provided, I wanted to have a similar

  • user story for screenreader users for those who use assistive technologies to browse the

  • web comic.

  • I wanted to write an embedded transcript.

  • I couldn't think about having the transcript right next to the page.

  • I actually wanted to have the experience that would be similar to someone coming to the

  • website and reading panel for panel.

  • I also wanted to include annotation for imagery, not only to translate text, so people actually

  • can get, like, image of the scene, and last but not least, yes, I actually wanted to create

  • this illusion that there is this inner voice that you have when you have read something,

  • and that is what it actually reading to you.

  • I think it would be really cool to have it all generated to have proper voice acting,

  • but for this first version of this application, I really wanted just to have an approach to

  • make it as easily and accessible as possible, and a screenreader approach seemed perfect

  • for me.

  • This storytelling that a is screenreader-driven I realised was straightforward to implement

  • once I took advantage of HTML and the powers of area.

  • In my application, for example, I have these single frames that you can see here on the

  • left side.

  • Here, for example, be you can see like a person on a boat.

  • They're, like, on the sea, and you can also see is a speech bubble saying "no" and just

  • like a sound word saying "splash".

  • Each of these images can be contained in several layers of images, so I can have an a background

  • image, a foreground image, and all kinds of other text bubbles as well that I embedded

  • in the single frame, and I knew that to actually make the whole scene be narrated as I would

  • see it as the reader, I wanted to have one single description of it.

  • I wanted to have one single tag, or one single labour for the screenreader to actually read.

  • I decided to make use of art attributes, or area labels, and this case, and, more specifically

  • in this case, with the area label, and the image roll, in my application to actually

  • make sure that everything that is told in this image, it's also available for the screenreader

  • users.

  • There is also a word of caution, though: you can use area labels when you want, if it is

  • necessary, if you realise that it really eases your development effort, but using area all

  • over your place in your application, over the use of using semantic HTML can also be

  • hard for screenreaders to actually read, and therefore they should only be used sparingly.

  • What you can also do if you know you have one single image, just use the alt attribute

  • of the image tag, and then you actually are on the best way to actually implement this,

  • because browsers are actually built in a way to support this straightforwardly with very

  • good support.

  • And 1&1 interesting thing I found with building this web comic is realising how powerful it

  • is to embed not only an image but HTML, but once I do so, it becomes the screenreaders,

  • and it's available just by default.

  • Don't have to do anything but it's already there in my narrative.

  • I will show you how I like to test this later on in my application to see what is actually

  • happening.

  • I like to use this specific screenreader called Chrome Box.

  • It's like a free screenreader plugin you can plug in Chrome, and in Mac Voiceover, and

  • Windows user - it's a popular screenreader in the blind community.

  • I think any screenreader you get started with is great for accessibility testing.

  • Let's see how it goes.

  • So, this is still a little bit quiet, I think.

  • Maybe let's try just how it goes.

  • Can you already hear something?

  • Here on the stage, it's a bit hard to tell.

  • Now we're we're on the website.

  • I have this frame embedded.

  • "Click here to maintain ...". With the screenreader, it can navigate the page and skip from each

  • interactive element to the next interactive element on the page.

  • Also, yes, described by the screenreader, and, most importantly, each single frame can

  • actually be interacted with as well, and it can actually be read.

  • "There is a person in a thick jacket sitting on the boat in a dark and stormy sea."

  • Image.

  • I'm not a recognised book author yet, but I'm getting there.

  • "The boat is rocking apply while the waves splash against it.

  • Image "Swoosh.

  • Splash."

  • [Applause].

  • The person in the boat is sitting on it motionless.

  • Image.."

  • every element can be read to you by the screenreader.

  • Also, the text bubbles that might accrue.

  • "Their face still unrecognisable in the darkened half hood of the cover of their jacket.

  • Which way?"

  • I found this impressive.

  • This comes out of the box.

  • Yes, I don't have to do too much effort.

  • HTML is already on my side.

  • This is is really great.

  • Let's just like it in.

  • [Applause].

  • Thank you.

  • Something I find super striking every time I go on to Reddit or see demonstrations of

  • blind users showing how they interact with the web is that the zoom feature is so - yes,

  • so obligatory for an experience on the web for them.

  • Being able to not only on your desktop but also on your hand held device, to go in and

  • tap in and zoom in with your two fingers is essential.

  • What you might have seen in some of the applications that you've wrote, yes, I'm guilty of this

  • myself, is something like that.

  • So this actually sets the maximum scale of the whole screen to one, meaning you cannot

  • zoom any more, and this is something I sometimes implement because there a user request that

  • every time I tap into an input field, suddenly, the whole page zooms and I can't do anything

  • any more.

  • You add this, and the issue is fixed.

  • It also introduces a major bug for anyone who has a visual impairment and can barely

  • see what is on the screen, so things are too small, or the images are a little bit too

  • blurry, had too low contrast.

  • What is so essential for preserving this capability is being able to zoom and not provide the

  • maximum scale.

  • I find it important to note out to actually pay attention to making this possible.

  • Font sizes should be legible.

  • Use 60 pixel or larger and you're good to go.

  • Having a rich contrast, having like favourably dark colour on a light background is also

  • preliminary for a great user experience for anyone who is visually impaired.

  • In my comic book, I was thinking it would be cool to have fancy animations.

  • I wanted nice eye candy for anyone who is sighted and wanted to enjoy the experience.

  • So, I was thinking, okay, like anything I have to take care of.

  • And in this instance, I actually remembered one very specific incident called the Pokémon

  • shock incident.

  • This actually occurred, maybe some of you too young to still know this, but it's happened

  • around, like, 20 years ago in 1997 in December in Japan, where suddenly, at like a certain

  • time of December 17th, almost 700 children were admitted to the local hospitals, and

  • everyone was surprised.

  • It is, "What was going on?"

  • It was happening all over the country.

  • The kids had symptoms like nausea, dizziness, some even had seizures.

  • Later on, it actually occurred to everyone that just recently, a new episode of Pokémon

  • has been aired on TV.

  • It seemed there was a correlation.

  • The episode got taken down.

  • The agency broadcasting the episode went on an investigation to find out what is going

  • on.

  • They actually came to the view that this one specific scene might have been the cause of

  • this very adverse effects in so many children all over the country who watched the episode.

  • So, in the episode, I won't show the scene, obviously, because it's not safe, but in the

  • episode, there's one particular scene where you can see two different specific frames.

  • I'm showing the frames, which is totally fine.

  • First of all, the creators of the episode showed a very bright red frame right next

  • to a very bright blue frame in high frequency interchangeably for around six seconds.

  • So, this created a very strobe-like effect, and in people who have photo sensitive epilepsy

  • or those who are prone to seizures caused by strobe-like effects, this can have adverse

  • health effects, and this is something that really taught me that it's so important to