Accessibility
“Accessibility” is a term for making things usable for more people than just the abled and neurotypical. (It’s also commonly abbreviated as “a11y”.) For our purposes, it means publishing webcomics so that they work nicely with…
- Assistive technology
- For perceiving and understanding information, there’s screen readers, screen magnifiers, closed captions, refreshable Braille displays, etc.
- For interacting with computers, there’s keyboards, switches, joysticks, trackballs, sip-and-puff devices, voice control, etc.
- OS accessibility settings
- Text preferences, like how Android devices ask how big you want your font sizes during setup
- Dark Mode, Light Mode, High-Contrast Mode, Night Mode, and Grayscale mode are all built on similar underpinnings and require the same consideration of color contrast ratios, not using color alone to signify important information, etc. This sounds onerous at first to the artist, but experienced cartoonists will already tell you that a character should be identifiable by silhouette alone, so this isn’t a new concern.
- “Reduce motion” and other toggles
- Browser accessibility features
- Zoom level (both full-page zoom and text-only zoom, and browsers can enforce minimum text sizes)
- Automatic translation, reader mode
- Extensions that swap fonts, override CSS, add scripts, etc.
This can seem like a lot to learn and work to do. But digital accessibility is also an opportunity: by default, publishing on the Web is instantly usable by more people than any other medium in history — users can automatically transform, translate, and adapt content to their needs. (Other digital media don’t let users override and tweak code like web pages do.)
Even the internet itself is assistive technology! Consider those who can’t drive, struggle to leave their homes, or have trouble being in public.
To share comics with as many people as possible, we only need to respect the Web’s inherent accessiblity and avoid breaking it when publishing webcomics. It’s easier than it sounds, once you know what to avoid.
But… do the blind care about comics?
I get this question a lot. For the scenario most people imagine when they ask: if it’s a gag comic where the whole point is a funny drawing, a totally-blind person probably wouldn’t care much about it, no.
But there are many more scenarios where comic accessibility does matter:
- For informational/applied comics, disabled people still appreciate or require the information, even if they can’t get the ideal presentation.
- Screen-readers are also used by partially-sighted or fully-sighted people.
- Zoomable text increases your audience of folks whose eyes aren’t what they used to be, without needing to publish a separate large-type edition.
- Windows’s High-Contrast Mode is also used to reduce contrast by users who get headaches from stark light/dark differences.
- Users with cognitive disorders often report using text selection/highlighting to help them read.
- The information parity = agency thing. If other people are talking about a comic, blind people may still want to experience as much of it as they can for themselves.
- And lots more I’m forgetting.
Making accessible webcomics
(each of these will probably end up being their own pages)
Text is king in accessibility, especially for comics
:
- Making interactivity accessible
- Semantic HTML like
<a href>, <input>, and <button> are all keyboard-focusable by default.
- Translation and autotranslating comics
- As demonstrated by Honey Crab,
<br> can make autotranslated speech balloons wonky. This might be slightly improved with CSS like so::is(
html:is(.translated-ltr, .translated-rtl),
#goog-gt-tt
) .speech-balloon br,
.speech-balloon:is([_msttexthash], [x-bergamot-translated]) br,
.speech-balloon ya-tr-span br {
display: none;
}
- Also, maybe use the above CSS to expose a visible warning that the page has been autotranslated, to avoid the problem of users assuming you’re just bad at their native language
Accessible HTML structure for comics
:
Links on webcomic accessibility
- ComicA11y
- The issues with the German translation + text size increase prompted my work on CSS Grid for speech balloons.
- I don’t agree with all the features used here, but I’m glad they tried. (In particular, I’m not sure a comic needs focus handling.)
- Accessible Comics · Axess Lab
- Lucy Bellwood and an accessiblity agency wrote alt text for each of Lucy’s 100 Demon Dialogues.
- IndieWeb’s “comic” post type
- Uses fallback content inside
<object> as alternative rich text transcripts.
[…]the comic image should use an <object> element, and place well structured fall back text covering at a minimum the description of visuals in the cells of the comic, and the dialog in the cells.
No idea how that actually works in assistive technoogy… It also makes loading the comic slower, since browsers don’t preload scan <object> like they do <img>.
- ePub 3 extends HTML with comic semantics
- I disagree that speech balloons should be like
<li>, but this did make me realize that each panel should probably be an <li> element inside of an ordered list. Panels don’t have titles, but they do have a sequence and therefore numbers.