Section

Referred HTML Tags

<section>

Essential A11y Requirements

Context

The <section> element is a generic sectioning element. It should contain standalone pieces of content or data within other top-level landmark elements like <main> or <aside>. However, it can also section content on the document's top-level if there isn't a more specific semantic element to represent it. Let's take, for example, the <main> element in a store website's home page with a few different subsections of content within it. It may have a sub-section for products on sale, one that presents new products, and another for signing up for a newsletter. By wrapping these regions with a <section> element, you allow the user to directly navigate to them while understanding their context and the kind of content within them. However, using the <section> element on its own will not do the job. To take advantage of the semantics of the <section> tag, it must also have an accessible name.

Accessible name

Unlike other landmark elements whose semantics imply their content, location, and role in the UI layout, <section> elements don't have an explicit semantic meaning (similar to <div> elements). However, when they have an accessible name, they can significantly improve the UX of screen reader users. When <section> elements have an accessible name, screen readers add them to their "landmark elements" lists, and allow users to navigate directly to them. The accessible name itself is leveraging the semantic potential to frame for the user the section's context. <section> elements can get their accessible names from one of the WAI-ARIA's labeling attributes, e.g., aria-label, aria-labelledby. Since the <section> elements represent standalone pieces of content, they are often labeled by heading elements.

1<section aria-label="Now on sale">
2    <!-- section's content -->
3</section>
4
5<section aria-labelledby="newsletter-heading">
6    <h2 id="newsletter-heading">Sign up for our newsletter</h2>
7    <!-- section's content -->
8</section>

learn more about accessible names here

Equivalent WAI-ARIA Role

role=”region”