I hope this can be rectified in the template rather than having to mod the content of all WAI pages that have this problem because there are many. On many pages, there are complementary landmarks inside of main. Main should not contain complementary elements. By definition of something complements main, it is not part of main. While that is the technical reason to fix the issue, the practical reason is that having too many landmark regions reduces, or in extreme cases eliminates, the value of the landmark regions.
The complementary regions are a side effect of using the aside element. I think there was a decision at some point to have browsers avoid mapping aside elements inside of main as landmark regions, so there may also be a browser bug at play here as well.
Nonetheless, in my reading of the aside specification, it seems like the content inside the aside elements is not conforming to the spec. The spec says the aside content is to be tangential to the main content. The content I perceive to be included in the aside elements is the core content of main. One exception might be the page summary, which is something like a pull quote. In that case, aside could potentially fit. However, it would be helpful to screen reader users if the aside then had role="none" to ensure it is not mapped as a landmark region.
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
Note It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.
Here is an example from [Planning Audio and Video Media](https://www.w3.org/WAI/media/av/planning/()
where the aside should be changed to asection or div. Note that if section is used, it is essential that it not have an accessible name (aria-label) or it will be mapped as a landmark region.
<aside class="box box-highlighted" id="checklist-ap"><header class="box-h box-h-highlighted">
<img src="/WAI/content-images/wai-media-guide/recorded.svg" alt="" style="height:1em"> Pre-Recorded Audio-only
</header><div class="box-i">
<ul class="alt">
<li><strong><a href="/WAI/media/av/transcripts/">Transcript</a> (A)</strong> separate from the audio</li>
<li><strong><a href="/WAI/media/av/captions/">Captions</a></strong> synchronized with the audio</li>
<li><strong><a href="/WAI/media/av/sign-languages/">Sign language(s)</a></strong></li>
</ul>
</div></aside>
shawna-slh
commented
2 years ago
I hope this can be rectified in the template rather than having to mod the content of all WAI pages that have this problem because there are many. On many pages, there are complementary landmarks inside of main. Main should not contain complementary elements. By definition of something complements main, it is not part of main. While that is the technical reason to fix the issue, the practical reason is that having too many landmark regions reduces, or in extreme cases eliminates, the value of the landmark regions.
The complementary regions are a side effect of using the aside element. I think there was a decision at some point to have browsers avoid mapping aside elements inside of main as landmark regions, so there may also be a browser bug at play here as well.
Nonetheless, in my reading of the aside specification, it seems like the content inside the aside elements is not conforming to the spec. The spec says the aside content is to be tangential to the main content. The content I perceive to be included in the aside elements is the core content of main. One exception might be the page summary, which is something like a pull quote. In that case, aside could potentially fit. However, it would be helpful to screen reader users if the aside then had
role="none"to ensure it is not mapped as a landmark region.The spec for aside:
Here is an example from [Planning Audio and Video Media](https://www.w3.org/WAI/media/av/planning/() where the aside should be changed to asection or div. Note that if section is used, it is essential that it not have an accessible name (aria-label) or it will be mapped as a landmark region.