Accessibility Checking for Large Sites

For screen reader users, buttons must include recognizable text that specifies the destination, purpose, function, or action.

Users of screen readers are unable to determine the function of elements with the roles role="link", role="button", and role="menuitem" that lack an accessible name.

What this Accessibility Rule Checks

Verifies that each button has a distinguishable, accessible label.

Each page must have a main landmark to allow users to rapidly traverse repetitive blocks of material or interface elements (such as the header and navigation) and get the primary content.

Due to the fact that websites frequently display secondary, repetitive content on several pages (such as navigation links, heading graphics, and advertising frames), keyboard-only users benefit from faster, more direct access to a page’s principal content. This saves keystrokes and reduces physical discomfort.

It is more difficult and time-consuming for users who cannot use a mouse to navigate using the keyboard if the interface does not provide features to facilitate keyboard navigation. To activate a link in the middle of a web page, for instance, a keyboard user may have to browse through a significant number of links and buttons in the page’s header and primary navigation.

Extremely motor-impaired users may require several minutes to browse through all of these pieces, which can cause to tiredness and potential physical pain for some users. Even users with less severe limitations will require more time than users with a mouse, who can click on the desired link in less than a second.

What this Accessibility Rule Checks

Checks for the presence of at least one of the following features:

• an internal skip link
• a header
• a geographical landmark

According to WCAG 2 AAA 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.

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.

The screen orientation (such as portrait or landscape) of mobile applications should not be restricted to a single mode. Users should be able to shift the orientation of their device between portrait and landscape without losing readability. Additionally, upon opening a page, it should appear in the current orientation of the user.

Users of assistive technologies may not have access to orientation features on their devices or assistive technologies.

What this Accessibility Rule Checks

Unless a specific display orientation is important, content does not confine its view and functionality to a single display orientation, such as portrait or landscape.

Definition lists (dl) may only contain dt and dd groups, div, script, or template elements that are properly organized.

Screen readers have a particular method for reading definition lists. When such lists are not correctly marked up, screen reader output may be erroneous or confusing.

A list of definitions is used to explain the meaning of words or phrases. Using the dl element, the definition list is formatted. Within the list, each term is enclosed in its own dt element, and its definition is enclosed in the dd element that immediately follows.

What this Accessibility Rule Checks

Ensures that each dl element is correctly constructed.

To be valid, definition list items (dt and / or dd) must be enclosed by parent dl elements. This allows screen reader users to recognize the right hierarchy of the list’s information.

A definition list item is invalid if it is not surrounded by parent dl elements.

A definition list must adhere to a particular hierarchy. Using the dl element, a list is defined. It is followed by alternating sets of dt and dd elements, beginning with dt. dt elements define a term while dd elements denote a term’s description. Each group of dt components must be accompanied by a group of dd elements. In the definition list, only dt and dd items are permitted. If not followed, this hierarchy will render the list invalid.

What this Accessibility Rule Checks

Ensures that every child dd and dt element has a parent dl element.

The title element of the HTML document must not be empty in order to give users with an overview of its content.

Users using screen readers utilize page titles to obtain an overview of the page’s content. If a page lacks a title, navigating through it can soon become difficult and confusing for screen reader users. The title element of the page is the first item screen reader users hear when the page loads.

When they arrive at a page, screen reader users hear the page’s title first. If there is no title or if the title is not descriptive and unique, users of screen readers must read the page to discern its content and purpose.

What this Accessibility Rule Checks

Makes certain that each HTML document has a title tag associated with it.

The value supplied to active ID attributes on focusable elements must be unique to avoid assistive technology from overlooking the second instance. Active ID attributes may not be used more than once on focusable components inside the same document; assistive technology requires unique IDs for focusable active elements in order to differentiate between them.

Focusable components on a page are identified exclusively by the ID attribute. It is illogical to duplicate an active ID.

Duplicate active ID values compromise the accessibility of focusable elements, such as form labels, table header cells, and so on. Screen readers and client-side scripts will bypass all instances of repetition other than the first. Validating HTML files aids in preventing and eliminating potential sources of accessibility issues, so long as accessibility is not compromised.

Those who have expertise with client-side scripting are aware that when an active ID is reused, the only instance that is normally acted upon by the script is the first. Similarly, assistive technology may only appropriately reference the first active ID when mentioning it.

What this Accessibility Rule Checks

Ensures that each page element with an active ID and a focusable state has a unique value.

To avoid a second instance being missed by assistive technology, the value supplied to an id property used in ARIA or in form labels must be unique.

To put it another way, ID values used in ARIA and labels cannot be used more than once to distinguish one element from another in the same document.

Common validation problems like duplicate IDs can make labels, like ARIA elements, form fields, and table header cells, inaccessible.

Each element is distinguished from the others by a unique ID, which also prevents erroneous markup in which only the first instance is appropriately referenced by client-side scripting or assistive technology.

What this Accessibility Rule Checks

Assures the uniqueness of each ID used in ARIA attributes and the for property on a label.