Marking secondary content with the
aside element enables assistive technologies
to distinguish it from the primary narrative, allowing users to skip over the material.
The default nature of the
aside element is changing.
without an accessible name that are within a
section element will no longer
be considered complementary landmarks. They will instead be considered generic elements
(i.e., the same as
This page will be updated once this change gets real-world implementation. For now, the guidance on this page remains current best practice.
asideelement for secondary material, such as sidebars. [[WCAG-1.3.1]]
Include a heading for each aside [[WCAG-1.3.1]]
Frequently Asked Questions
- Why don't sidebars need a role?
asideelement, per the HTML specification definition, defines sidebars:
asideelement represents a section of a page that consists of content that is tangentially related to the content … [s]uch sections are often represented as sidebars in printed typography.
Adding an additional role will not improve the accessibility.
- What heading level should I use with asides?
Although the positioning of supplementary content in the markup is not fixed in the same way as the primary narrative (i.e., where best to place the content is often a matter of choice), supplementary content always belongs to a section. For that reason, it should be treated as a subsection of the
sectionthat contains it. Consequently, the first heading level within an
asideshould always be one level lower than its containing section.
For example, if a chapter has a heading in an
h2tag, the headings of any sidebars within it should begin with
h3. This helps ensure that users of assistive technologies can logically find these subsections of content when navigating by heading level. A user will not expect a sidebar to have an
h1heading in such a scenario, as that would make it a higher-level content section.
If a publisher cannot maintain heading numbering consistency, they should try to find another method that users can predict. For example, using
h6for all sidebars. In this case, though, the publisher should instruct users on this convention; for example, in a section on how to use the ebook.
While numbering gaps and inconsistent numbering of headings is technically not a failure of WCAG requirements, it also doesn't make for a great reading experience for users who need to move around by heading.
- Do sidebars require accessible names?
It depends on how many there are in a document.
If a document only has one
asideelement without a role, then an accessible name is not required.
If there is more than one, however, then without an accessible name to differentiate them, users cannot determine which is which without navigating to each in turn.
(Note that this is the same rule for adding accessible names that applies to any landmark role.)
- Should I use
asideelement is best used when the content is explains or expands on the primary narrative. It is most appropriate for sidebars, glossaries, and similar explanatory content.
articleelement is best used when the content is independent from the other content of the document or publication. In a scientific journal, for example, each article is independent of the others, even if they have a common theme.
- Why don't all roles require an accessible name?
When used on an
aside, roles such as
doc-pullquotechange the nature of the element from its default of a complementary landmark. Since the
asideis no longer recognized as a complementary landmark when these roles are applied, it does not require an accessible name.
When using roles, refer to their definitions to determine whether they require accessible names.
aside element was introduced in HTML5 to allow authors to identify secondary
content such as sidebars. When users of assistive technologies encounter an
the content is typically introduced as "complementary", allowing them to recognize that it is
not part of the primary narrative.
Prior to the introduction of this element, background coloring and borders were often the only way that secondary content was distinguished from the primary narrative. These methods are opaque to assistive technologies, however, so it was often confusing why the narrative would suddenly change when a sidebar did not have a heading, and was not always clear if a new section of primary content were beginning if it did have a heading.
aside element not only offers users the ability to skip the content when
reading, but being complementary landmarks they are also able to easily find and return to the
content after finishing the section. Each sidebar requires an accessible name for this feature
to be most effective, otherwise users will not be able to distinguish one sidebar from the