Summary

Clearly identifying the sections of a publication eases the ability of users to follow and understand the content.

Techniques

Examples

Example 1 — Identifying a chapter

The role doc-chapter is applied to the section element to identify that it contains a chapter. Using the role and identifying the heading in the aria-labelledby attribute creates a landmark in assistive technologies.

<section role="doc-chapter" aria-labelledby="hd01">
   <h1 id="hd01">Chapter 1. Loomings.</h1>
   <p>Call me Ishmael. … </p>
   …
</section>
Example 2 — Untitled section

The aria-label attribute is used to identify a section that is only distinguished by color in the text.

<section aria-label="Self-examination tests">
   …
</section>
Example 3 — Identifying a subtitle
<section role="doc-chapter" aria-labelledby="hd02">
   <hgroup>
      <h1 id="hd02">1. Europe 1930-1935</h1>
      <p role="doc-subtitle">The Foreshadows of War</p>
   </hgroup>
   …
</section>
Example 4 — Adding a sub-section that is not a landmark

As the section element does not have a role attribute and does not identify an accessible name using an aria-labelledby attribute, it does not create a landmark for assistive technologies.

<section>
   <h4>2.4.1 Electrical Impedance</h3>
   …
</section>

Frequently Asked Questions

Should every section be a landmark?

No, landmarks are not intended to serve as an alternative table of contents. As landmarks are presented to users as a flat list, the structure of a publication is lost, making them an ineffective means of navigating a publication.

It is generally recommended to only identify the major sections of a work (e.g., its chapters) as well as an key front matter and reference sections a user might want quick access to. Too many landmarks reduces their usefulness for users.

To avoid having a section become a landmark, do not add a role or an accessible name to it (i.e., do not use the role, aria-labelledby, aria-label and title attributes on the section element).

Should I use the section element for secondary content?

No, self-contained secondary content — such as sidebars, mini-articles, etc. — should be identified using the aside and article elements, as appropriate. Refer to the asides and articles pages for more information.

How do I handle parts?

Publications are typically broken up into smaller content files to improve rendering speed, so it is often the case that an entire part cannot be contained in a single file. The question becomes, how do you split the chapters into separate files and still retain the part?

There are two approaches you can take to flattening out your content, and neither is optimal — at least in terms of retaining the original structural hierarchy in the markup. The first is to include the part heading with the first chapter:

<body>
   <section role="doc-part" aria-labelledby="hd01">
	  <h1 id="hd01">Part I</h1>
	  <section role="doc-chapter" aria-labelledby="hd02">
		 <h2 id="hd02">Chapter I</h2>
	  </section>
   </section>
</body>

Each subsequent chapter file would contain a single section with an h2 heading. Although this markup approach appears to suggest that the part only contains a single chapter, consistent heading numbering will allow an assistive technology to correctly orient the user.

The other approach is to separate the part heading into its own file:

<body>
   <section role="doc-part" aria-labelledby="hd01">
	  <h1 id="hd01">Part I</h1>
   </section>
</body>

Again, each subsequent chapter file would include an h2 heading to indicate it is subordinate to the part. One advantage of this approach is that user agents will render the part heading separately from the first chapter content.

Explanation

The section element is used to encapsulate sections of primary content and establish the publication's structural hierarchy. Clearly grouping and identifying content enables better navigation by anyone reading using an assistive technology (see also the faq).

The role attribute can be attached to a section to indicate the specific nature of the content, when applicable. See the Digital Publishing WAI-ARIA module for a list of values that can be used with the attribute.

When the role is not specified, a generic section/subsection nature is assumed based on the nesting level.

A section must not have more than one child heading. Do not add subtitles using heading tags, as these will appear as subsections to users of assistive technologies

If a section does not have a heading, consider including an aria-label attribute on the section to identify its purpose.

Related Links