Info and Relationships
Success Criterion 1.3.1 Level A
Is the information, structure, and relationships of the content on your site or application maintained when being accessed with assistive technology?
Why is this Important?
Individuals with visual, auditory, or other disabilities may not be able to perceive the typical cues used to understand information, structure, and relationships when using assistive technology to access digital content. Visual or auditory cues such as headings, bold font, bulleted and numbered lists, background colors, grouped form fields, sound indicators, etc. need to be programmatically determined, or available in text alternatives so that information important for comprehension will be perceived by all.
Whom does it benefit?
As a person who is blind, navigating a page can sometimes
I want to hear what the main landmarks are (e.g.,banner, navigation, main content, complementary sidebar)
so that I can quickly orient myself to the page.
As a person who is color blind, I cannot always
distinguish between colors to denote required fields,
I want another visual indicator that a text field requires input
so that I can complete forms without error.
What should you do?
- Use native HTML (whenever possible), to design content that can be presented visually, audibly and tactilely via assistive technology (e.g. refreshable braille device) without losing meaning, information or structure.
- Use WAI-ARIA, only as needed, to programmatically determine elements that use non-conventional coding.
- Never use visual or sound indicators as the sole indicator of structure, information or meaning.
How do you do it?
Use proper and complete native HTML code to define structure and
relationships. Some examples include:
Using semantic elements to mark up structure
Using h1-h6 to identify headings
Using ol, ul and dl for lists or groups of links
Using label elements to associate text labels with
Using table markup to present tabular information
- Using semantic elements to mark up structure
Using ARIA landmarks to identify regions of a page
Using role=heading to identify headings
Using aria-labelledby to provide a name for user interface controls
Using grouping roles to identify related form controls
- Using ARIA landmarks to identify regions of a page
- Some technologies do not provide a means to programmatically determine some types of information and relationships. In that case then there should be a text description of the information and relationships. For instance, "all required fields are marked with an asterisk (*)".
Need technical guidance?
WCAG Success Criterion 1.3.1
Additional resources to help you:
Accessible Rich Internet Applications (WAI-ARIA) 1.1
Use headings to convey meaning and structure - W3C Tips.