How To Design For Accessibility

Accessibility requirements relevant to visual design generally cluster around issues of legibility, color perception and device independence.

Key Concepts

Accessible design is, at its heart, just "good" design: effective, highly usable visuals and interfaces to communicate with an audience. What is added is an awareness of certain limitations or needs of specific audience members.

Common design considerations for people with disabilities interacting with digital applications include:

  • Users with low vision may struggle to read small text or discern differences between similar colors.
  • Users with with distortions or artifacts in their visual field may struggle with designs which rely on distant spatial connections, such as form designs with a column of labels to the left of a column of fields.
  • Users using magnification software will zoom in on individual pieces of the page. Alerts placed far from a cursor may appear off their screen, and scrollable in-page elements may prevent them from scrolling the page without zooming back out.
  • Users with colorblindness and devices with "digital wellbeing" features that turn sepia/grayscale in the evening may not be able to differentiate color differences.
  • Users with reading and attention disorders may struggle to read content if distractions pull their focus from the content or font choices increases their cognitive load.
  • Users relying on screen readers do not receive visual-only cues like relative position, borders and background colors. If an interface is defined by its visual layout (e.g., an interface has a set of filters that modify a results region), this structure needs to be explicitly labeled so it can be heard as well as seen.

Designer's Guide

Legibility

Font and layout choices should make it easy for users to recognize characters and track lines. This is especially critical for users with low vision and cognitive disabilities relevant to reading or focus.

  • The design should minimize distractions and make it easy for users to focus on the primary content.
    • Ample space should separate grouped elements.
    • Animations should be minimized or easily paused.
  • Sans-serif fonts with line heights (leading) close to 1.5 and line lengths of less than 80 characters are usually easiest to read.
  • Left aligned text maintains consistent character and word spacing. Inconsistently spaced words in justified text can make it difficult to read for some users, and the inconsistent left alignment of centered or right-aligned text is often mistaken for meaningful tab indentations.
  • Very light weights (<300) of some fonts exhibit dramatically reduced contrast, blurriness and color shifts on some screens. Be sure to test light font weights on low and high PPI screens, on both Windows and Apple devices.

Color and Contrast

  • Color contrast for text against its background should meet WCAG standards: 4.5:1 for small text, 3:1 for large text.
  • Meaningful graphical elements (icons, focus indicators) should also maintain a 3:1 contrast against their background.
  • Avoid using pure black (#000) against pure white (#FFF). Extreme contrast at a single pixel distance reduces legibility and increases eyestrain for many users, especially users with dyslexia and light sensitivity.
  • When using more than one thematic color, try to use palettes which remain distinct for users with colorblindness.
  • Avoid communicating concepts with color alone. Secondary indications such as icons, underlines or contrast changes may be needed to differentiate elements.

Color selection and testing tools

Flexibility

  • Designs should be adaptable for many screen sizes:
    • On small screens, elements should not become too small to see or overflow the screen horizontally.
    • On large screens elements should not become blurry due to over-enlargement.
    • The design should not require a particular orientation (vertical or horizontal).
  • Designs should be adaptable for low and high pixel densities:
    • Low PPI screens may need heavier weight fonts or simplified graphical elements.
    • High PPI screens will need vector or high resolution images and logos.

Intuitive Interactions & Wayfinding

  • Text for links, buttons and menu items should clearly explain their purpose or destination.
  • Visual indications that elements are interactive (links, buttons) should be clear and consistent, and should be reserved for interactive elements. Users should not have to figure out what they can click on through trial and error.
    • Note that color changes alone would require a 3:1 contrast ratio with the non-interactive text, meaning it is often easier to rely on secondary indications (underlines, outlines, background colors).
  • Maximize visual proximity for related elements and field labels.
  • Make clicking and hovering forgiving of imprecision with amply sized touch targets, space between interactive elements, and forgiving mouse paths (e.g.: wide vertical dropdown paths remain open when a hovering mouse deviates a dozen pixels from a straight path; narrow horizontal flyouts would close).
  • Navigational elements should appear in the same place and in the same order on each page, and indicate which page or section is active.
  • A site search, content links, a site map or a similar alternate navigation should be available for users who do not find what they are looking for in the main menu.

Online Classes, Books & Articles