ARIA: button role – Accessibility | MDN

ARIA: button role

The button role is for clickable elements that trigger a response when activated by the user. Adding role=”button” tells the screen reader the element is a button, but provides no button functionality. Use <button> or <input> with type=”button” instead.

Description

The button role identifies an element as a button to assistive technology such as screen readers. A button is a widget used to perform actions such as submitting a form, opening a dialog, canceling an action, or performing a command such as inserting a new record or displaying information. Adding role=”button” tells assistive technology that the element is a button but provides no button functionality. Use <button> or <input> with type=”button” instead.

This button role can be used in combination with the aria-pressed attribute to create toggle buttons.

<div id=“saveChanges“ tabindex=“0“ role=“button“ aria-pressed=“false“>Save</div>

The above example creates a focusable button, but requires JavaScript and CSS to include button appearance and functionality. These are features provided by default when using the <button> and <input> with type=”button” elements:

<button type=“button“ id=“saveChanges“>Save</button>

Note: If using role=”button” instead of the semantic <button> or <input type=”button”> elements, you will need to make the element focusable and define event handlers for click and keydown events. This includes handling the Enter [...]

Read article at developer.mozilla.org

Article Taxonomies

Categories: , Terms: , , , , , Keywords: