Copy of 'Navigation Menu Button: Inaccessible'

Show Copy

Settings

Title

Description

Web Key

Public

Last updated: April 26, 2024, 9:07 a.m.

HTML Head

HTML Body

<h1>Navigation Menu Button: Inaccessible</h1>
    <div class="menu-button-links">
      <button type="button">
        WAI-ARIA Quick Links
        <svg xmlns="http://www.w3.org/2000/svg"
             class="down"
             width="12"
             height="9"
             viewBox="0 0 12 9">
          <polygon points="1 0, 11 0, 6 8"></polygon>
        </svg>
      </button>
      <ul class="menu">
        <li>
          <a href="https://www.w3.org/">
            W3C Home Page
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/standards/webdesign/accessibility">
            W3C Web Accessibility Initiative
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/TR/wai-aria/">
            ARIA Specification
          </a>
        </li>
        <li>
          <a href="https://w3c.github.io/aria-practices/">
            Authoring Practices
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/TR/html-aria/#el-li">
            HTML Accessibility API Mappings
          </a>
        </li>
        <li>
          <a href="https://w3c.github.io/core-aam/#mapping_role">
            Core ARIA Accessibility API Mappings
          </a>
        </li>
        <li>
          <a href="https://www.w3.org/TR/accname-aam-1.1/">
            Accessible Name and Description
          </a>
        </li>
      </ul>
    </div>

<h2>Accessibiliy Issues</h2>
    <ul>
      <li>Only tab keyboard support
        <ul>
          <li>Menu button pattern requires the links to act like a menu, which included supporting the cursor keys.</li>
          <li>Menu button pattern requires the <kbd>tab</kbd> key to close the menu and move to next focusable item on page.</li>
          <li>If only <kbd>tab</kbd> key is support, the disclosure pattern should be used instead of the menu button pattern.</li>
        </ul>
      </li>
      <li>No description of behaviors to assistive technologies.</li>
      <li>Poor keyboard focus styling.</li>
    </ul>

CSS

JavaScript

class MenuButtonLinks {

constructor(domNode) {

this.domNode       = domNode;
    this.buttonNode    = domNode.querySelector('button');
    this.menuNode      = domNode.querySelector('ul');

this.buttonNode.addEventListener('click', this.onButtonClick.bind(this));
    this.buttonNode.addEventListener('blur', this.onBlur.bind(this));

const links = domNode.querySelectorAll('a');
    for (let i = 0; i < links.length; i += 1) {
      links[i].addEventListener('blur', this.onBlur.bind(this));
    }
    window.addEventListener('mousedown', this.onBackgroundMousedown.bind(this), true);
  }

// Popup menu methods

openPopup() {
    var rect = this.menuNode.getBoundingClientRect();
    this.menuNode.style.display = 'block';
    this.buttonNode.classList.add('open');
  }

closePopup() {
    if (this.isOpen()) {
      this.buttonNode.classList.remove('open');
      this.menuNode.style.display = 'none';
    }
  }

isOpen() {
    return this.buttonNode.classList.contains('open');
  }

onButtonClick(event) {
    if (this.isOpen()) {
      this.closePopup();
    }
    else {
      this.openPopup();
    }

event.stopPropagation();
    event.preventDefault();
  }

onBlur(event) {
    if (!this.domNode.contains(event.relatedTarget)) {
      if (this.isOpen()) {
        this.closePopup();
      }
    }
  }

onBackgroundMousedown(event) {
    if (!this.domNode.contains(event.target)) {
      if (this.isOpen()) {
        this.closePopup();
        this.buttonNode.focus();
      }
    }
  }
}

// Initialize navigation menu buttons

window.addEventListener('load', function () {
  var menuButtons = document.querySelectorAll('.menu-button-links');
  for(var i=0; i < menuButtons.length; i++) {
    var menuButton = new MenuButtonLinks(menuButtons[i]);
  }
});