Disclosure button design pattern: <button> element

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


Makes me happy!


Using the <button> element means the browser handles keyboard interaction automatically. The button can be focused on with the keyboard, and it can be activated using either the space or enter keys.

The aria-expanded attribute is used to indicate the state of the disclosure widget. It is applied to the <button> so that assistive technologies can determine the state of the widget whether it is expanded or collapsed. The aria-expanded attribute is set to false (collapsed) initially, then scripted to toggle between true and false whenever the button is activated.

The aria-controls attribute is used to create a relationship between the <button> and the <div> that contains the content. It takes the idref of the <div> as its value. This enables assistive technologies to provide specific commands for moving focus from the <button> to the <div>.

The hidden attribute indicates the state of the <div> containing the content. It is used to hide the content both visually and from assistive technologies. The hidden attribute is added initially, then scripted to be added or removed whenever the button is activated.

The visible style of the <button> when pressed is hooked to the aria-expanded attribute. Similarly the visibility of the <div> is hooked to the hidden attribute.