Accessible comics!

Comics School, Day 1:
Comics are about
relationships.

image & image

image & image image & text

image & image image & text image & culture

Comics are
expressive!

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

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

They share stories and
information in an
easily consumable way.

The Nib

Comics can help
teach about
accessibility.

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

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

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

But most comics
have an accessibility
barrier...

But most comics
have an accessibility
barrier...

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

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

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?

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?

Transcription

assistive
technology

search
engines
assistive
technology

search
engines
assistive
technology
automatic
translators

OhNoRobot.com

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

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

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

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

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.”

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

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

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!

<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

Brocedurally Generated, my experimental webcomic

Brocedurally Generated, my experimental webcomic

Brocedurally Generated, my experimental webcomic

Brocedurally Generated, my experimental webcomic

<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>

<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>

Tactile Comics

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

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

Life
Philipp Meyer

Shapereader
Ilan Manouach

image & image image & text image & culture

Comics School, Day 1:
Everything is
a comic.

Thanks!
@cordeliadillon