Skip to main content

Day 82 of 100DaysOfSpec, alt text for images

I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. Read the initial intent/backstory. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.

Currently reading 4.7.1.1 Requirements for providing text to act as an alternative for images

Heads up: there are many topics in this new subsection about alt text on images. Get ready!

  • alt attributes “are a primary way of making visual information accessible”. Concerning for accessibility (a11y) is when images are uploaded via WYSIWYG editors: many clients will need training on the value of adding good descriptors for images in whichever field controls the alt attribute content.
  • Screen reader a11y is not the only reason why you’d want good alt attributes. See this section of the spec for more scenarios in which this attribute would be helpful.

4.7.1.1.2 General guidelines

“Except where otherwise specified, the alt attribute must be specified and its value must not be empty”. Purpose of the image determines how best to use the alt attribute in its context.

The alt attribute should describe the purpose of said link/button. For example, if my link is just a Twitter icon, it might say something like “Follow us on Twitter”, “@somelaniesaid on Twitter”, or “Twitter”. The surrounding text will likely have an impact on what reads out the best.

4.7.1.1.4 Graphical Representations: Charts, diagrams, graphs, maps, illustrations

Two different things you can do here:

  • alt content is exactly descriptive of the chart or what have you: reads out all axis labels, titles, values, etc. Should be able to understand all the data without looking at the image.
  • There is other accessible text in the markup (like a caption for the chart) that writes out this exact description, and then the alt content is more generally descriptive: “A pie graph representing this breakdown of most popular pies”). This is the recommendation if the alt text would be very long or could benefit from more semantic structure (list, table, etc) than a dump of text.

Responses

My blog uses Webmentions. Responses from sites which likewise support Webmentions, such as Twitter or people’s personal sites, will show up here.

No Webmentions have been sent to this post yet.