WCAG Principle: Perceivable
Guideline 1.3 : Adaptable (Create content that can be presented in different ways without losing information or structure)
Conformance Level: A (Minimal Requirement)
What is Success Criterion 1.3.1?
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text
This success criterion aims to ensure that web content is structured in a way that all users can easily understand and navigate. This includes using headings, labels, lists and other markup formats to create a logical page structure and clear relationships between different pieces of content.
Additionally, it aims to communicate the relationships between elements on a page beyond just visual cues. In essence, they should be designed in a way that allows assistive technologies such as a website screen reader, screen magnifier and speech recognition software perceive them.
For example, it is more accessible to organize an article into sections using heading tags rather than merely increasing the text size. Not all users can visually perceive font size differences and using heading tags makes the article easier to read and understand, especially for assistive technology users.
How does it make your website accessible?
Sighted users perceive structure and relationships of digital content through various visual cues such as headings; emboldened, italicized or underlined text; listed or bulleted points; background color, tables, etc.
In some cases auditory cues are used. For example, a change in pitch or speech speed could emphasize important information. Programmatically determining these structures and relationships or rendering them as text ensures that assistive technology users can understand them too.
- People with different disabilities who need to adapt web content to suit their accessibility needs.
- People who use screen readers to read web content benefit from text alternatives for images that use color to convey information.
- People who have visual and auditory disabilities who use refreshable braille displays.
How to Meet Success Criterion 1.3.1
- CSS is used to display tables without the proper use of HTML markup to help users interact with the data.
- CSS is used to style heading instead of HTML markup.
- The headings are formatted correctly in HTML, but do not reflect the hierarchy of the content (starting with <h1>, then <h2> for each section, <h3> for each sub-section, and so on).
- Form fields do not have labels. Where they do, these are not properly associated with their corresponding fields.
How to fix mistakes:
- Define relationships and structures using native HTML code. For instance, use heading tags (h1 to h6) for identifying headings, ol, ul, and dl for lists and groups of links, and label elements for labeling forms, etc.
- When appropriate, use WAI-ARIA markup to programmatically define cues that may be missed by users with assistive technologies.
- In cases where it is not possible to programmatically determine cues, provide a text description of the information and relationships. An example of this would be “All required fields are marked with an asterisk (*)”.
Helpful tips for developers:
- Use a HTML validator (such as Aborla or Nu HTML5) to check if your web page structure has HTML errors.
- Manually check pages to ensure that visible page elements are correctly nested and labeled to help assistive technology users.
- Use CSS to control the visual presentation of text. This allows users to modify the visual characteristics of the text to meet their requirements through their user agents.
- Position labels for form fields where users intuitively expect them to be.
How to test if you've met compliance:
- Use an automated testing tool such as ARIA or WAVE to check that the website uses proper HTML structure and semantic markups such as headings, lists, and tables to differentiate content.
- Perform manual tests with a screen reader to identify any issues with page structure.
- Ensure that all text nodes within the DOM tree are contained within an HTML sectioning element.
- Ensure that each instance of an HTML sectioning element or ARIA landmark role that is used multiple times on a page has a unique accessible name.
Bad and Good Examples (Developer code)
BAD Code Snippet
<img src="welcome.jpg" alt=""> <p>Use the links below to navigate the site:</p> <ul> <li><a href="#services"><img src="services-icon.png" alt=""></a></li> <li><a href="#about-us"><img src="about-us-icon.png" alt=""></a></li> <li><a href="#contact"><img src="contact-icon.png" alt=""></a></li> </ul>
In this code snippet, the text description of the page is only presented as an image, which can’t be perceived by users who are visually impaired. The navigation links are also presented as images, which can’t be understood by users who are unable to see the images. The
alt attribute is left empty, which means that assistive technologies won’t provide any information about the content of the images to users.
GOOD Code Snippet
<h1 id="page-title">Welcome to our website</h1> <p>Use the following links to navigate the site:</p> <ul> <li><a href="#services">Services</a></li> <li><a href="#about-us">About Us</a></li> <li><a href="#contact">Contact</a></li> </ul>
In this version, the
<h1> tag provides a text description of the page, allowing users who are visually impaired to understand the purpose of the page through assistive technologies. The list of navigation links is also conveyed through text, which can be read by screen readers or braille displays.
Frequently Asked Questions
How would you ensure that a web page is compliant with WCAG Success Criterion 1.3.1 info and relationships?
You can ensure that a web page is compliant with WCAG success criterion 1.3.1 info and relationships by coding the webpage with semantic HTML that clearly identifies the structure and hierarchy of information. You should also use proper heading elements to structure the page and
make all information (not just in visual elements such as images or videos) available in text.
Why are headings important for accessibility?
Headings are important for accessibility because they help users quickly skim through the page and locate the information they are looking for. They are also important for assistive technology users because they help them quickly understand the content on the page.
Why is the heading structure important for accessibility?
The heading structure is important for accessibility because it helps create a hierarchical structure that is easy to navigate for users with disabilities. This structure allows users with visual impairments to quickly scan through a website in its correct order of relevance.
Which is the most important level of heading?
The most important level of heading is the Heading 1 <h1> level.
When do headings fail WCAG?
Headings fail WCAG requirements when they are not properly structured and labeled. They should be properly marked up in a logical sequence using the appropriate HTML heading tags (<h1>, <h2>, <h3>, etc.). They must also accurately reflect the content they introduce. Failing to do this means that the assistive technology will not be able to accurately interpret them.