This page contains all guidelines tagged with:

Code

This refers to the coding of products and websites, specifically semantic markup, ARIA, HTML, CSS, and other relevant front-end technology.

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

A carousel with a pause button on a website

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

The same website on desktop, tablet, and mobile size screens

Only change the context by user request

Example of an annoying pop-up

Use text presentation best practices

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

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

Text at both original size and zoomed up to 200% bigger

Use text instead of images of text

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

Ensure that focus indicator is visible

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

Use hover and focus best practices

A website with 2 levels of menus open

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

Provide a way to bypass repeating content (skip link)

Illustration of a skip link on a website

Make multiple types of input available

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

Provide a way to turn off character key shortcuts

A Settings webpage where you can turn off character key shortcuts

Make sure there are no keyboard traps

Getting trapped in the calendar date picker

Make all functionality available through the keyboard

Computer keyboard

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

Label elements and give instructions

A form with properly labeled inputs for name, time, and date

Defined in Markup

Make sure that assistive tech can parse content

HTML code of a list with syntax errors

Defined in Markup

Semi-Automated Test

Define status messages in markup

Code with a banner above

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

Define the human language in markup

HTML code with the human language attribute

Defined in Markup

Define information, structure, and relationships in markup

Website with headers h1, h2, and h3 labeled

Defined in Markup

Allow users to save data after a session timeout

A website that allows users to retain unsaved data after logging back in

Warn users about timeouts

Example of a timeout warning with a button to stay logged in

Make time limits adjustable or not essential

Example of being able to extend a time limit

Prevent errors when handling legal and financial data

Example of confirming information on a form with legal information

Prevent accidental pointer input

Example of accidentally pressing a button

Write descriptive page titles

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

Provide a way to pause audio that plays automatically

A DJ booking website with a pause audio button