Improve accessibility for the page base components.

Review Request #10938 — Created March 4, 2020 and submitted

Review Board

This updates the base template and page-level UI components (top header
bar, search, navigation, and sidebar) to better meet accessibility

We're now using more specific tags for many of thes elements:

  • The top bar now uses <header>
  • The navigation areas in the top bar use <nav>
  • The page sidebar uses a standard <div>, but is split into a
    <header>, <div>, and <footer> for use with the mobile menu
  • Individual sidebars should now use <nav> or <section>, depending
    on what's appropriate for that sidebar
  • The main content area uses <main>

Some ARIA roles and labels have been added to parts of these components
in order to provide context to screen readers.

This is not comprehensive, but does improve what we've had quite a bit.
The page now has distinct landmark areas, which can be more easily
accessed when using assistive technologies.

Checked that the page continues to render correctly in all major

Inspected the landmark areas using a browser extension, verifying the
landmark trees and labels.

Also inspected using Firefox's Accessibility tree.

Improve accessibility for the page base components.
Description From Last Updated

I know some people are interpreting <aside> occurring on its own (i.e. outside of <article>) as suitable for something like ...

  2. I know some people are interpreting <aside> occurring on its own (i.e. outside of <article>) as suitable for something like a page sidebar but it's not explicit in the standard and I think it's highly confusing. I think we should keep this as <div>.

    1. That used to be the case, but that's changed. Both the W3C and WHATWG specs now explicitly document and provide examples of <aside> being used to page sidebar purposes.

      Did a lot of research when trying to figure out whether there was an appropriate component. Most information on <aside> is now considered legacy, in light of that change.


      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.

      Example #3: "The following extract shows how aside can be used for blogrolls and other side content on a blog:"

      From what I read, <aside> used to be named <sidebar>, and was going to be used for both page sidebars and for call-out content that's tangentially related to the content around it, and they decided to prioritize the latter. There was enough usage of the former and enough use cases presented that they decided to once again have it be used for both, with the rationale being "it's related to the page as a whole" rather than "to the specific content it's next to."

      This post from html5doctor briefly goes into it. There are similar articles about not using <aside> that have also since been updated.

  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (8fbd56c)