[tutorial] Writing Alt Text

Writing good alt text is an art, not a science. The same image can be described in different ways based on context, flow, and what aspects of the image you want to call to a listener's attention. The WHAT WG HTML Living Standard "4.8.1.1. Requirements for providing text to act as an alternative for images" has a collection of requirements for alt text, and WebAIM has a whole article on Appropriate Use of Alternative Text -- both of these are very useful resources! But it still takes practice to get really good at it.

So, let's practice, and see ways in which the same image in two different contexts might make you want to write the alt text differently.

Each of these sample images has two sets of text next to it: one formally-written piece (unless otherwise cited, it's from a relevant Wikipedia article), and a more casually-written sample that might be a blog post in which the image would appear.

Your task, should you choose to accept it, is to write relevant and useful alt text for the image in each context. Don't just look at the image and think in your head "oh, I'd do blah blah": actually write it out!

As you work, think about the differences in how you write the alt text in each context, and how different uses of the image make you want to call attention to different aspects of the image contents.

At the bottom of the page is a link to my version of the answers, with a brief explanation for each. I will reiterate that my answer is not necessarily everyone's answer! There are many, many ways to write alt text, and many people disagree as to which is the most useful.

Screenreader users: please note that I'm just using the alt text provided by Flickr's "get this HTML code" here, to avoid giving too many clues. Non-screenreader users: please don't just take Flickr's "get this HTML code" without altering it; it defaults to the title of the picture, which is usually fairly unhelpful for descriptive purposes!

I've turned comments off on this particular post, but they're open on the "answers" page, and if people would like to discuss their choices (or why they don't agree with my choices), feel free.

( Take the alt-text practice exercise! )

[tutorial] Writing Alt Text - Answers (and not-answers)

Here are my answers to the Writing Alt Text exercise, and my reasoning for why on each.

You may disagree with me on many or any of the image descriptions! That's okay (and expected). As I said in the talk, many of these questions don't have a single answer, or have multiple possible answers, and people will disagree as to which one is better or best. So if you're worried because your answer isn't close to mine, that's fine: think about your reasoning, consider the basic principles and the desired goal, and work from there.

And, of course, if anybody wants to share their answers because they like theirs better than mine, feel free!

( My answers to the alt text exercise )

[tutorial] Further Reading

Here's a list of a whole bunch of resources, tools, and information for you to do more reading about accessibility and accessible design. (This was done with the help of the dw_accessibility community, who are a bunch of very lovely people!)

They're roughly divided into categories, more or less.

If there's something I've missed, or another tool or resource you're fond of, leave a comment! (If you're commenting anonymously, or logged in with OpenID, you can leave links in the comments, but they'll be rewritten to display as bolded text followed by bare URLs: that's an antispam feature. I'll try to come through behind people and turn them into clickable links. Or you could create a Dreamwidth account!)

( Further Reading )

[tutorial] The 31 Tips

These are the 31 points I covered in the talk, for ease of copy/pasting and not having to dig through and transcribe my slides! For those who haven't seen the talk, they'll probably be pretty understandable anyway, but you still need to see the talk to get the nuance. I am happy to come deliver this talk, or the longer version I cut this down from, to your local group ;)

( 31 Quick Techniques to Make Your Site More Accessible )

[tutorial] Web Accessibility for the 21st Century: Resources & Exercises

Thank you all for attending my talk! The slides are downloadable from Slideshare:

Web Accessibility for the 21st Century

This is the table of contents for the resource package, which contains:

• 31 Quick Techniques to Make Your Site More Accessible: a text-only version of the 31 tips provided in the talk itself, so you don't have to mess around with transcribing them.


• Further Reading: A list of resources, further reading, and Useful Sites.


• Writing Useful Alt Text: An exercise for you to practice with! A handful of images, each presented with two different bits of text. Write the alt text for each image in each context.


• Writing Alt Text: Answers (and not-answers): My own answers to that exercise, and my reasoning for why -- these aren't definitive, because there are many different ways of doing it, but you can compare my answers with your own.


• Inaccessible (and annoying) Websites: A discussion in dw_accessibility where people name off examples of particularly inaccessible websites (and why they're inaccessible). I wound up not having time to fit that into this tutorial, but you can browse the comments and see the examples!


• Assistive Tech (semi-) Poll: A while back, we wound up asking people to comment in dw_accessibility with information about what assistive technology they use. The answers are fascinating, and demonstrate the wide variety of assistive tech out there.


• And dw_accessibility in general: this is the community for our accessibility project team, and you can read through both the general accessibility-related discussions and also see some examples of how we solicit accessibility-related feedback and design features to be as accessible as possible.

If you have any questions that I didn't answer in the talk, or want to share some resources (or success stories after you go implement some of the advice!) please do comment!