Structure your website so that content is read by a screen reader in the same way it is presented visually to sighted users.
What 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
Resources:
- How to use headings correctly
- How HTML5 semantics work
- How to make tables accessible
- How to label forms for beginners
- How to create lists correctly
- Introduction to ARIA (YouTube – 9 min 5 seconds)
Plain English Explanation:
If you’re not a web developer, you probably don’t understand what 1.3.1 is asking for.
Semantics, in this context, means you are giving things on your website meaning through code.
Here’s a good illustration:
Let’s say we want to make a subtopic to organize and break up content within an article. We go between two paragraphs and write a subtopic and then increase the font to size 28 and bold it like this:
Subtopic Goes Here
A sighted user will be able to instantly perceive that this is a subtopic heading from the visual cues of increased font size and the bold.
A nonsighted user will have this text read by a screen reader without any of the visual cues; it will simply read as regular text.
With semantics, we code meaning into our website so that screen readers can convey what is visually presented.
In the example above, rather than simply making the font bigger and bolder, we’d probably want to wrap an <h2> or <h3> tag around the text to indicate a header and the beginning of a new section. We can visually make it have the same appearance with CSS coding while retaining the semantic property.
That’s really at the heart of what this success criterion is getting to; we want to add meaning to the different elements and components on our website so that meaning can be conveyed to screen reader users who are listening to a website rather than seeing it.
We add this meaning through coding.
This is why it’s crucial to use HTML5 whenever possible with our website. Sometimes HTML5 may not have an option available so we’ll need to draw from what is called WAI-ARIA or, more commonly, ARIA.
ARIA standards for Accessible Rich Internet Applications and ARIA labels can add meaning for more dynamic, custom, or advanced applications where HTML5 is insufficient.
For our websites to meet this success criteria – which is an extremely important one – we need to markup and structure the contents and elements on our website properly.
This is certainly not beginner level stuff but, if you’ve ever looked at HTML code before, you will be able to quickly pick up on using correct HTML for headings and lists. Even the landmark elements from HTML5 aren’t too bad.
Where you’ll likely need the most help is with labeling large tables and interactive elements such as forms. I have provided numerous resources above to help you gain a better understanding.
