1.3.1 Info and Relationships
Official description of the success criterion
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
What to do?
Ensure that information and relationships conveyed through presentation can be programmatically determined or are available in text.
Why is it important?
Helps assistive technologies interpret and present content in a meaningful way.
Common pitfalls
Common issues are with incorrect use of HTML semantic elements. For example, using a <div> instead of <button>, <a> or heading tags.
Problems with ARIA use can also belong under this criterion.
How to test for it?
Check the content for the use of headings:
- Missing H1 headings.
- Incorrect heading levels if they are genuinely problematic (otherwise incorrect heading levels are part of accessibility best practices and do not cause an error in this criterion).
- Use of heading tags in content that should not be headings.
Check the menus to see if the aria-current attribute is used in addition to the visual active path indicator. If not, it is an error. If the visual indicator is not used to indicate an active menu element, then ARIA is not needed either.
Automated tools are quite good at finding flaws in this criterion.
Related criteria: 4.1.2.
How to take this criterion into account in design?
Ensure that you design a logical heading structure for all pages. If the content editor needs to add specific elements to ensure the correct heading levels, they need to be told to do that.
Remember that a heading is not a visual highlighting method. If the text shouldn't be a heading (if it doesn't have any content below it), don't make it a heading. If some text needs visual highlighting, that can be done with CSS styles.
Remember also that the layout acts as an implementation guide for the developer. Always ensure you use the correct markings for elements.
How to take this criterion into account in development?
If you create a menu with a visually visible active path indicator, add aria-current attribute as well.
Ensure you create a logical menu structure in the code. And allow the content editor to mark up correct heading levels for the page content.
If the design requires specific elements for logical heading structure, add instructions for the content editor so that they know to add the elements on the pages.
If you get a design with an illogical heading level or headings used in the wrong places, don't implement those but instead, flag the issues to the designer.