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 [...]