The comics medium is incredibly expressive, but because it's so visual, it often ignores audiences with vision impairments. How can we make comics a more inclusive medium that everyone can enjoy? In this talk, we'll examine some existing techniques, like transcription, and discuss some new and innovative ways of creating non-visual comics from the outset. Originally presented at #ID24 in June 2017, http://www.inclusivedesign24.org/

1. Accessible comics!

8. Comics School, Day 1:
Comics are about
relationships.

9. image & image

10. image & image image & text

11. image & image image & text image & culture

12. Comics are
expressive!

13. Comics are
expressive!
Little Nemo in Slumberland,
Winsor McCay (1905)

14. Comics are
expressive!
Excerpt from El Deafo, Cece Bell (2014)

15. They share stories and
information in an
easily consumable way.

16. The Nib

17. Comics can help
teach about
accessibility.

18. Comics can help
teach about
accessibility.
“What if” from my comics series
about a fictional Designer Dude

19. Comics can help
teach about
accessibility.
Salesforce UX posters to promote
usage of reusable components

20. Comics can help
teach about
accessibility.
Excerpt from “The Postcards Guide
to Braille!,” Constanza Yovaniniz

21. But most comics
have an accessibility
barrier...

22. But most comics
have an accessibility
barrier...

27. My personal experience as a reader...
● Is the text legible?
○ Contrast matters
○ Font size and kerning
○ Web: Can I highlight text to read it?

28. My personal experience as a reader...
● Is the text legible?
○ Contrast matters
○ Font size and kerning
○ Web: Can I highlight text to read it?
● Is it high enough resolution?
○ Are any important details missing, blurred

29. My personal experience as a reader...
● Is the text legible?
○ Contrast matters
○ Font size and kerning
○ Web: Can I highlight text to read it?
● Is it high enough resolution?
○ Are any important details missing, blurred
● Is it written in my language?

30. My personal experience as a reader...
● Is the text legible?
○ Contrast matters
○ Font size and kerning
○ Web: Can I highlight text to read it?
● Is it high enough resolution?
○ Are any important details missing, blurred
● Is it written in my language?
● Web: Is it easy to find it again if I forget to bookmark it?

31. Transcription

32. assistive
technology

33. search
engines
assistive
technology

34. search
engines
assistive
technology
automatic
translators

35. OhNoRobot.com

36. Questions to think about as you transcribe
● What’s the tone of the work?
○ How would you tell this story on the radio?
○ Listen: Netflix audio descriptions

37. Questions to think about as you transcribe
● What’s the tone of the work?
○ How would you tell this story on the radio?
○ Listen: Netflix audio descriptions
● What information should you include?
○ And how much?
○ Exercise: Sit back-to-back with a friend and have
them draw what you describe

38. Questions to think about as you transcribe
● What’s the tone of the work?
○ How would you tell this story on the radio?
○ Listen: Netflix audio descriptions
● What information should you include?
○ And how much?
○ Exercise: Sit back-to-back with a friend and have
them draw what you describe
● Liana Kerr’s “On Describing Comics” is a must-read

39. Broodhollow, Kris Straub
(transcription by Liana Kerr)
White background.
Panel 1.
A young man is laying on his back on a flat,
armless couch, his eyes closed and his hands
folded over his belly. He is drawn in a flat,
cartoonish style reminiscent of 1930s pop art,
with a shock of hair sticking up from the top of
his head and a rounded face. He's wearing brown
pants, a buttoned up tan shirt and red
suspenders.
Someone offscreen says "Mr. Zane... You were
about to tell me what brought you here."
Zane replies "A taxi. Ha ha." Then, more quietly,
"No, I walked. I haven't seen any taxis."

40. My 2015 retrospective comic
Narration: If I had to pick one word to
describe my 2015, it would be
overwhelming.
Illustration: Me lying blissfully on my
couch with my feet up over the back
cushions, one striped sock and one polka
dot sock. There’s a “plop” sound effect, like
I’ve just fell onto the couch, and an arrow
pointing at me that says “me at the end of
some stressful days.” I think, “It’s so nice
to just lounge here like this… but I should
go be productive.”

41. Formatting and placement
● I haven’t found any agreed-upon formatting
guidelines for comic transcripts, but…
○ can learn a lot from scripts
○ ComicsML (XML) has a lot of potential

42. Formatting and placement
● I haven’t found any agreed-upon formatting
guidelines for comic transcripts, but…
○ can learn a lot from scripts
○ ComicsML (XML) has a lot of potential
● Best practice: Visible transcript or visible link to
transcript immediately after comic
○ alt and long-desc aren’t very accessible to
people navigating visually

43. Formatting and placement
● I haven’t found any agreed-upon formatting
guidelines for comic transcripts, but…
○ can learn a lot from scripts
○ ComicsML (XML) has a lot of potential
● Best practice: Visible transcript or visible link to
transcript immediately after comic
○ alt and long-desc aren’t very accessible to
people navigating visually
● Consider audio recordings!

45. <panel>
<url>http://www.jmac.org/xml/dcs-xml/panel3.gif</url>
<panel-desc>
<action>Burt interrupts Martha, brandishing a sandwich
at her. Martha looks confused.</action>
<speech>
<character>Burt</character>
<text><strong>Pagh!</strong>Again, I have completed
construction of my chicken sandwich in half the time
as you. Your "Kitchen Creation Myths" remain
unconstructive drivel!</text>
</speech>
</panel-desc>
</panel>
Excerpt from Jason McIntosh’s ComicsML framework

46. Brocedurally Generated, my experimental webcomic

47. Brocedurally Generated, my experimental webcomic

48. Brocedurally Generated, my experimental webcomic

49. Brocedurally Generated, my experimental webcomic

50. <section class="tier"
aria-label="Tier 1">
<div class="panel animated">
<img src="..." alt=
"A bed with a sock
hanging off the side, a
hairy bare leg poking out
from under a blanket. A
phone on the table reads
11:00." />
</div>
</section>

51. <div class="panel animated">
<span aria-hidden="true">
Want to join our
Burning Man camp?
</span>
<span aria-hidden="true">
No way.
</span>
<img src="..." alt=
"Evan smiles while holding
a disposable coffee cup.
Evan says, 'Want to join
our Burning Man camp?'
Someone says, 'No way.'" />
</div>

52. Tactile Comics

53. Excerpt from my 2015 retrospective comic, in which I was extremely giddy about
Shaun Kane & Sina Bahram’s CSUN 2015 presentation about 3D printing comics

54. Sensus: El universo en sus ojos
Jorge Grajales & Bernando Fernández (“Bef”)

55. Life
Philipp Meyer

56. Shapereader
Ilan Manouach

57. image & image image & text image & culture

58. Comics School, Day 1:
Everything is
a comic.

60. Thanks!
@cordeliadillon