Code Quiz

Custom Button Keyboard Accessibility Bug

Spot why this ARIA-labeled custom button fails keyboard users.

Codejavascript

function createMenuButton(onOpen) {
  const el = document.createElement('div');
  el.setAttribute('role', 'button');
  el.setAttribute('aria-label', 'Open menu');
  el.textContent = '\u2630';

  el.addEventListener('click', () => {
    onOpen();
  });

  return el;
}

document.body.appendChild(createMenuButton(showMenu));

This custom button works with a mouse but is inaccessible to keyboard users. What is the bug?

Next →ARIA Roles vs Semantic HTML