Accessibility Guide for WCAG 2.1 (A)
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
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
.
To avoid assistive technology missing the second instance, the value supplied to an id
property must be distinct. In other words, id
attributes may not be used more than once to distinguish one element from another within the same document.
Elements on a page are uniquely identified via the ID attribute. It makes no sense to make a second id
.
Duplicate id
s can make labels for forms, table header cells, etc. inaccessible since screen readers and client-side scripts pass over the second iteration. They are typical markup validation mistakes that, if they do not damage accessibility, can reduce potential causes of accessibility issues.
Those who are familiar with client-side scripting are aware that when an ID is reused, the script normally only reacts to the first instance of that id
use. Similar to this, assistive technology might only appropriately reference the first id
when referencing an id
.
What this Accessibility Rule Checks
Makes certain that every element on the page with an id attribute has a distinct value for the id
attribute.
Makes certain that a form field doesn’t have multiple labels.
For some combinations of screen readers and browsers, adding several labels to the same form field can result in issues, and the outcomes vary depending on the combination. The first label will be read by some combinations. The last label will be read by some. Both labels will be read by others.
What this Accessibility Rule Checks
Makes certain that a form field doesn’t have multiple labels.
tabindex="-1"
cannot be present in <frame>
and <iframe>
elements with focusable content.
The browser is unable to move the focus to the content included in a frame when it has a negative tabindex. This stops keyboard navigation from skipping all of its content, and if the frame is scrollable, it also prevents the focus from moving to any element from which the frame may be scrolled.
What this Accessibility Rule Checks
Examine all frame
and iframe
elements that contain a negative tabindex value, such as tabindex="-1"
. If there are any such frames, make sure they don’t have nested frames that do contain focusable items.
To help screen reader users understand the contents of each frame
or iframe
element in the document, each element must have a distinct title.
A frame title is used by screen reader users to describe the contents of the frame. If the frames are not identified with a title
element, navigating across frames and iframes can soon become challenging and confusing for users of this technology.
Users of screen readers can choose to display a list of all the titles for the frames on a page. Users can locate the frame they’re looking for more quickly by adding descriptive, distinctive labels. Without titles, moving between frames can become challenging and perplexing very quickly. Screen readers will instead provide information such as “frame,” “javascript,” the filename, or the URL if there is no title specified. This information won’t usually be particularly useful.
What this Accessibility Rule Checks
Make sure that the title attribute on every iframe
and frame
element is distinct and not empty.