Accessible Comics
Digital comics and graphic novels are a gnarly accessibility problem, one I had to confront recently. The fixed-layout format is an accessibility challenge especially since a reader can’t change the font or type size. Working with children’s picture books, there are ways to mitigate against that accessibility challenge, but that changes slightly when considering graphic novels. The Publishing Working Group at the W3C recently published a draft note on EPUB Fixed Layout Accessibility, which may be of interest.
I was recently tasked with creating accessible EPUBs from PDF files. Sometimes the type was live, sometimes it was hand-lettered as part of the image. In addition to writing image descriptions for complex pages, I wanted to code the ebook in a way that created a reasonable print-disabled reading experience. Tricky!
Coding a digital graphic novel with long descriptions is a challenge. One possible solution is to keep the image description live on the page but set the opacity to zero.
As any good ebook developer that centers accessibility in their work would do, I started with the DAISY Knowledge Base. Their page on image descriptions listed many ways to code extended descriptions while admitting that their recommended method — using <details> — is not well supported at present. I experimented with a few different ways of coding these descriptions. The well-established method of making long descriptions by linking them out to non-linear HTML files would present a rather onerous reading experience for a 138-page book with 138 pages of long descriptions, as you might imagine.
In the end I settled on what might be an unconventional approach but which worked well everywhere I tested it. I put the image description in a container whose opacity was set to zero. This made the image description live on the page but invisible to sighted readers. Using short alt text on the image — mostly there in the event that a reading system inadvertently skips the long description. Then I used aria-describedby to point the subsequent complex image descriptions.
This is what the reading experience sounds like in Colibrio’s Vanilla Reader.
One minute video demonstrating how the coding sample below is read aloud.
Below is a chunk of HTML showing how I marked-up this page. The critical piece of corresponding CSS is: div.transparent { opacity:0; }.
<div class="page">
<span epub:type="pagebreak" role="doc-pagebreak" id="page9" aria-label=" Page 9. " />
<img src="image/9.jpg" class="backgroundImage" alt="In the hotel room, he puts the suitcase
on a bureau and looks out the window to see a man in a black fedora and overcoat."
aria-describedby="longdesc" />
<div class="transparent" id="longdesc">
<p>Ten panels.</p>
<p>I had an eerie feeling, something was wrong. It was dead still inside, like rigor mortis had set in. I didn't like this feeling one bit. Leaving the suitcase, I pulled open the curtains … There he is.</p>
<ol>
<li>The hotel room door is labelled 203.</li>
<li>He stands at the door.</li>
<li>He reaches for the handle.</li>
<li>Zoomed out view of the room with a bed, two nightstands, a sofa, lamp and a dresser.</li>
<li>Close up of the rotary dial phone, a pencil and two pieces of paper.</li>
<li>The man looks around.</li>
<li>He leaves the suitcase on the dresser.</li>
<li>The detective pulls apart the heavy curtains.</li>
<li>He looks out.</li>
<li>There is a man standing on the sidewalk looking up at him.</li>
</ol>
</div>
</div>This is one possible approach to coding digital graphic novels. Writing the image descriptions was an heavy task, but coding the pages, once I had a template, but quite straightforward.
Tales from Phantom City by Patrick Jenkins (At Bay Press) is available to purchase from the publisher’s website.
