Skip to main content

Day 85 of 100DaysOfSpec, alt text for images, contd.

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 Requirements for providing text to act as an alternative for images When a text alternative is not available at the time of publication

The uses cases here generally seem to revolve around automated processes in which the end user didn’t supply any specific information about the image, or the point of the interface on which the image appears is so that the end user supplies the info.

Direction here is to do this:

	<img src=“DSC82349082734.jpg”>
	<figcaption>Whatever info a machine can glean, such as file name or timestamp attached to the image file.</figcaption>

Notably, this is a last-ditch effort.

I actually think it’s weird that the spec includes this as a use case: “She has provided a caption for the image but not a text alternative. This may be because the site does not provide users with the ability to add a text alternative in the alt attribute.” It would be odd to ask non-technical, untrained users for a text alternative, and if such a user enters a description for an image (as in a photo gallery site) there’s a high chance that it’s a workable value for the alternative text. If the direction really is to to avoid this situation where you have a caption but no alt, I personally think it would be better to use the customer’s value than none at all (and now I’m wondering how many fights a working group had about this). An image not intended for the user

If you’re using an image as a spacing hack or for web statistics, the alt attribute is an empty string. Set width/height to 0 where possible, in the latter or similar cases. Icon Images

“Use an empty alt attribute when an icon is supplemental to text conveying the same meaning.”

If the icon image adds more meaning to the surrounding text, though, you should add its text equivalent to the alt attribute value. Logos, insignia, flags, or emblems

How you use the alt text here depends on context:

  • If the icon is the only content in a link, the alt text describes where the link leads.
  • If it’s a logo representing an “entity”, with no surrounding text to support it—as in a grid of “our customers” logos—set the alt text to the name of said entity. Can also do alt=“[logo] SuperCoolCompany”.
  • If that logo is accompanied by said entity name, set an empty alt attribute on the img element.
  • “If the logo is used alongside text discussing the subject or entity the logo represents, then provide a text alternative which describes the logo.” In the example, they don’t just give the name of the entity represented, they describe the general aesthetics of the logo. CAPTCHA Images

I actually never knew what “CAPTCHA” stood for and it’s kind of BS: “Completely Automated Public Turing test to tell Computers and Humans Apart”.

  • If you must use CAPTCHA images, an audio alternative must immediately precede or follow the image version.
  • “To improve the accessibility of CAPTCHA provide text alternatives that identify and describe the purpose of the image, and provide alternative forms of the CAPTCHA using output modes for different types of sensory perception”
  • The spec discourage CAPTCHA, as it is not even completely accessible when an audio alternative is included (what about people who can’t use the visual version nor the audio version?). Guidance for markup generators

Talkin’ about automated markup here. Dreeeeamweaver

  • Get alt text from users AT ALL COSTS!!!! (jk but ya rly)
  • Can use a link’s href attribute to determine a reasonable alt value for an img that is the link’s only child.
  • Use figure and figcaption to mark up image captions.
  • For last resort situations, set the alt attribute to empty if assuming a decorative image, or no alt attribute if assuming the image is “a key part of the content”. Not sure how the automated service would make these assumptions, but I guess it’s a case-by-case, best judgement thing.
  • You can set an empty generator-unable-to-provide-required-alt attribute on the img, which is non-conforming but shouldn’t trigger an error in conformance scanners. This is to prevent bogus alt values for the sake of alt text from markup generators.
  • “Markup generators should generally avoid using the image's own file name as the text alternative.” Guidance for conformance checkers

Code quality scanners have to flag a missing alt attribute unless:

  • The img element is in a figure element w/ a figcaption, like so.
  • The img element has an empty generator-unable-to-provide-required-alt attribute.

As these conformance checkers are required to report these missing attributes, I think it would be a good idea for said checker to also share with the markup author that there are some cases in which the spec suggests an empty or missing alt attribute, and to link out to this area of the spec. By the way, not sure if “missing” in the context of this subsection includes empty alt attributes.


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.