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.

References

Read the full explanation of success criterion 1.3.1 on W3.org.

Related Resource

Check out “Are You Using Semantic Elements and Roles?” from GSA’s Technology Transformation Services for more information about this success criterion.