Accessibility Guide
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
withmap
used in aimage
element). -
True for native links having
href
attribute values and a name that can be found (that also has emoji, nonBmp and punctuation characters).
To express their purpose and meaning to screen reader users, all images must include alternate text.
Even if the image just contains text, screen readers have no way of translating it into words that are read to the user. As a result, photos must have concise, descriptive alt
text so that screen reader users grasp the image’s contents and purpose.
If you can’t see, all visual information, such as photographs, is meaningless unless a digital text equivalent is provided so that screen readers may translate that text into either sound or braille. People with limited eyesight or colorblindness experience the same phenomenon to varied degrees.
Screen readers cannot translate an image into speech or braille to make it available by sound or touch if you do not provide a suitable alternative that works for their available sensory modalities, such as making an image accessible by providing a digital text description.
What this Accessibility Rule Checks
Ensures that all <image>
elements have alternative text and either role="presentation"
or role="none"
(ARIA 1.1).
When button and link text in an alt
property value repeats, screen reader users hear the same information twice, rendering the alt text worthless and confusing.
It is redundant and potentially misleading to have alternate text for a link or image repeated in text adjacent to the link or image because a screen reader would read it twice.
Because image buttons employ alt
attributes for labels, the labels should not repeat the text next to the button. Screen readers announce the text to the user twice when there is duplicate alternative text for an image or link in the text adjacent to that image or link.
What this Accessibility Rule Checks
Make certain that the button and link text are not repeated as picture alternatives.
Ensures that input buttons have legible text.
Without an accessible name, screen reader users cannot determine the purpose of a input type="button"
.
Without a discernible and accessible name, screen reader users cannot grasp the purpose of an image. A title for a photograph may just convey advisory information about the image. When used as a control, unnamed actionable visual images such as buttons have no clear definition of the destination, purpose, function, or action for the non-text material.
What this Accessibility Rule Checks
The text on input buttons must be readable.
Makes certain that <input type="image">
elements have alternate text.
Screen reader users will not understand the function of a <input type="image">
button unless equivalent wording is provided. Even if the image merely contains text, alternate text is required because a screen reader cannot interpret images of words into output.
Simply typing text adjacent to the form element will not result in a true label. Screen readers, for example, require labels in code that can be determined automatically.
Some screen readers are configured to estimate the label based on the surrounding text, however this method is not foolproof and might cause confusion if the screen reader guesses incorrectly.
What this Accessibility Rule Checks
Ensures that each <input type="image">
has a name that can be found.
The visible label of interactive items labeled through their content must be included in their accessible name.
This rule applies to any element with the following attributes:
- a semantic role that is a widget that supports name from content,
- visible text, and
-
an
aria-label
oraria-labelledby
attribute.
button
, checkbox
, gridcell
, link
, menuitem
, menuitemcheckbox
, menuitemradio
, option
, radio
, searchbox
, switch
, tab
, and treeitem
are widget roles that support name from content.
The whole visible text content of the target element either matches its accessible name or is contained within it.
Leading and trailing whitespace and case sensitivity differences should be disregarded.
Users using speech input can interact with a web page by saying the visible text labels of menus, links, and buttons.
Voice input users are confused when they utter a visible text label, but the speech command does not work since the accessible (programmatic) name of the component does not match the visible label. When a user interface component contains a visible text label — whether the label is actual text or a picture of text — that text must also appear in the component’s accessible (programmatic) name. When the visual label and accessible (programmatic) name for interactive components are synchronized, users using speech input can engage with those components successfully.
What this Accessibility Rule Checks
For any user interface element with a visible text label, the accessible name must match (or include) the label’s visible text.
Using the title
or aria-describedby
properties, form <input>
elements may be given titles (but not both).
The purpose of these qualities is to convey more information, such as a tip.
These properties are used to convey additional information, such as a hint. Hints are exposed differently to accessibility APIs than labels, which can cause issues with assistive technologies.
When form inputs such as text entry fields, radio buttons, check boxes, and select menus do not have labels other than the title
and aria-describedby
attribute values, screen readers perceive the material as advisory only. The labels provided by the title
and aria-describedby
attributes are insufficient to create a real label that can be inferred programmatically from the input form element’s code.
What this Accessibility Rule Checks
Ensures that every <input>
that requires a label has a label other than title
or aria-describedby
.
Each form element must have a label
element attached with it programmatically.
Forms must have effective form labels in order to be accessible. Form elements like as checkboxes, radio buttons, input fields, etc. are frequently self-explanatory to sighted users, even if they are not programmatically labeled. Users with screen readers require descriptive form labels to identify form fields. Adding labels to all form elements removes uncertainty and makes the product more accessible.
When form elements lack labels, screen reader users are unaware of the expected data input. Screen readers cannot determine information about input items programmatically in the absence of an established label association (or redundant text functioning as a label).
Since clicking the label activates the control, people with weak motor control do not benefit from a bigger clickable area for the control.
What this Accessibility Rule Checks
Ensures that each form element has a label associated with it programmatically.
Banner landmark cannot be nested within another landmark.
If the banner landmark is not the top-level landmark (and is located within another landmark), it does not effectively designate the pre-defined header area of the layout, preventing screen reader users from navigating the layout with ease.
Landmarks are utilized to denote areas of the overall page layout and design. Utilizing headings to identify parts within the article.
What this Accessibility Rule Checks
This rule identifies (banner / contentinfo) landmarks and walks up the document’s structure to ensure that no more landmark roles are met before reaching the body.
Ensures the complementary landmark or aside is at top level.
Complementary content is content that supports the primary idea of a page or document. Users of screen readers have the option to bypass supplemental content that shows at the accessibility API’s top level. Embedding an <aside>
element within another landmark may prevent the ability for screen reader users to browse through supplemental content.
What this Accessibility Rule Checks
Do not insert <aside>
elements or elements containing role="complementary"
inside landmark-marked content.