Placeholder Image

Subtitles section Play video

  • >> 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."