Accessibility Guide
To enable screen reader users to navigate the heading structure with keyboard shortcuts rather than wasting time listening to more of the website to understand its structure, make sure the page, or at least one of its frames, contains a h1
element that appears before the start of the main content.
Users of screen readers can utilize keyboard keys to move straight to the first h1
, which should, in theory, let them access the web page’s main content. Screen reader users must listen to more of the website in order to understand its structure if there is no h1
or if it appears elsewhere other than at the start of the main material, wasting significant time.
Keep in mind that unlike a visual user, a blind user cannot just glance at a web page and comprehend its layout. Without reading the entire material, visual users can learn a lot about the website layout. Users who are blind do not have such option. Unless there is another convenient way to gain a “glimpse,” screen readers read sequentially, which requires listening to the entire web page. It turns out that one method to do that is to use headers. Keyboard shortcuts can be used by screen reader users to move around a document’s heading hierarchy.
What this Accessibility Rule Checks
This rule locates every element that matches the subsequent selector and confirms that there is at least one of them: h1:not([role])
, [role="heading"][aria-level="1"]
Checks to make sure elements selected for removal from the accessibility tree are really deleted.
In some circumstances, an element having a semantic role of none
or presentation
does not resolve to none or presentation (respectively).
This prevents the element from being eliminated from the accessibility tree, as would be expected, and allows screen readers to interact with it.
You shouldn’t focus the element or give it any global ARIA attributes in order to keep the element out of the accessibility tree.
What this Accessibility Rule Checks
Checks every element with role=“none”
or role=“presentation”
to ensure they do not have a global ARIA attribute and are not focusable.
The recommended practice is to keep all content, excluding skip links, in designated areas such the header
, nav
, main
, and footer
.
If the content is divided into several high-level divisions, screen reader users can navigate a website much more easily. Finding content that isn’t in parts can be challenging, and the item’s intent sometimes isn’t evident.
Some essential semantic markers, such as the ability to designate portions of the page as the header, navigation, primary content, and footer, were formerly absent from HTML. It is recommended to combine HTML5 elements with ARIA landmarks in a single element, but as browser support for HTML5 grows, using native HTML5 element regions will become more common.
What Checks This Accessibility Rule?
Ensures that a landmark region contains all of the content on a page.
Ensures that components with the label role="img"
have an alternate text.
Even if an image merely contains text, screen readers are unable to convert it into words that the user can hear. As a result, alternative language for images must be brief, descriptive, and easily understandable so that screen reader users may understand the image’s contents and intended application.
Without an accessible text alternative that screen readers can translate into sound or braille, all visual information, including images, is utterly useless if you can’t see. Accessible alternate text is also necessary to variable degrees for people with low vision or color blindness problems.
If an image does not have a text alternative that is accessible, screen readers cannot translate the information in the image to voice or braille.
What this Accessibility Rule Checks
Elements with the property value role="img"
must additionally have markup that specifies accessible alternative text for the image.
For screen reader users to efficiently navigate tables, the scope
element must be utilized correctly on tables in accordance with either HTML4 or HTML5 specifications.
If utilized properly, the scope
feature greatly simplifies table navigation for screen reader users. When misused, scope
can make table navigation far more difficult and ineffective.
The assumption made by a screen reader is that a table has a header that identifies a scope. Having an accurate header makes viewing a table for those who use screen readers far more accessible and effective due to the way the devices work.
What this Accessibility Rule Checks
Ensures that tables are correctly using the scope
attribute.
Elements with scrollable content must be keyboard-accessible.
This rule searches scrollable content for elements that can be focused to enable keyboard navigation. When the focus shifts to an element within a scrollable region, keyboard navigation shouldn’t stop working.
What this Accessibility Rule Checks
Check to see if the scrollable area has keyboard access.
A label element with a programmatic association must be included for each select element.
To make forms accessible, they must have clear form labels. Even if a form element isn’t programmatically named, sighted users can usually tell what it’s for when they see checkboxes, radio buttons, input fields, etc. To identify form fields, screen reader users need clear form labels. All form elements should have labels to remove confusion and make the product more accessible.
Screen reader users are in the dark about the expected input data when form elements lack labels. Without a defined label connection (or redundant text acting as a label), screen readers cannot automatically determine information about input items.
What this Accessibility Rule Checks
ensures that each select element has a label that is associated with it programmatically.
An image map that is server-side rather than client-side is present in the page.
Server-side image maps can’t be used with a keyboard since mouse clicks are needed to access the links they contain, rendering them unavailable to users who only use keyboards.
The server-side software used to process the image map receives the locations of the mouse click from server side image maps. They are not keyboard accessible since they rely on mouse clicks, although client-side image mappings are. Additionally, unlike the regions
of a client-side picture map, actionable areas of a server-side image map cannot be provided with text alternatives.
What this Accessibility Rule Checks
Makes sure that server-side image maps are not used.
In order to save viewers time, the website must contain a link at the top before the navigation that directs them directly to the page’s core content.
As it appears in the HTML file, screen readers read the text sequentially.
This has the effect of reading out to users of assistive technology the content at the top of the page, which normally includes the full navigation, before they can access any of the primary content. When a user is primarily interested in the main material, it might be time-consuming to listen to or navigate through all of the text at the top of the page because it is frequently very long.
Users who are blind, have low eyesight, or only use the mouse will benefit from an HTML website having a skip link.
What this Accessibility Rule Checks
Ensures that programmers adhere to the best practice of placing a skip link as the page’s very first link.
Ensures that SVG elements with the roles img
, graphics-document
or graphics-symbol
have a text alternative that is accessible.
In order to make information provided by non-text material (including SVG graphics) accessible, Success Criterion 1.1.1 requires the usage of a text alternative. Because they can be portrayed through any sensory modality (for example, visual, auditory, or tactile) to suit the user’s needs, text alternatives are a fundamental method of making information accessible. By including text alternatives, a wider range of user agents can present the content in different ways.
For instance, a person who is blind can request that the text equivalent of an image be read out using synthetic speech. An audio file’s text alternative can be presented for people who cannot hear it, allowing them to read it. Text alternatives will eventually make it simpler to translate information into sign language or a more basic version of the same language.
What this Accessibility Rule Checks
The algorithm for this rule returns:
-
True if the element has a
<title>
code child
<svg id="target"><title>Time II: Party</title></svg>
-
True if the
<title>
child has text nested in another element.
<svg id="target"><title><g>Time II: Party</g></title></svg>
-
False if the element has no
<title>
child.
<svg id="target"></svg>
-
False if the
<title>
child is empty.
<svg id="target"><title></title></svg>
-
False if the
<title>
is a grandchild.
<svg id="target"><circle><title>Time II: Party</title></circle></svg>
-
False if the
<title>
child has only whitespace.
<svg id="target"><title> \t\r\n </title></svg>
- False if there are multiple titles and the first is empty.
<svg id="target"><title></title><title>Time II: Party</title></svg>