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

Share A11Y Love

Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri is a digital Transformation specialist working with small & large enterprises in the areas of digital accessibility & digital marketing. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers, and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books, or writing on his Personal Blog at raghava.in.

Similar Posts

WAI-ARIA: Role=Scrollbar

WAI-ARIA: Role=Scrollbar

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

A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area. Description A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area. A scrollbar represents the…

Leave a Reply

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