JS Party: JavaScript, CSS, Web Development · Changelog Media

There be a11y dragons

August 22, 2024·56 min·5 clips

How a D&D advice column taught Eric Bailey to describe the most important thing first in alt text.

JS Party host Jerod Santo welcomes Eric Bailey, an inclusive design advocate, developer, writer, and GitHub employee, for a deep conversation about web accessibility with a focus on alt text. The episode opens with a nerdy conversation about Dungeons and Dragons — Eric is a founding member of his high school D&D club — before pivoting to Eric's well-known blog post using D&D's Dragon Magazine advice column as a framework for alt text. The key D&D lesson: describe the most important thing first, so your audience can decide whether to keep listening. Applied to alt text: if the room is on fire, say it is on fire before describing the carpet. Eric and Jerod work through practical alt text scenarios. On the title attribute: Eric recommends dropping it entirely from images; the only valid use case is on iframes, where it helps screen reader users decide whether to enter the iframe. On what to write in alt text: Eric's trick is to imagine describing a photo to a friend on the phone who cannot see it — conversational, practical, focused on what the image communicates rather than exhaustive visual description. On character limits: there is no technical limit in the HTML spec, though platforms like Twitter and Instagram impose their own. On logos: in a navigation context, alt text of 'home' is more useful than describing the logo visually; on a brand press page, a visual description is appropriate. On decorative images: use an empty alt attribute so screen readers skip them entirely rather than announcing the file name. Eric shares that blind Instagram users have followed him specifically because he writes good alt text for nature photos, and Jerod shares that a vision-impaired newsletter reader responds to his emails specifically about alt text quality. The tone is warm, nerdy, and practical. The audience is web developers and designers who want to improve their accessibility practice.

Listen to the show on

Apple Podcasts Spotify

Play clips from this episode More from JS Party: JavaScript, CSS, Web Development