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 4.7.1.1 Requirements for providing text to act as an alternative for images
4.7.1.1.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).
4.7.1.1.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 width
/height
to 0
where possible, in the latter or similar cases.
4.7.1.1.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.
4.7.1.1.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
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 doalt=“[logo] SuperCoolCompany”
. - If that logo is accompanied by said entity name, set an empty
alt
attribute on theimg
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.
4.7.1.1.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?).
4.7.1.1.21 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 reasonablealt
value for animg
that is the link’s only child. - Use
figure
andfigcaption
to mark up image captions. - For last resort situations, set the
alt
attribute to empty if assuming a decorative image, or noalt
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 theimg
, which is non-conforming but shouldn’t trigger an error in conformance scanners. This is to prevent bogusalt
values for the sake ofalt
text from markup generators. - “Markup generators should generally avoid using the image's own file name as the text alternative.”
4.7.1.1.22 Guidance for conformance checkers
Code quality scanners have to flag a missing alt
attribute unless:
- The
img
element is in afigure
element w/ afigcaption
, like so. - The
img
element has an emptygenerator-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.