• 
      

    Improve accessibility for the page base components.

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

    Information

    Review Board
    release-4.0.x

    Reviewers

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

    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
    browsers.

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

    Also inspected using Firefox's Accessibility tree.

    Commits

    Files