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.
22.214.171.124.16 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:
<figure> <img src=“DSC82349082734.jpg”> <figcaption>Whatever info a machine can glean, such as file name or timestamp attached to the image file.</figcaption> </figure>
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).
126.96.36.199.17 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
0 where possible, in the latter or similar cases.
188.8.131.52.18 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.
184.108.40.206.19 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
alttext 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
alttext to the name of said entity. Can also do
- If that logo is accompanied by said entity name, set an empty
altattribute on the
- “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.
220.127.116.11.20 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?).
18.104.22.168.21 Guidance for markup generators
Talkin’ about automated markup here. Dreeeeamweaver
alttext from users AT ALL COSTS!!!! (jk but ya rly)
- Can use a link’s
hrefattribute to determine a reasonable
altvalue for an
imgthat is the link’s only child.
figcaptionto mark up image captions.
- For last resort situations, set the
altattribute to empty if assuming a decorative image, or no
altattribute 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-altattribute on the
img, which is non-conforming but shouldn’t trigger an error in conformance scanners. This is to prevent bogus
altvalues for the sake of
alttext from markup generators.
- “Markup generators should generally avoid using the image’s own file name as the text alternative.”
22.214.171.124.22 Guidance for conformance checkers
Code quality scanners have to flag a missing
alt attribute unless:
imgelement is in a
figureelement w/ a
figcaption, like so.
imgelement has an empty
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