Toggle button design pattern: <button> element

This toggle button is created using the <button> element, with scripting to provide the expected behaviour. Additional semantic information is provided using ARIA.

Example

Notes

Keyboard focus and interaction is handled automatically by the browser, and the button can be activated using either the enter or space key.

The aria-pressed attribute is used to indicate the state of the button. It is set to false initially, then scripted to toggle between true/false whenever the button is activated.

The visual appearance of the button when pressed (or not) is hooked onto the aria-pressed attribute using an intelligent CSS selector, instead of a class name. Although this does not affect accessibility, it creates a cleaner separation between structure and design.