Skip Navigation
s

PRINT BOOKS

Accessible Comics

The truth about stories is that’s all we are. - Thomas King, The Inconvenient Indian
Spiderman perched in a brick archway reading a book.
Image source: Road Trip with Raj/Unsplash

Comics typically include a black outline frame filled with artwork, a speech bubble, and some text. For comic fans who are blind or have low vision, paper comic books are not accessible and large blocks of text in a speech bubble can be difficult for readers with dyslexia to comprehend. Online and digital comics may seem to be more accessible, but only if they include alt text or image descriptions for screen readers or are in audio formats. This section includes a variety of initiatives that make graphic novels, Manga, and comic books inclusive and accessible (Paul Spencer, 2020).

Adapting Comics

A black and white poster for a conference called Adapting Comics for Blind and Low Vision Readers
A black and white poster for a conference called Adapting Comics for Blind and Low Vision Readers including images of braille, eyes, and hands.
Image source: Graphicmedicine.org

The Paul K. Longmore Institute on Disability has partnered with the Program in Visual Impairments and the department of Comic Studies at San Francisco State University (SFSU) to explore ways to make comics accessible for blind and low-vision readers. The Accessible Comics Collective has hosted two international round-table discussions with panels of experts on access, blindness, and comics who explored creative and technological ways to make comics and graphic novels available to people who are blind or have low vision. Here is a recording of the roundtable discussions.

Listen to the poster.

PDF transcript

In August 2021, the SF State Comics Studies Program, Program in Visual Impairments, and Longmore Institute of Disability hosted and recorded another one-day symposium including opening and closing keynote presentations, three panels which focused on different modalities for adapting media, and a panel on depictions of blindness in media, linked here.

Illustration of a lit lightbulb

Spotlight: 100 Demon Dialogues

100 Demon Dialogues is a collection of comics about imposter syndrome and self-doubt by cartoonist, author, and educator Lucy Bellwood, who wanted to make the comic accessible to readers who are blind or have low vision. In consultation with Axess Lab, alt text was written for each panel and tested with a screen reader.

Online Comic Experiences

A full colour four panel comic strip
A full color four panel comic strip featuring three characters. One character uses a wheelchair and meets a set of stairs in the fourth panel. Accessibility options are featured under the trip including font size. high contrast, and language translation
Image source: comica11y.com

ComicA11y is experimenting with an all-inclusive online comic reading experience and looking for feedback and contributions from readers. The features include the following:

Focus management
The tab key on the keyboard lets users navigate between panels in the comic strip. The panel that is in focus is highlighted with a thickened frame border.

Engineered for screen readers
The frame in focus features text specifically written for screen readers, describing the setting, the characters speaking, and dialogue.

Best practices
The comic includes semantic HTML5 markup that includes WAI-ARIA attributes to aid assistive technology.

High contrast mode
Each frame contains the source content for both full-colour and black and white artwork, with a "High contrast" setting that switches between them.

Captions
The captions feature provides a script of each frame, including the name of each character speaking, along with an avatar of that character. The speaking subject is highlighted to help identify who the caption belongs to. Captions support tab focus, left and right button, and arrows.

Increase / Decrease font-size
In caption mode, you can control the size of the font.

Selectable text
Each speech bubble is positioned on top of the artwork using font-face and custom comic book fonts.

Translatable text
Because the text is rendered on the page as text, it means it can be translated into other languages.

Left-to-right & Right-to-left reading support
Because not every language reads left-to-right like English and French, the comic layout artwork and speech bubbles inverse to read right-to-left upon translated where needed.

Responsive layout
CSS Grid and media queries adapt the layout of the comic to suit any screen size.

Responsive images
Using the picture element and source queries, the correct size and density suits the device.

Lazyload
Each image is only fetched from the server once the page has loaded, ensuring speed and performance come first.

- Adapted from ComicA11y