Morning humans! One of my passions (partly because of the day job) is , 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 (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!

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!

If you're more of a fan of talks as your method of learning cool new things about , 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.

So when making my own comic website 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:

Closed Caption Editor Example:

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.

And I just realized these were all tagged and not . Welcome to Sarah being medium at hashtags.

@Curator Spelling has NEVER been my strong point. Oddly why I like writing alt text for comics, my CMS helps me catch errors before I post my comic! On socials it's just me and pure chaos.

@friskycomics I may have to calligraphy "on socials it's just me and pure chaos" the next time I have my pens out XD

Sign in to participate in the conversation

Mastodon.ART — Your friendly creative home on the Fediverse! Interact with friends and discover new ones, all on a platform that is community-owned and ad-free. Admin: @Curator. Currently active moderators: @ScribbleAddict, @TapiocaPearl, @Otherbuttons, @Eyeling, @ljwrites