Clearly identifying the sections of a publication eases the ability of users to follow and understand the content.
- Use the
sectionelement for primary sections of content. [WCAG 1.3.1]
- Include a heading for each section [WCAG 1.3.1]
- Do not use heading elements for subtitles. [WCAG 1.3.1]
- Use the
asideelement for seondary material, such as sidebars. [WCAG 1.3.1]
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).
role attribute should be attached to each
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.
role is not specified, a generic section/subsection nature is assumed based on the nesting
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.
Frequently Asked Questions
- Should I use the
sectionelement for secondary content?
No, self-contained secondary content — such as sidebars, mini-articles, etc. — should be identified using the
articleelements, as appropriate.
- 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
h2heading. 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
h2heading 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.