Text Alternatives
Non-text Content 1.1.1
Examples
Animated gif
Animated gif that shows how to do something with instructions typed out below it. Alt text is brief and refers to the tutorial text for more information.
<img src="animation.gif" alt="How to place an order with instructions below." />
<p>Instructions typed out here</p>
Map Link
An image of an interactive map allows the user to navigate to an area and get more information.
<figure aria-label="Map of Oshkosh. Select our location to see the address."></figure>
Image Link
An image is linked to another page. The alternative text should state the page it is going to.
<a href="/info/contactus"><img src="contactimg.jpg" alt="Contact 4imprint" /></a>
Decorative Image
An image that is purely decoration and should be ignored by assistive technology.
<img src="background.jpg" alt="" />
CAPTCHAs
Best to avoid, but if using you must, present at least 2 different options.
- Alternate forms using different modalities would be provided to address the needs of people with different disabilities.
- Can also provide access to a CSR who can bypass the CAPTCHA.
Acceptance Criteria
- If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
- Use alt attributes on img elements.
- Provide link text that describes the purpose of a link for anchor elements.
- Use alt attributes on images used as submit buttons.
- Use label elements to associate text labels with form controls.
- Use title attribute to identify form controls when the label element cannot be used.
- Use null alt text and no title attribute on img elements for images that assistive technologies should ignore ex: alt="".
- Use CSS margin and padding rules instead of spacer images.
Notes
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.