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 aria-hidden attribute indicates the state of the <div> containing the content. It is used regardless of the method used to toggle the content's visibility. The aria-hidden attribute is set to true (hidden) initially, then scripted to toggle between false and true 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.