Thanks to visit codestin.com
Credit goes to www.accessguide.io

Welcome to Access Guide, a friendly introduction to accessibility! Browse the cards below to learn more about the 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

Defined in Markup

Define status messages in markup

Code with a banner above

Defined in Markup

Define the human language in markup

HTML code with the human language attribute

Defined in Markup

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

Example of good semantic markup of an accordion

Defined in Markup

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

Examples of accessible and inaccessible use of color

Semi-Automated Test

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)

Defined in Markup

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

Defined in Markup

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)

Defined in Markup

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

Defined in Markup

Semi-Automated Test

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

Semi-Automated Test

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)

Semi-Automated Test

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)

Provide image descriptions

An image with an image description in the caption below

Defined in Markup

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

Semi-Automated Test

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