Accessibility: Masthead

[mcorkum]

Need aria controls on the following items:

Nav

• nav items that have child menus (also relates to menu popup components)

Overlays

When clicked, the overlays would need aria-haspopup="true" and aria-labelledby="ElementID"

• search button
• login button
• hamburger button

[mcorkum]

Example Markup for the navigation structure

The principle here applies to both the side nav (#78), the main nav, and the menu-pop-up.

<ul id="menubar" role="menubar" aria-label="Main Navigation">
    <li role="none">
      <a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#" tabindex="0">Parent Item</a>
      <ul role="menu" aria-label="Parent Item" tabindex="-1" style="display: none;">
        <li tabindex="-1">Sub Menu Item</li>
        <li tabindex="-1">Sub Menu Item</li>
        <li tabindex="-1">Sub Menu Item</li>
        <li role="menuitemradio" aria-checked="false" tabindex="-1">
             <a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#" tabindex="0">Sub Menu With Children</a>
             <ul role="menu" aria-label="Sub Menu With Children" tabindex="-1" style="display: none; z-index: 0;">
                <li>Sub Menu Item</li>
            </ul>
        </li>
      </ul>
    </li>
</ul>

On click, the aria-expanded="false" needs to switch to true.

[mcorkum]

For dialog accessibility, the control element (the thing that opens it) needs nothing.

The dialog itself needs <div class="dialog" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-description">

However, there needs to be additional Javascript to set focus, and CSS rules as well. All info with examples is in this short article: https://bitsofco.de/accessible-modal-dialog/