Web Compliant Images
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. Content owners are the best resource for text descriptions since they know what information they want the image to convey. Determine alt text by asking, "What text would I put here instead of this picture?" Review WebAIM Alternative Text for appropriate use of alternative text. Review W3C's Alt Decision Tree for guidance on how to describe images.
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text. Customizable: The image of text can be visually customized to the user's requirements; Essential: A particular presentation of text is essential to the information being conveyed. Logotypes (text that is part of a logo or brand name) are considered essential. Avoid using images of text. Use text instead.
- alt
<img src="/whitehouse.jpg" alt="White House south entrance"> - aria-labelledby (must reference the ID of the image description)
<img aria-labelledby="steps" src="white-house-steps.jpg">
...
<p id="steps">The President waited on the White House front steps for the ambassador to arrive.</p>
- aria-label (contains the description)
<img aria-label="home" src="/whitehouse.png">
- aria-describedby (must reference the ID of supporting information for the image description)
<img src="/plus.png" aria-label="close or open branch" aria-describedby="plus-expand">
...
<p id="plus-expand">Use the right arrow key to expand and the left arrow key to collapse. </p>
- title
<img src="/whitehouse.jpg" title="White House south entrance">- When title is provided with alt, aria-labelledby, or aria-label, the value of title is computed as the accessible description.
<img src="/whitehouse.jpg" alt="White House south entrance" title="view from south lawn"> - If title and aria-describedby are both provided, aria-describedby is the accessible description and title is ignored.
- When title is provided with alt, aria-labelledby, or aria-label, the value of title is computed as the accessible description.