Morning humans! One of my passions (partly because of the day job) is #accessibility, and I like finding ways to apply that to comics. I'm going to post links to resources on helping to make your comics more accessible at the hashtag #ComicsA11y (As well as just replying directly to this thread)
Do you ever find yourself trying to figure out HOW to write accessible alt text for your comic? Veronica Lewis wrote this really good guide on doing just that that I apply to my website and how I describe panels! https://veroniiiica.com/2018/11/29/how-to-write-alt-text-digital-comics/. #ComicsA11y
I really loved Lucy Bellwood 's 100 Demon Dialogues comics, and the folks at Axess Lab wrote a nice article on the process of writing the alt text for the ebook version. Bonus points: They do include video examples of reading the comic with a screenreader! https://axesslab.com/accessible-comics/ #ComicsA11y
If you're more of a fan of talks as your method of learning cool new things about #ComicsA11y, Jessica Jordan had a wonderful talk as JSConf EU 2019 about Crafting Comics for Literally Everyone. I really like how she built out the speech bubbles with html/css, so they were separate from the background of the panel, and how that read on a screenreader. https://2019.jsconf.eu/jessica-jordan/crafting-comics-for-literally-everyone.html
So when making my own comic website #ComicsA11y friendly I had a few different approaches to the comic itself:
1. I uploaded each panel of the comic individually, rather than posting everything as one image (similar to how I post the comic on social media). Not only does this make it easy to change the layout of the page for different sized screens, but I can individually apply the alt text to each panel, making it more manageable.
2. Along with a descriptive alt text for screen readers, I added a "Closed Caption" mode. This is for peeps who may not always require a screenreader, but for whatever reason, may have difficulty reading the comic. (low vision, dyslexia, bad eye strain day, etc). I use local storage variables so peeps could set settings to their preferences and keep this feature turned on.
If you want an example of the code I use for my comic so you can apply it to your own site, check out this codepen I made, it may help you!
Comic Code Example:
https://codepen.io/sfrisk/pen/XWdLWZY
Closed Caption Editor Example:
https://codepen.io/sfrisk/pen/GRqKjWp
Oh, one last note on what I do for personal site. I actually have the alt text also visible at the bottom of the page for easy copy/paste alt text for socials., I also include character images for screenreader description of the character's appearance, as well as a link to more info. I only describe a character in comic if it is their first appearance or they have changed appearance to help keep a cleaner reading experience. #ComicA11y
And I just realized these were all tagged #ComicA11y and not #ComicsA11y. Welcome to Sarah being medium at hashtags.
@Curator Haha, love it!
@friskycomics I may have to calligraphy "on socials it's just me and pure chaos" the next time I have my pens out XD