WAI-ARIA:Role=Button

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : Roles
WAI-ARIA:Role=Button
WAI-ARIA:Role=Button

An input that allows for user-triggered actions when clicked or pressed.

Description

An input that allows for user-triggered actions when clicked or pressed. See related link.

Buttons are mostly used for discrete actions. Standardizing the appearance of buttons enhances the user’s recognition of the widgets as buttons and allows for a more compact display in toolbars.

Buttons support the optional attribute aria-pressed. Buttons with a non-empty aria-pressed attribute are toggle buttons. When aria-pressed is true the button is in a “pressed” state, when aria-pressed is false it is not pressed. If the attribute is not present, the button is a simple command button.

Screen Reader Support For Role=Button

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its namesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey its rolesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported

Role=Button Example

HTML Example 1

<a href="/continue.html" role="button">Continue</a>

HTML Example 2

<div role="toolbar" tabindex="0" id="customToolbar"><img src="/img/btn1.gif" tabindex="0" role="button" id="b1" alt="Home"><img src="/img/btn2.gif" tabindex="-1" role="button" id="b2" alt="Refresh"><img src="/img/btn3.gif" tabindex="-1" role="button" id="b3" alt="Help"></div>

Characteristics

Superclass Role

Base Concept

  • HTML button

Related Concepts

  • link
  • XForms trigger

Supported States and Properties

Inherited States and Properties

Name From

  • contents
  • author

Accessible Name Required

  • True

Children Presentational

  • True

Semantic HTML

Use the HTML <button> tag.

<button type="button">Click Me!</button>

Reference

Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.

Similar Posts

WAI-ARIA: role=presentation

WAI-ARIA: role=presentation

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

An element whose implicit native role semantics will not be mapped to the accessibility API. Description An element whose implicit native role semantics will not be mapped to the accessibility API. See synonym none. Note regarding the ARIA 1.1 none role.§ In ARIA 1.1, the working group introduced none as a synonym to the presentation role, due to author…

WAI-ARIA: Role=Textbox

WAI-ARIA: Role=Textbox

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description A type of input that allows free-form text as its value. If the aria-multiline attribute is true, the widget accepts line breaks within the input, as in an HTML textarea. Otherwise, this is a simple text box. The intended use is for languages that do not have a text input element, or cases in…

WAI-ARIA: ROLE=PROGRESSBAR

WAI-ARIA: ROLE=PROGRESSBAR

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

An element that displays the progress status for tasks that take a long time. Description An element that displays the progress status for tasks that take a long time. A progressbar indicates that the user’s request has been received and the application is making progress toward completing the requested action. The author SHOULD supply values for aria-valuenow,…

WAI-ARIA: Role=Spinbutton

WAI-ARIA: Role=Spinbutton

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description A form of range that expects the user to select from among discrete choices. A spinbutton typically allows the user to select from the given range through the use of an up and down button on the keyboard. Visibly, the current value is incremented or decremented until a maximum or minimum value is reached….

WAI-ARIA: Role=Menu

WAI-ARIA: Role=Menu

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A type of widget that offers a list of choices to the user.  Description A type of widget that offers a list of choices to the user.A menu is often a list of common actions or functions that the user can invoke. The menu role is appropriate when a list of menu items is presented in a…

WAI-ARIA: Role=Search

WAI-ARIA: Role=Search

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. See related form and searchbox. A search region may be a mix of host language form controls, scripted controls, and hyperlinks. User agents SHOULD treat elements with the role of search as navigational…

Leave a Reply

Your email address will not be published. Required fields are marked *