A11Y HTML

A collection of accessible markup for common UI components.

Dialog

A dialog is an interactive overlay component, such as a dismissible alert or confirmation window, that separates content from the rest of the page.

role

This attribute role="dialog" tells the browser and assistive technology that this element is a dialog, and its content should be separated from the page's content.

aria-modal

Indicates whether this dialog is modal or not.

Setting aria-modal="true" tells assistive technology that nagivation is limited to the dialog, and everything else is hidden.

Note: This attribute does not provide the required focus and keyboard behavior to the dialog.

aria-labelledby

The attribute aria-labelledby provides contextual information for the controls inside the dialog.

All dialogs must be properly labelled.

aria-describedby

The attribute aria-describedby provides additional context if available.

<button type="button">Open dialog</button>
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-label"
  aria-describedby="dialog-desc"
>
  <h2 id="dialog-label">Dialog Title</h2>
  <p id="dialog-desc">Dialog Description</p>
</div>

A menu is an interactive component that groups together a list of actions or choices that a user can invoke.

The attribute role="menu" tells assistive technology that this element is a menu.

The attribute role="menuitem" tells assistive technology that this element is an option in a set of actions contained by a menu.

The attribute aria-labelledby refers to the element that contains the accessible name for the menu.

The attribute aria-haspopup indicates the menu button triggers an interactive popup element.

Setting the attribute, aria-expanded, to "true" informs assistive technology that the element the menu button controls is visible.

Note: aria-controls is required to inform assistive technology which element or elements are visible.

The attribute aria-controls identifies the element that is controlled or made visible by the menu button, through a reference to the element's id.

tabindex informs browsers on how to handle keyboard focus. The menuitems in the menu should be keyboard navigable with arrow keys, but not tab.

<button 
  id="menu-trigger"
  aria-haspopup="true"
  aria-expanded="true"
  aria-controls="menu-container"
>
  Menu Button
</button>
<div
  role="menu"
  aria-labelledby="menu-trigger"
  id="menu-container"
>
  <button role="menuitem" tabindex="-1">
    Action
  </button>
  <button role="menuitem" tabindex="-1">
    Action
  </button>
</div>

Popover

A popover is an non-modal overlay element that displays additional content.

aria-expanded

Setting the attribute, aria-expanded, to "true" informs assistive technology that the element the button controls is visible.

Note: aria-controls is required to inform assistive technology which element or elements are visible.

aria-controls

The attribute aria-controls identifies the element that is controlled or made visible by the button, through a reference to the element's id.

aria-hidden

To prevent keyboard interaction with the popover when it is closed, either use aria-hidden set to "true", or do not render the popover.

Focusable

The popover must have a focusable element, and focus should be moved to the either first focusable element within the popover or the container when it is opened.

<button
  type="button"
  aria-expanded="true"
  aria-controls="popover-container"
>
  Trigger
</button>
<div
  id="popover-container"
  aria-hidden="false"
>
  <p>Popover content</p>
  <button type="button">Close</button>
</div>

Switch (Toggle)

A type of checkbox that represents on and off values, as opposed to checked and unchecked values. Functionally similar to a checkbox, but only supports an on and off state.

role

The attribute role="switch" tells assistive technology that this element is a switch.

aria-checked

The aria attribute aria-checked is required for any elements with a switch role. Values must be either "true" or "false".

<button
  type="button"
  role="switch"
  aria-checked="true"
>
  Toggle
</button>

Toggle Button

A toggle button that represents on or off values. Functionally similar to switch, but supports mixed values and should be used when the element visually looks like a button.

aria-pressed

Indicates the current "pressed" state of a button. Can be either "true", "false", "mixed" or undefined.

<button
  type="button"
  aria-pressed="true"
>
  Toggle
</button>

Tooltip

A tooltip is a small overlay element that provides auxiliary content for another focusable or interactive element, such as a field, link or button. Tooltips are triggerd by both focus and hover events.

role

The attribute role="tooltip" tells assistive technology that this element is a tooltip.

aria-describedby

The attribute aria-describedby on the triggering element ties the element to the tooltip.

aria-hidden

To prevent interaction with tooltip content when it is closed, either use aria-hidden set to "true", or do not render the tooltip.

<a aria-describedby="tooltip">
  Link
</a>
<span
  role="tooltip"
  id="tooltip"
  aria-hidden="true"
>
  Tooltip Content
</span>