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.
4.7.1.1.3 A link or button containing nothing but an image
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 thealt
text would be very long or could benefit from more semantic structure (list, table, etc) than a dump of text.