Page 4 of 6
Images and Visual Design
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| Informative Images and Active Images (e.g. links, buttons, or controls) |
Alternative text: The image MUST have alternative text. Refer to the techniques for various image types:
|
Required | WCAG 1.1.1 |
| Meaningful description: Alternative text MUST be meaningful (accurately conveying the purpose of the image, and the author's intent in a way that is useful to those who cannot see the image). Note 1: Image links SHOULD describe the link destination. Note 2: Button/control links SHOULD describe the purpose and/or resulting action of the button or control. |
Required | WCAG 1.1.1 | |
| Concise: The length of the alternative text for informative images SHOULD be concise (no more than about 250 characters). | Best Practice | ||
| Avoid restating that the element is an image: Alternative text SHOULD NOT include words that identify the element as a graphic or image (e.g. avoid phrases like "graphic of," or "image of," etc.), because screen readers already state the role (e.g. by saying "graphic" then reading the alternative text). | Best Practice | ||
| Unessential images (Purely Decorative or Redundant, and not Active) | Unessential Images: Images that do not convey content, are decorative, or are redundant to content that is already conveyed in text SHOULD be given null (empty) alternative text (alt=""), ARIA role="presentation", or implemented as CSS backgrounds. |
Best Practice | |
| Complex Images | Complex Images: Complex images MUST be briefly described using alt text AND MUST have a more complete extended description. Note: It is not "wrong" to provide descriptive alternative text in these instances, but it is highly discouraged if the image is truly unessential. |
Required | WCAG 1.1.1 |
| Background images | Informative background images: If a background image conveys information, alternative text MUST be provided (e.g. via regular visible text, by adding role="image" and aria-label, or by other means). | Required | WCAG 1.1.1 |
Active background images: If a background image is the only "content" in an active element (e.g. a link, button, or control), the active element MUST have an accessible name (e.g. via aria-label or similar). |
Required | WCAG 1.1.1 | |
| Color contrast of small text: Small text (under 18 point regular font or 14 point bold font) MUST have a contrast ratio of at least 4.5 to 1 with the background. | Required | WCAG 1.4.3 | |
| Color contrast of large text: Large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background. | Required | WCAG 1.4.3 | |
| Unessential background images: Alternative text SHOULD NOT be provided for unessential background images. | Best Practice | ||
| Images of Text | No Images of Text: An image MUST NOT include informative text if an equivalent visual presentation of the text can be rendered using real text (unless the text is essential — such as a logo — or the font, size, color, and background are customizable.). | Required | WCAG 1.4.5 |
| Color contrast of small text: Small text (under 18 point regular font or 14 point bold font) MUST have a contrast ratio of at least 4.5 to 1 with the background. | Required | WCAG 1.4.3 | |
| Color contrast of large text: Large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background. | Required | WCAG 1.4.3 | |
| Animated Images | See the requirements for Animation, Motion, and Timed Content | Required | Multiple |
| Image CAPTCHA | Alternative text: Image CAPTCHA elements MUST have alternative text describing the purpose of the image. | Required | WCAG 1.1.1 |
| Sensory alternatives: Image CAPTCHA elements MUST be supplemented with at least one auditory alternative method. | Required | WCAG 1.1.1 | |
| Deafblind access: At least one text-based alternative SHOULD be provided that allows users who are both deaf and blind to pass the CAPTCHA. Note: Deafblind users typically use screen readers to convert text to braille, using a refreshable braille device. |
Best Practice | ||
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| Use of color | Use of color: Any information conveyed by color MUST be accompanied by a programmatically-discernible text alternative. | Required | WCAG 1.4.1 |
| Visible Alternative: Any information conveyed by color MUST be accompanied by a visible alternative (text, image, etc.) that does not depend on color for meaning. | Required | WCAG 1.4.1 | |
| Color Contrast |
Small Text Contrast: Small text (under 18 point regular font or 14 point bold font) MUST have a contrast ratio of at least 4.5 to 1 with the background. Note: The contrast rule also applies to images of text, even though images of text are discouraged. |
Required | WCAG 1.4.3 |
|
Large Text Contrast: Large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background. Note: The contrast rule also applies to images of text, even though images of text are discouraged. |
Required | WCAG 1.4.3 | |
| UI Component Contrast: The contrast of UI control boundaries compared to adjacent areas MUST be sufficient to distinguish the UI control from the adjacent areas. | Required | WCAG 1.4.11 (WCAG 2.1) | |
| Visual Focus Indicator Contrast: The contrast of all visual focus indicators against the background MUST be at least 3 to 1. | Required | WCAG 1.4.11 (WCAG 2.1) | |
| High Contrast Mode | Retain Visible Information: Web content SHOULD retain all essential visual information in Windows High Contrast Mode. | Best Practice | |
| Don't Override: The design SHOULD NOT override Windows High Contrast Mode. | Best Practice | ||
| Topic | Technique | WCAG Requirement | |
|---|---|---|---|
| Text Resize and Reflow | Resize Text 200%: The page SHOULD be functional when only the text is magnified to 200% of its initial size. | Required | WCAG 1.4.4 |
Mobile Zoom: The page MUST allow users to zoom in on mobile devices (The following is NOT allowed: <meta name="viewport" content="user-scalable=no">) |
Required | WCAG 1.4.4 | |
| One Scroll Direction Only: Content MUST NOT require scrolling in two directions (both vertically and horizontally) — even when zoomed in up to 320px wide (for vertically-scrolling content) or 256px wide (for horizontally-scrolling content) — unless both scrolling directions are essential to the usage or meaning of the content. | Required | WCAG 1.4.10 (WCAG 2.1) |
|
| Text in Images | No Images of Text: An image MUST NOT include informative text if an equivalent visual presentation of the text can be rendered using real text (unless the text is essential — such as a logo — or the font, size, color, and background are customizable.). | Required | WCAG 1.4.5 |
| Color contrast of small text: Small text (under 18 point regular font or 14 point bold font) MUST have a contrast ratio of at least 4.5 to 1 with the background. | Required | WCAG 1.4.3 | |
| Color contrast of large text: Large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background. | Required | WCAG 1.4.3 | |
| Text/Paragraph Styles |
Full Functionality with Altered Text Styles: In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
|
Required | WCAG 1.4.12 (WCAG 2.1) |
| Line Spacing: Line spacing SHOULD be at least 1.5 within paragraphs. | Best Practice | ||
| Paragraph Spacing: Paragraph spacing SHOULD be at least 1.5 times larger than the line spacing. | Best Practice | ||
| Word Spacing: Word spacing SHOULD be set to at least 0.16 times the font size. | Best Practice | ||
| Letter Spacing: Letter spacing SHOULD be set to at least 0.12 times the font size. | Best Practice | ||
| Line Justification: Text SHOULD NOT be full justified. | Best Practice | ||
| Column Width: The number of characters or glyphs per line in any section or column of text SHOULD NOT exceed 80 (40 characters in Chinese, Japanese, or Korean) | Best Practice | ||
| Font Legibility: Fonts SHOULD be easily readable by sighted users. | Best Practice | ||
| Color Contrast | See the requirements for Color and Contrast. | Required | multiple |
| CSS-Generated Content | Avoid CSS-Generated Content: CSS-generated content SHOULD be avoided (unless it is for presentation/decorative purposes only). | Best Practice | |
Text Alternative for CSS-Generated Content: A text alternative for informative CSS-generated content MUST be provided, AND the CSS-generated text SHOULD be set to aria-hidden="true" |
Required | WCAG 1.3.1 | |
Decorative CSS-Generated Content: Decorative or redundant CSS-generated content SHOULD be set to aria-hidden="true" |
Best Practice | ||
| Emphasis and Highlighting | Emphasis: Critical emphasis in the text SHOULD be conveyed in a text-based format, not visual styling alone. | Best Practice | |
Highlighting markup: Highlighted text SHOULD be marked with the <mark> element. |
Best Practice | ||
| Text-based highlighting: Critical highlighted text SHOULD be supplemented with a text-based method to convey the meaning of the highlighting. | Best Practice | ||
| Quotations | Blockquote: The <blockquote> element SHOULD be used to designate long (block level) quotations. |
Best Practice | |
Indentation: The <blockquote> element SHOULD NOT be used for visual styling (indentation) alone. |
Best Practice | ||
Inline quotations: The <q> element (for inline quotations) SHOULD NOT be used as the only way to designate quotations, due to poor support in screen readers and some browsers. |
Best Practice | ||
| Strikethrough/Delete and Insert | Strikethrough markup: Strikethrough text SHOULD be marked with the <del> element. |
Best Practice | |
| Strikethrough supplemental text: Critical strikethrough text MUST be supplemented with a text-based method to convey the meaning of the strikethrough. | Best Practice | ||
Insert markup: Text designated for insertion SHOULD be marked with the <ins> element. |
Best Practice | ||
| Insert supplemental text: Critical text designated for insertion MUST be supplemented with a text-based method to convey the meaning of the insertion. | Best Practice | ||
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| Visual Meaning | Visual Meaning: Content MUST NOT rely solely on visual characteristics such as shape, size, visual location, or orientation to convey meaning. | Required | WCAG 1.3.3 |
| Color | See the requirements for color and contrast. | Required | Multiple |
| Visual Layout | Visual Separation of Content Blocks: Blocks of content SHOULD be visually separated and distinct from each other, via margins, padding, or other methods of achieving visual "white space." | Best Practice | |
| Label Proximity: Labels SHOULD be visually adjacent to their controls. | Best Practice | ||
| One Visual Focal Point: The layout SHOULD have only one main visual focal point. | Best Practice | ||
| Draw Attention: The design SHOULD draw attention to the intended visual focus point. | Best Practice | ||
| Topic | Technique | WCAG AA Requirement | |
|---|---|---|---|
| Device Orientation | Horizontal or Vertical Orientation: Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential | Required | WCAG 1.3.4 (WCAG 2.1) |
| Adaptive/ Responsive Text | See the requirements for Text Styles, Resize, Reflow, and Zoom | Required | Multiple |
| Other Adaptive/ Responsive Elements |
Content that would cause scrolling in two directions (both horizontally and vertically) MUST respond to the viewport size or zoom state by resizing and/or reflowing, at viewport resolutions of up to 320px for vertically-scrolling content, and 256px for horizontally-scrolling content.
|
Required | WCAG 1.4.10 (WCAG 2.1) |
| Simplification | Simplified Content: Features of the content MAY be simplified, reduced in size, or eliminated when magnified or when viewed on small viewports. | Best Practice | |
| Simplified User Interface: Features of the interface SHOULD be simplified, reduced in size, or eliminated when magnified or when viewed on small viewports. | Best Practice | ||