Shape
Semantic Structure
Marking headings, lists and regions in the code, so assistive tools can read the structure.
What is Semantic Structure?
Marking headings, lists and regions in the code, so assistive tools can read the structure.
What you learn
Headings and lists must exist in the code, not just look right.
When it helps
screen reader users can’t find sections, or a visual heading isn’t marked as one.
Use it at work
- Mark each heading as a real heading, in order.
- Mark lists as lists and tables as tables.
- Mark the page’s main regions.
- Check the outline with a screen reader or a checker.
Your output
Open your page’s heading outline, or turn off its styles. Check that every visual heading and list appears in the structure.
Watch for
Styling text to look like a heading without marking it as one.
Related practices
Sources
Enable JavaScript to try the interactive activity.