1.3.1 Info and Relationships (Level A)
Table of contents
Structure your website so that content is read by a screen reader in the same way it’s presented visually.
What you need to know
- With semantics we code meaning into our website so that screen readers can convey the information that’s visually presented.
- A good example of this is with headings. When there is a large, bold font before an article, visually it’s inferred that that text is a heading that conveys the subject or topic of the text that follows. However, this visual information is not conveyed to screen reader users unless we use proper HTML5 to code in a heading level. It’s only then that a heading is announced.
- At its core, success criterion 1.3.1 is about making sure that all information that is conveyed visually is conveyed programmatically.
- Headings, lists, tables, form fields, etc. all need to have their meaning conveyed through code.
What you need to do
- Use <h1> to <h6> headings to structure and organize content.
- Use HTML5 semantic markup to structure content.
- Make sure data cells are associated with header cells inside a table.
- Programmatically label form fields.
- Use HTML markup for ordered and unordered lists.
Related Posts
1.1.1 Non-text Content (Level A)
Make sure images and other non-text elements on your website are accessible by including meaningful text alternatives (alt text).
1.3.2 Meaningful Sequence (Level A)
Structure your website so that your content is presented in a logical order.
1.3.3 Sensory Characteristics (Level A)
Write clear instructions that incorporate multiple senses. No instructions should rely solely on the ability to perceive shape, size, visual location, orientation, or sound.