Great advice for writing usable alt attributes. This gem seems obvious in hindsight but I hadn’t considered it before:
End the alt-text with a period. This will make screen readers pause a bit after the last word in the alt-text, which creates a more pleasant reading experience for the user.
I like the idea of adding this to personal websites:
Mastodon shows an “Alt” button in the bottom right of images that have associated alt text. This button, when clicked, shows the alt text the author has written for the image.
I just attended this talk from Heydon at axe-con and it was great! Of course it was highly amusing, but he also makes a profound and fundamental point about how we should be going about working on the web.
This is a fascinating deep dive by Léonie on the inner workings of speech synthesis. She has quite a conundrum: she wants fast playback, but she also wants a voice that doesn’t sound robotic. Unfortunately it’s the robotic-sounding voices that work best at speed.
If you’re interested in this topic, I highly recommend listening to (or reading) the accessibility episode of the Clearleft podcast which featured Léonie as a guest giving demos and explanations.
This is a very handy table of elements from Steve of where aria-label can be applied.
Like, for example, not on a div element.
- Write Chronologically, Not Spatially
- Write Left to Right, Top to Bottom
- Don’t Use Colors and Icons Alone
- Describe the Action, Not the Behavior
Turning accessibility awareness into action with HTML.
An exception to my general rule that ARIA attributes should be added with JavaScript.
Apply your ARIA attributes with JavaScript and then use them as hooks in your CSS.
Aiming for originality and creativity in alt text.