Axe Core Guide

The list of 53 Input Purposes for User Interface Components are used as the basis for the programmatic definition of the purpose for each common input field that collects user data.

For screen readers to work properly, the autocomplete attribute values must be true and applied correctly.

Inaccessible content stems from missing autocomplete values in form fields. In the absence of the necessary autocomplete attribute values, screen readers will not read the identified autocomplete form fields.

When screen readers are unable to adequately notify users about the requirements for form field interaction, users cannot successfully navigate forms.

What this Accessibility Rule Checks

The purpose of each user-information-collecting input field can be established programmatically when:

• The input field fulfills a purpose specified in the Input Purposes for User Interface Components section, and
• The content is implemented using technologies that provide support for determining the desired meaning of form input data.

Ensure that the text spacing specified by style attributes is modifiable using custom stylesheets.

When lines of text are single-spaced, many people with cognitive difficulties have difficulty following them. Providing spacing between 1.5 and 2 makes it easier for them to begin a new line after finishing the previous one.

What this Accessibility Rule Checks

Text line spacing must be modifiable by custom stylesheets.

According to WCAG 2 AA contrast ratio thresholds, all text elements must have sufficient contrast between foreground text and background colors.

Some people with impaired eyesight have little contrast, meaning there are few bright or dark areas. Everything seems approximately the same brightness, making it difficult to detect outlines, borders, edges, and particulars. Text whose luminance (brightness) is too similar to the background can be difficult to read.

Nearly three times as many individuals suffer from low vision than total blindness. About 8% of males and 0.4% of women in the United States cannot see the typical complete spectrum of colors. A person with impaired vision or color blindness cannot distinguish text against an insufficiently contrasted background.

In the background, both color transparency and opacity are taken into account.

Transparency and opacity of colors in the foreground are more challenging to detect and account for due to:

• Background and foreground colors are same.
• Gradient backgrounds in CSS
• Background colors for pseudo-elements in CSS.
• Background colors generated using CSS borders.
• Overlap by another piece in the foreground - this can present positioning challenges.
• Elements shifted out of the viewport using CSS.

What this Accessibility Rule Checks

Examines each text element to check that the contrast between the foreground text and background colors meets the WCAG 2 AAA contrast ratio requirements.

This rule does not report text elements that have a background-image, are concealed by other components, or are text images.

This check additionally looks for child elements of disabled buttons so that they can be ignored to prevent a false value.

For multilingual screen reader users who would prefer a language other than the default, the HTML document element must have a valid lang property or match to a valid lang code.

The default language is chosen by users when setting up a screen reader. The screen reader uses the user’s default language preference when a webpage’s language is not specified. When people visit websites in more than one language and speak various languages, language settings become a problem. To ensure that website text is pronounced accurately, a language must be specified and validated.

Based on the pronunciation and traits of each language, screen readers employ distinct sound libraries for each one. If the documents state which language(s) to read when, screen readers can effortlessly switch between these language libraries. The screen reader will read the page in the user’s default language if the language is not set, which will result in an odd accent. When screen readers are utilizing the incorrect language library, nothing can be understood.

What this Accessibility Rule Checks

Ensures that the lang attribute is present in every HTML document.

For multilingual screen reader users who may prefer a language different than the default, the HTML content must contain a valid lang attribute or correlate to a valid lang code.

Users choose a default language when configuring a screen reader. If the language of a webpage is not provided, the screen reader uses the user’s default language. Language settings are a problem for users who speak different languages and visit websites in multiple languages. It is critical to declare a language and guarantee that it is valid in order for website text to be properly pronounced.

Screen readers employ various sound libraries for each language based on its pronunciation and characteristics. Screen readers can readily switch between these language libraries, but only if the documents specify which language(s) they should read. If no language is supplied, the screen reader reads the content in the user’s default language, which results in a perplexing accent! When screen readers use the incorrect language library, it is difficult to understand anything.

What this Accessibility Rule Checks

Ensures that every HTML document contains a lang or xml:lang property with a valid value.

Ensures that video or audio elements don’t have autoplay audio that lasts more than three seconds without a way to silence it.

When using screen reading software, people who are blind or have low vision may have trouble hearing the screen reader’s spoken output if other audio is playing at the same time.

If automatically playing audio continues for more than three seconds, it must be possible to pause, stop, or adjust the level using a well placed, easily accessible mechanism.

Users of screen readers can hear the screen reader without any other sounds playing thanks to an audio control.

A screen reader user’s ability to find the stop button may be hampered if audio starts playing immediately when they land on a page. This is because they navigate by listening, and automatically starting sounds may obstruct that navigation.

Therefore, we oppose the practice of automatically starting sounds (especially if they run longer than three seconds) and encourage users to start the sound themselves once they arrive at the page rather than expecting them to stop the sound themselves once they have reached the page.

What this Accessibility Rule Checks

The algorithm for this rule returns:

• Undefined when <audio> has no source (duration cannot be interpreted).
• Undefined when <video> has no source (duration cannot be interpreted).
• False when <audio> can autoplay and has no controls mechanism.
• False when <video> can autoplay and has no controls mechanism
• False when <audio> plays less than three seconds but loops.
• True when <video> can autoplay and duration is less than three seconds (by passing options).
• True when <video> can autoplay and duration is below allowed duration (by setting playback range).
• True when <audio> can autoplay but has controls mechanism.
• True when <video> can autoplay and has controls mechanism.

An image map consists of a single image with numerous clickable sections. Because screen readers cannot translate graphics into text, an image map, like all images, must contain alternative text for each of the distinct clickable parts, as well as for the larger image itself.

In the absence of alternative text, screen readers often announce the image’s filename. Filenames do not accurately describe images and are therefore inconvenient for screen reader users.

What this Accessibility Rule Checks

Ensures that image map area elements have alternative text.

Elements with aria-hidden must not contain focusable elements.

Using the property aria-hidden="true" on an element removes the element and all of its child nodes from the accessibility API, rendering the element fully unavailable to screen readers and other assistive technology.

aria-hidden may be used with extreme discretion to hide visibly displayed content from assistive technologies if the act of hiding this content is meant to enhance the experience of assistive technology users by reducing redundant or superfluous content.

If aria-hidden is employed to hide material from screen readers, the same or equal meaning and functionality must be made available to assistive technologies.

Using aria-hidden="false" on content that is a descendant of an element that is hidden using aria-hidden="true" will not reveal that content to the accessibility API, nor will it be accessible to screen readers or other assistive technology.

The rule applies to any element whose aria-hidden attribute value is true.

By adding aria-hidden="true" to an element, authors assure that assistive technologies will disregard the element. This can be used to hide aesthetic elements, such as icon typefaces, that are not intended to be read by assistive technologies.

A focusable element with aria-hidden="true" is disregarded as part of the reading order, but is still part of the focus order, making it unclear if it is visible or hidden.

What this Accessibility Rule Checks

For all user interface components, including form elements, links, and script-generated components, the name and role can be identified programmatically; user-specified states, properties, and values can be set programmatically; and user agents, including assistive technologies, are notified of changes.

Ensures every ARIA input field has an accessible name.

This rule ensures that each ARIA input field has a name that is accessible.

There must be accessible names for the following input field roles:

• combobox
• listbox
• searchbox
• slider
• spinbutton
• textbox

What this Accessibility Rule Checks

The names of ARIA input fields must be accessible.

Makes certain that each ARIA toggle field has an accessible name.

Ensures that any element having a semantic role has a name that is easily accessible.

Among the semantic roles are:

• checkbox
• menu
• menuitemcheckbox
• menuitemradio
• radio
• radiogroup
• switch

What this Accessibility Rule Checks

There is an accessible name for ARIA toggle fields.