Learn how to build buttons that work for everyone: use the real button element, set the type, name icon buttons, make toggle and disclosure buttons with aria-pressed and aria-expanded, handle disabled and loading states, and avoid fake buttons made from div and span. Includes a toggle lab, a disabled-button lab, and a live button checker.
Learn how to move keyboard focus on purpose: how focus() and document.activeElement work, when to move focus (dialogs, deleted items, form errors, page changes), how to return focus, and how to avoid stealing it. Includes three live labs: a delete-and-lose-focus lab, a dialog focus lab, and a form error summary lab.
Learn how to make every part of a web page work with a keyboard: which elements are focusable, how tabindex and focus order work, how to style focus with :focus-visible, how to avoid keyboard traps, and how arrow keys and roving tabindex work in custom widgets. Includes a live focus-order lab, a focus-style test, and a roving toolbar.