Site Index

Main Pages

About Contribute Glossary Homepage Updates

Guidelines

Allow users to save data after a session timeout A website that allows users to retain unsaved data after logging back in

Define information, structure, and relationships in markup Website with headers h1, h2, and h3 labeled

Define status messages in markup Code with a banner above

Define the human language in markup HTML code with the human language attribute

Define the purpose, name, role, and value of UI components in markup Example of good semantic markup of an accordion

Don't use color alone to convey information (colorblind) Examples of accessible and inaccessible use of color

Don't use flashing lights Illustration of flashing lights with a warning sign

Ensure that focus indicator is visible Comparison of an invisible focus indicator (inaccessible) vs. a visible one (accessible)

Ensure the programmatic label matches the visual label Comparison where the visual and programmatic label match (accessible) vs. when they don't match (inaccessible)

Comparison where the visual and programmatic label match (accessible) vs. when they don't match (inaccessible)

Get rid of background noise in audio Audio with and without background noise

Identify and describe errors to users Example of a descriptive error message for an invalid email address

Label elements and give instructions A form with properly labeled inputs for name, time, and date

Make all functionality available through the keyboard Computer keyboard

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)

Comparison of a focus order that goes up to down, left to right (accessible) vs. a random order (inaccessible)

Make multiple types of input available Multiple types of input - touch, keyboard, voice, and mouth stick.

Make sure that assistive tech can parse content HTML code of a list with syntax errors

Make sure the user knows where they are Example of a website with breadcrumbs and a selected tab

Make sure there are no keyboard traps Getting trapped in the calendar date picker

Make time limits adjustable or not essential Example of being able to extend a time limit

Only change the context by user request Example of an annoying pop-up

Prevent accidental pointer input Example of accidentally pressing a button

Prevent errors when handling legal and financial data Example of confirming information on a form with legal information

Provide ASL interpretation of video A speaker on TV with an ASL interpreter

Provide a way to bypass repeating content (skip link) Illustration of a skip link on a website

Provide a way to expand abbreviations Examples of the acronyms LOL, LMAO, and ROFL being expanded

Provide a way to pause audio that plays automatically A DJ booking website with a pause audio button

Provide a way to turn off character key shortcuts A Settings webpage where you can turn off character key shortcuts

Provide a way to turn off moving content and animation triggered by interaction A carousel with a pause button on a website

Provide a way to understand unusual words and phrases The unusual word "Gobbledygook" being defined

Provide a way to zoom in and resize text up to 200% Text at both original size and zoomed up to 200% bigger

Provide audio descriptions of videos Example of video of colorful shapes with an audio description below

Provide audio transcripts Character listening to podcast with an audio transcript

Provide buttons with a large target size Comparison of a large button size (accessible) vs. very tiny ones (inaccessible)

Provide captions 2 characters talking with captions underneath

Provide consistent UI components Example of consistent login buttons (accessible) vs. inconsistent buttons (inaccessible)

Provide contextual help A help message below the membership code of a form

Provide conventional interactions (instead of motion-activated interactions) Comparison of a conventional undo button (accessible) vs. an unconventional shake-to-undo interaction (inaccessible)

Comparison of a conventional undo button (accessible) vs. an unconventional shake-to-undo interaction (inaccessible)

Provide image descriptions An image with an image description in the caption below

Provide media alternatives of video Example of a video with colorful shapes and a text description below

Provide more than one way to locate a page Examples of different ways to locate a page - site directory, search, and featured pages

Provide pronunciation for ambiguous words Example of phonetic pronunciation of the word "anemone"

Provide the option to turn off interruptions Webpage that allows user to postpone alerts

Suggest corrections to errors Example of a "no search results" message with a suggestion to the typo

Use consistent navigation Exampel of navigation that looks the same (accessible) vs. different (inaccessible)

Use high color contrast Examples of high color contrast (easy to see) and low contrast (difficult to see)

Use hover and focus best practices A website with 2 levels of menus open

Use responsive layouts and don't restrict the layout to portrait or landscape The same website on desktop, tablet, and mobile size screens

Use single-pointer gestures (instead of path-based gestures) Comparison of single-pointer and path-based gestures

Use text instead of images of text Comparison of an image of text (inaccessible) vs. markup text with CSS styling (accessible)

Use text presentation best practices Comparison of accessible text that's easy to read and inaccessible, small, low contrast text.

Warn users about timeouts Example of a timeout warning with a button to stay logged in

Write content at an approachable reading level 3 cartoon characters reading a book written in simple language

Write descriptive headings and labels Example of descriptive headings (accessible) vs. vague headings (inaccessible) for a smoothie recipe

Write descriptive link text Example of specific and descriptive button text (accessible) vs. generic text (inaccessible)

Write descriptive page titles Examples of specific and descriptive page titles (accessible) vs. vague ones (inaccessible)

Write instructions that don't rely on just one characteristic Example of accessible and inaccessible instructions

Main Pages

Tags

Guidelines