Are subsections of

with different purposes marked and labeled?

Goal

Ensure that our HTML is semantically structured so that it’s understandable for users, assistive technology, and other machine uses. Specifically, if the page is broken into subsections, each of those subsections needs to be semantically marked and titled.

Why this matters

Read Why does it matter if our HTML is semantic?.

How to implement

Within the <main> section of the page you may want to divide the page up into subsections. There are two accessible ways to do so:

1. Preferred: Use a <section> or <article> tag to hold each container, and ensure that each container has a heading (probably an <h2>) describing it at the top.
2. Use a <div> to hold each container. Ensure the container has an aria-role=”region” attribute and an aria-label or aria-labelledby attribute.

How to test

Right-click various sections of the page and ensure that their containers are semantic according to the explanations in How to Implement.