Accessibility Guide for WCAG 2.1 (AAA)

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.

Check that all links with the same accessible name fulfill the same function.

This guideline is significant since the goal is to assist viewers in understanding the purpose of each link in the material so they may determine whether or not to follow it. Links with the same destination should have the same descriptions, but links with different purposes and destinations should have different descriptions (see also Success Criterion 3.2.4), which calls for consistency in identifying components with the same functionality). Links can be understood when they are out of context, such as when the user agent presents a list of all the links on a page, because the purpose of a link can be inferred from its link text.

What this Accessibility Rule Checks

This rule’s algorithm yields:

• Undefined for a native link with the href attribute but no visible name.
• Undefined when there is no accessible name for an ARIA link.
• Undefined when the accessible name of an ARIA link is merely a collection of unicode (emoji, punctuation, nonBmp) characters.
• True for native links with an accessible name and a href attribute value.
• True for ARIA links with accessible names (for example, a area with map used in a image element).
• True for native links having href attribute values and a name that can be found (that also has emoji, nonBmp and punctuation characters).

Remove the http-equiv="refresh" attribute from each meta element in which it is present.

Example of invalid code:

<meta http-equiv="refresh" content="60" url="http://example.com/index.html">

Automatic page refreshing can be disorienting for users since they do not anticipate it. Moreover, refreshing the page causes the focus to reset to the top of the page, resulting in user frustration.

Redirection and page refreshing using the <meta> element can cause issues for users with disabilities. The primary reason for this is the lack of user control over the timing of the redirection or refresh. If the goal of the <meta> element is to redirect users to a new location, server-side methods should be used instead of client-side methods. Moving or updating content can present challenges for users who struggle to read stationary text quickly or track moving objects, and it can also cause difficulties for screen readers.

If the intention of the <meta> element is to refresh the page, it is recommended to handle it using JavaScript. Additionally, incorporate additional scripting to provide users with options to pause the refresh, increase the time between refreshes, or disable the refresh entirely.

What this Accessibility Rule Checks

Checks for the presence of the http-equiv=”refresh” attribute on the meta elements.