ARIA Labels Done Wrong: Common Accessibility Mistakes in Production

Working Examples

Correct implementation of an icon-only button using aria-label to provide context.

<button aria-label="Close dialog" class="close-button">
  <i class="icon-x"></i>
</button>

Required manual keyboard handling for non-semantic elements using role=‘button’.

const fakeButton = document.querySelector('[role="button"]');
fakeButton.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    fakeButton.click();
  }
});

A live region implementation for announcing dynamic content updates without interrupting the user.

<div id="notifications" aria-live="polite" aria-atomic="true">
  <!-- Initially empty -->
</div>

Practical Applications

• Icon-only buttons: Implement aria-label on SVG or icon-font buttons to ensure screen readers announce purpose. Pitfall: Leaving these buttons unlabeled results in the reader only announcing ‘button’.
• Custom interactive elements: If using role=‘button’, you must manually add tabindex=‘0’ and keyboard listeners. Pitfall: Forgetting these additions makes the element inaccessible to keyboard-only users.
• Dynamic notifications: Use role=‘alert’ for urgent errors and aria-live=‘polite’ for status changes. Pitfall: Updating DOM content without live regions results in silent changes for assistive technology users.

References: