Images, Canvas, SVG, and Other Non-Text Content

Summary and Checklist: Images, Canvas, SVG, and Other Non-Text Content

Summary Form Inputs type="image" • All non-text content must be represented in a text Form inputs with type="image" MUST have format in one way or another, whether in the form of alternative text. • The alternative text for form inputs with an alt attribute for an image, an alternative representation of non-HTML objects, or within the type="image" MUST accurately convey the purpose accessibility API methods of non-HTML objects. or result of the input action. • The length of the alternative text for inputs with Checklist type="image" SHOULD be concise (no more than Image Alt Text about 250 characters). Informative Images Animated Images • • Images that convey content MUST have A method MUST be provided to pause, stop, or hide programmatically-discernible alternative text. any prerecorded video-only content that begins • The alternative text for informative images MUST be playing automatically and which lasts more than 5 meaningful (accurately conveying the purpose of the seconds. image and the author's intent in a way that is useful • Animated images MUST NOT flash or flicker more to those who cannot see the image). than 3 times per second. • Alternative text SHOULD NOT include words that Complex Images - Extended Descriptions identify the element as a graphic or image. • Complex images MUST be briefly described using alt • The length of the alternative text for informative text AND MUST have a more complete long images SHOULD be concise (no more than about 250 description. characters). • The long description (or a link or button to access the Decorative or Redundant Images long description) SHOULD be visible to sighted users. • • Images that do not convey content, are decorative, The long description SHOULD be programmatically or are redundant to content that is already conveyed associated with the image. Images of Text in text MUST be given null alternative text (alt=""), • An image MUST NOT include informative text if an ARIA role="presentation", or implemented as CSS backgrounds. equivalent visual presentation of the text can be Actionable Images rendered using real text. • • All actionable images (e.g., links, buttons, controls) Images MUST NOT include informative text, unless MUST have alternative text. the text is essential (such as a logo), or the font, size, • The alternative text for actionable images MUST be color, and background are customizable. meaningful (accurately conveying the purpose or CSS Background Images result of the action). • Purely decorative or redundant CSS images SHOULD • Alternative text SHOULD NOT include words that NOT have a text alternative in the HTML content. identify the element as a link, graphic, or image. • The alternative text for informative or actionable CSS • The length of the alternative text for actionable images MUST be available as programmatically- images SHOULD be concise (no more than about 250 discernible text in the HTML content. characters). • The alternative text (in the HTML content) for informative or actionable CSS images MUST adequately and accurately describe the purpose of the image.

Summary and Checklist: Images, Canvas, SVG, and Other Non-Text Content

Image Alt Text (continued) Inline SVGs (continued) Image Maps • The total number of characters of alt text associated with the element SHOULD NOT exceed 250 • The alternative text for the of a client-side element of a