There are So Many different components of “accessibility,” no webcomic site built by a single person is going to hit them all. And, well, if you’re using a hosting service like Tapas or Webtoon, you won’t even be able to hit a lot of them.
But if you’re looking for ways to improve — or you aren’t even sure where to start? — here’s a list of some of the things I do. Both here on Leif & Thorn, and on But I’m A Cat Person.
(This is part of the “how do I webcomic?” series, with useful information on all kinds of comicking-related topics.)
Originally written for this Twitter thread; I’ve added/expanded some points here. Also, arranged them in a couple of loose categories…
Accessible text for screen readers, etc.
1) Transcripts for each comic
Some people do full-on image descriptions for these. I don’t go that far. (If you’re interested in doing those, here’s some image-description advice that seems on-point.)
I just copy-and-paste the text — dialogue, captions, sound effects. Plus a bit of annotation, e.g. “(thinking)” in front of a thought bubble, or “signing” when a line is signed rather than spoken out loud.
Different languages (represented by different fonts in the comic) are marked in transcripts by different colors. Since it’s Wordpress, I used the Visual Editor Custom Buttons plugin to make “in language X” a one-click setting, like “bold” or “blockquote”. More on this later.
2) Alt text for images (other than the comics)
Again, not lengthy descriptions, keep it simple. Here’s a more detailed guide for alt text.
Not sure how many images in your layout don’t have alt text yet? Tools like WAVE (Web Accessibility Evaluation Tool) will scan your page and flag them automatically.
3) No big images full of text (again, other than the comics)
In the Webcomic World, cast pages are the biggest offender for this.
I know we all like pretty custom borders and fancy effect-laden fonts…but just make a nice character image, and put all the descriptive info as text next to it. Add the styling with CSS, not CSP. (See the BICP cast page for an example.)
“Can’t I copy all that long descriptive character detail, and paste it into the alt text?”
…well. It won’t have line breaks or bold/italic formatting, so screen readers won’t know when to stress or pause. It won’t show up differently in a browser-translated version of the page, so ESL readers will have a hard time getting at it. It won’t automatically scale if you zoom in, so it’ll be blurry and pixelated for people who read at larger font sizes.
You could do it! But it’s a less-accessible solution all around.
4) Descriptive text for links
Bad link: Read the latest chapter here!
Good link: Read the latest chapter here!
You get it, right? This one’s easy.
5) Hidden “skip to content” option
Invisible on the page, but it’ll be picked up by screen readers, so they won’t have to read through the whole menu on every page.
On Wordpress, the Inkblot theme (designed for the Webcomic 5 plugin, which I recommend in more detail over here) inserts one of these by default.
If you’re using a theme that doesn’t have it built in? The One Click Accessibility plugin has the option to add it.
Accessible visuals
6) Color contrast in your layout
Text should be readable against the background! Even for readers with moderate vision problems, not just for the ones who can read “anything up to pastel text on white.”
This is another thing Web Accessibility Evaluation Tool will check. It has a minimum contrast standard it scans for, and it’ll even let you play with colors in the browser, to figure out what meets that level.
7) Visible highlighting when a link is selected
This one’s for readers who navigate by keyboard, instead of using a mouse. “Tab” selects each link in turn, “enter” opens the current link — so it helps if there’s some visual signal, like an outline, to show which link you’re on.
This is another feature the One Click Accessibility plugin will add automatically. You can also style the focused link in your CSS.
8) Styling in CSS, not HTML
Bad styling: saying “make this text (or whatever) green” in the HTML
Good styling: saying “give this text the .green class” in the HTML, and putting “make all text with the .green class green” in the CSS
The difference: a browser plugin like Stylish for Firefox or Stylish for Chrome can override the CSS, if a reader needs something different to be accessible. Can’t do that with hard-coded HTML.
I said back at the start that I encode the Leif & Thorn languages in different colors — well, the CSS classes are a nice self-explanatory “.ceannic” for Ceannic, and “.sonksa” for Sønska. If the colors I picked aren’t working for you, have some quick instructions for customizing the way your browser displays them.
9) Check how the site looks on different devices
Even if the sizes and proportions are perfect on your screen…that doesn’t guarantee it’ll translate to every monitor/phone/tablet/etc your readers are using.
Responsively is my go-to program for this. It can mimic dozens of different devices, and show you comparative views of your site on a bunch of them, side-by-side.
Accessible miscellaneous
10) When a chapter has something unusually dark in it: content warnings upfront
“Unusually dark” is relative, based on your comic. Cute kid-friendly comedy? Maybe you give a heads-up when there’s going to be some non-graphic punching. Violent blood-splattered battle drama? Probably don’t need to repeat “contains graphic violence” in front of every single chapter.
Worried about spoilers? I use the Inline Spoilers plugin to hide the warnings, so only readers who choose to open them will have to see them.
Sidenote: Don’t tie yourself in knots trying to warn for Every Possible Upsetting Thing. (Remember, literally anything can be a trigger. Someone who got mugged outside a Wendy’s might develop PTSD that gets triggered by stories about mugging…or it might be triggered by girls with red pigtails. Brains are weird! Nobody is expecting you to see that coming and warn upfront for your Pippi Longstocking cameo.)
Just use your best judgment, and try to hit the ones that seem big.
For a Leif & Thorn example, I figured “serious eye horror + discussions of suicide” was worth warning for. (…Don’t click the link if you don’t want to be spoiled for what storyline it applies to.)
11) Talk to your readers!
Any time you do a big layout update, that’s a perfect opportunity to make a post and let people know you’re open for feedback.
No matter how much accessibility prep you do, there’s always a chance someone will mention a need you hadn’t even heard of. (When the first “fully responsive-width” version of the Leif & Thorn layout went live, it promptly got a comment of “this gets so wide, it’s giving me eyestrain.” Did I even realize that was a possibility? Nope.)
Don’t count on your readers to catch everything…but asking them about it? Can’t hurt.
12) Remember that people have conflicting needs
One reader’s “too bright, hurts my eyes” might be another’s “too dim, I need more contrast to see it.” No matter how much effort you pour into it, it’s not physically possible to get your site 100% perfectly accessible for everyone.
So this is another “don’t drive yourself crazy trying to reach perfection, just do your best to hit the big stuff” scenario.
Also: you count as a person with needs! Remember when I said I don’t do full-on comic image descriptions? The biggest reason is, I do not have the time/energy for such a big, ongoing effort. (With enough money you could hire someone else to do it, but, well, I don’t have that either.)
And that’s Okay. Work out what you can reasonably keep up. Don’t run yourself ragged trying to also do everything else.
Useful link roundup
- Check your site for basic standards with Web Accessibility Evaluation Tool
- Test how it looks on different devices with Responsively
- Useful Wordpress plugins: One Click Accessibility, Visual Editor Custom Buttons, Inline Spoilers
- So, hey, good post? Consider supporting my content on Patreon
Comment Header
Comment Footer