Introduction

What about Visual Design and Colors?

Other modules discuss techniques for making web content accessible to people who can't see it. This module takes somewhat of an opposite perspective. It focuses on visual accessibility techniques for people who can see, but perhaps not with perfect acuity or color perception.

There are people who need to magnify the screen, or who need high contrast colors, or who have a form of color-blindness. There are also people with reading disabilities or certain kinds of cognitive disabilities who may have good vision, but whose brains may process the visual signals in ways that make things difficult to distinguish or understand unless the elements on the screen are laid out clearly. This module is all about the visual side of accessibility.

Summary

Visual content must be presented so that is it perceivable and understandable by people of differing abilities, including people who are color blind or have low vision, or people who have cognitive, language and learning disabilities.

Resources

Deque University

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Color

Checklist - Deque

Color

  • Any information conveyed by color MUST be accompanied by a programmatically-discernible text alternative.
  • The text alternative for information conveyed by color MUST accurately convey the same information without color.
  • Any information conveyed by color MUST be accompanied by a visible alternative (text, image, etc.) that does not depend on color for meaning.
  • Color alone MUST NOT be used to distinguish links from surrounding text unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g. underline, outline, etc.) is provided when the link is hovered or receives focus.
  • Color SHOULD NOT be used as the sole method of distinguishing UI components and/or their surrounding content, unless the color contrast between the UI components and/or surrounding content is at least 3:1.
  • Visible text SHOULD be standard text in the markup (not images or graphic versions of text), to allow user customization of text color and contrast.
  • Visible UI components SHOULD use native controls and features (not images or graphic versions of controls) where available, to allow user customization of interface color and contrast.

Download Summary & Checklist

Tips & Tricks

Color

  • Shouldn't be only means of communication
  • Supplements experience
  • Beware of color blindness
  • Test inverted and monochrome

Contrast

Checklist - Deque

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.
  • Small text (under 18 point regular font or 14 point bold font) SHOULD have a contrast ratio of at least 7 to 1 with the background.
  • Large text and images of 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.
  • The contrast of all small visual focus indicators (smaller than 3px by 3px) against the background SHOULD be at least 4.5 to 1.
  • The contrast of all large visual focus indicators (at least 3px by 3px) against the background SHOULD be at least 3 to 1.
  • The contrast of UI control boundaries compared to adjacent areas SHOULD be sufficient (3 to 1 for UI control boundaries measuring at least 3px by 3px, and 4.5 to 1 for all other UI controls) to distinguish the UI control from the adjacent areas.
  • Web content MUST retain all essential visual information in Windows High Contrast Mode.
  • The design MUST NOT override Windows High Contrast Mode.

Download Summary & Checklist

Tips & Tricks

None documented

Visual Layout

Checklist - Deque

Visual Layout

  • Blocks of content SHOULD be visually separated and distinct from each other, via margins, padding, or other methods of achieving visual "white space."
  • Labels SHOULD be visually adjacent to their controls.
  • The layout SHOULD have only one main visual focus.
  • The design SHOULD draw attention to the intended visual focus.

Download Summary & Checklist

Tips & Tricks

None documented

Jump to:

Guidelines

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

Reading Order, Focus Order

Checklist - Deque

Reading Order, Focus Order

  • The reading and navigation order (determined by code order in the DOM) MUST be logical and intuitive.
  • The navigation order of focusable elements (links, form elements, etc.) MUST be logical and intuitive.
  • tabindex of positive values SHOULD be avoided.

Download Summary & Checklist

Tips & Tricks

Different ways

  • Interactive elements
  • DOM elements via screen reader

Watch out when using

  • Floating properties
  • Position properties
  • ARIA owns

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented

Typography

Checklist - Deque

Typography

  • Fonts SHOULD be easily readable by sighted users.
  • Line spacing SHOULD be at least 1.5 within paragraphs.
  • Paragraph spacing SHOULD be at least 1.5 times larger than the line spacing.
  • 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)
  • Text SHOULD NOT be full justified.
  • Fonts SHOULD be user-customizable.

Download Summary & Checklist

Tips & Tricks

Two types

  • Serif
  • Sans-serif (better for dyslexia)

Best Practices

  • Use relative Units (%, rem even better than em)
  • Use underline for regular links (only)
  • Don't use Strikethrough or insert
  • Can be resized without loss of content or functionality
  • Text Zoom VS Page Zoom
  • Don't justify
  • Don't center
  • Beware of maximum paragraph width
  • Use proper text direction

Icon fonts

Jump to:

Advanced

Resources

Specifications

None documented

Examples

None documented

Miscellaneous

Practice

WCAG Annotations

None documented

Design Annotations

None documented

CSS-Generated Content and Hidden Content

Checklist - Deque

CSS Generated Content and Hidden Content

  • CSS-generated content SHOULD be avoided.
  • A text alternative for informative CSS-generated content MUST be provided, AND the CSS-generated text SHOULD be set to aria-hidden="true".
  • Decorative or redundant CSS-generated content SHOULD be set to aria-hidden="true".
  • Visually hidden and inactive content MUST be hidden from screen reader users until that content is made visible and active for sighted users.

Download Summary & Checklist

Tips & Tricks

None documented

Resources

Specifications

Examples

None documented

Miscellaneous

None documented

Practice

WCAG Annotations

None documented

Design Annotations

None documented