1.1.1 Non-text Content (A) (2.0)

• All img tags must have alt attributes.
• If short alt text is sufficient to describe an image, provide the short text via the image's alt attribute.
• If a short text alternative is not sufficient to describe an image (such as in a chart, graph, or diagram), provide short text via the image's alt attribute, and include a long description in nearby text.
• If an image or icon is used as a button or link, the image has a text alternative sufficient to describe the purpose of the button or link.
• Images that are decorative, used for formatting, or contain content already conveyed in text have a null alt attribute or are implemented as CSS background images.
• Frames and iframes have descriptive titles.
• Minimize the number of adjacent links to the same destination by combining adjacent images and text into a single link, rather than creating a separate link for each element.

Developer Takeaways

<aside> 💡 All Images to have alt tags, even when they are just for decoration, they should have a null alt attribute.

</aside>

<aside> 💡 If the image represents a button or a link, alt should describe it's purpose. For eg. an image of a back arrow that takes the user back in the flow should have "Go back" as alt.

</aside>

Designer Takeaways

<aside> 💡 Any space designed for iframes or embedded frames should have a heading

</aside>

<aside> 💡 Design accordingly so the link for related text and images that are placed together can be one instead of 2 separate links

</aside>

1.2.1 Audio-only and Video-only (Prerecorded) (A) (2.0)

• For pre-recorded audio (without video), provide a descriptive transcript that includes dialogue and all other meaningful sound.
• For pre-recorded video (without audio), provided a text alternative or audio descriptions that provide the same information presented

1.2.2 Captions (Prerecorded) (A) (2.0)

• Provide captions for prerecorded audio content in non-live synchronized media.