This page contains all guidelines tagged with:

Visual

This refers to the needs of Blind, visually impaired, colorblind and dyslexic people. Most access needs refer to screen reader and screen magnifier accessibility, as well as making sure that content is easy to see and customize.

Provide a way to turn off moving content and animation triggered by interaction

A carousel with a pause button on a website
Code
Interaction
Cognitive
Visual
Level A

Use responsive layouts and don't restrict the layout to portrait or landscape

The same website on desktop, tablet, and mobile size screens
Code
Presentation
Physical
Visual
Level AA

Only change the context by user request

Example of an annoying pop-up
Code
Design
States
Interaction
Cognitive

Use text presentation best practices

Comparison of accessible text that's easy to read and inaccessible, small, low contrast text.
Code
Design
Presentation
Styles
Visual

Provide a way to zoom in and resize text up to 200%

Text at both original size and zoomed up to 200% bigger
Code
Presentation
Visual
Level AA
Manual Test

Use text instead of images of text

Comparison of an image of text (inaccessible) vs. markup text with CSS styling (accessible)
Code
Presentation
Visual
Level AA
Level AAA

Ensure that focus indicator is visible

Comparison of an invisible focus indicator (inaccessible) vs. a visible one (accessible)
Code
States
Interaction
Keyboard
Visual

Use hover and focus best practices

A website with 2 levels of menus open
Code
States
Interaction
Keyboard
Visual

Make an intuitive order focusable and defined in markup

Comparison of a focus order that goes up to down, left to right (accessible) vs. a random order (inaccessible)
Code
Defined in Markup
States
Interaction
Keyboard

Provide a way to bypass repeating content (skip link)

Illustration of a skip link on a website
Code
Interaction
Keyboard
Physical
Visual

Make multiple types of input available

Multiple types of input - touch, keyboard, voice, and mouth stick.
Code
Interaction
Physical
Visual
Cognitive

Make sure there are no keyboard traps

Getting trapped in the calendar date picker
Code
Interaction
Keyboard
Physical
Visual

Make all functionality available through the keyboard

Computer keyboard
Code
Interaction
Keyboard
Physical
Visual

Ensure the programmatic label matches the visual label

Comparison where the visual and programmatic label match (accessible) vs. when they don't match (inaccessible)
Code
Defined in Markup
Cognitive
Visual
Level A

Label elements and give instructions

A form with properly labeled inputs for name, time, and date
Code
Defined in Markup
Cognitive
Visual
Level A

Make sure that assistive tech can parse content

HTML code of a list with syntax errors
Code
Defined in Markup
Visual
Level A
Semi-Automated Test

Define status messages in markup

Code with a banner above
Code
Defined in Markup
Visual
Level AA
Manual Test

Define the purpose, name, role, and value of UI components in markup

Example of good semantic markup of an accordion
Code
Defined in Markup
Visual
Level A
Level AAA

Define the human language in markup

HTML code with the human language attribute
Code
Defined in Markup
Visual
Level A
Level AA

Define information, structure, and relationships in markup

Website with headers h1, h2, and h3 labeled
Code
Defined in Markup
Visual
Level A
Automated Test

Allow users to save data after a session timeout

A website that allows users to retain unsaved data after logging back in
Code
Timing
Cognitive
Physical
Visual

Warn users about timeouts

Example of a timeout warning with a button to stay logged in
Code
Timing
Cognitive
Physical
Visual

Provide the option to turn off interruptions

Webpage that allows user to postpone alerts
Design
Timing
Cognitive
Visual
Level AAA

Make time limits adjustable or not essential

Example of being able to extend a time limit
Code
Design
Timing
Cognitive
Physical

Prevent errors when handling legal and financial data

Example of confirming information on a form with legal information
Code
Error Recovery
Cognitive
Physical
Visual

Prevent accidental pointer input

Example of accidentally pressing a button
Code
Error Recovery
Cognitive
Physical
Visual

Provide more than one way to locate a page

Examples of different ways to locate a page - site directory, search, and featured pages
Design
Navigation
Cognitive
Physical
Visual

Use consistent navigation

Exampel of navigation that looks the same (accessible) vs. different (inaccessible)
Design
Navigation
Cognitive
Visual
Level AA

Provide consistent UI components

Example of consistent login buttons (accessible) vs. inconsistent buttons (inaccessible)
Design
Styles
Cognitive
Visual
Level AA

Don't use color alone to convey information (colorblind)

Examples of accessible and inaccessible use of color
Design
Styles
Visual
Level A
Semi-Automated Test

Use high color contrast

Examples of high color contrast (easy to see) and low contrast (difficult to see)
Design
Styles
Visual
Level AA
Level AAA

Write instructions that don't rely on just one characteristic

Example of accessible and inaccessible instructions
Content
Writing
Visual
Hearing
Cognitive

Write descriptive page titles

Examples of specific and descriptive page titles (accessible) vs. vague ones (inaccessible)
Code
Content
Writing
Cognitive
Visual

Write descriptive link text

Example of specific and descriptive button text (accessible) vs. generic text (inaccessible)
Content
Writing
Cognitive
Visual
Level A

Write descriptive headings and labels

Example of descriptive headings (accessible) vs. vague headings (inaccessible) for a smoothie recipe
Content
Writing
Cognitive
Visual
Level AA

Don't use flashing lights

Illustration of flashing lights with a warning sign
Content
Multimedia
Physical
Visual
Level A

Provide media alternatives of video

Example of a video with colorful shapes and a text description below
Content
Multimedia
Hearing
Visual
Level A

Provide audio descriptions of videos

Example of video of colorful shapes with an audio description below
Content
Multimedia
Visual
Level A
Level AA

Provide a way to pause audio that plays automatically

A DJ booking website with a pause audio button
Code
Interaction
Cognitive
Visual
Level A

Provide image descriptions

An image with an image description in the caption below
Content
Multimedia
Visual
Level A
Defined in Markup