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

  • WAI-ARIA 1.2 Specification
    Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=button.
  • A11Y Support
    The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for role=button.

Explore more on DigitalA11Y Insights

  • WAI-ARIA: Role=Section
    WAI-ARIA: Role=Section

    Description A renderable structural containment unit in a document or application. Note: section is an abstract…

  • WAI-ARIA: Role=Sectionhead
    WAI-ARIA: Role=Sectionhead

    Description A structure that labels or summarizes the topic of its related section. Note: sectionhead is…

  • WAI-ARIA: Role=Command
    WAI-ARIA: Role=Command

    A form of widget that performs an action but does not receive input data. Note:…

  • WAI-ARIA: Role=Select
    WAI-ARIA: Role=Select

    Description A form widget that allows the user to make selections from a set of…

  • WAI-ARIA: Role=Structure
    WAI-ARIA: Role=Structure

    Description A document structural element. Roles for document structure support the accessibility of dynamic web…

Share A11y Love
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=Tablist

WAI-ARIA: Role=Tablist

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

Description A list of tab elements, which are references to tabpanel elements. To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus. For a single-selectable tablist, authors SHOULD hide other tabpanel elements from the user until the user selects the tab associated with that…

WAI-ARIA: Role=Widget

WAI-ARIA: Role=Widget

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

Description An interactive component of a graphical user interface (GUI). Widgets are discrete user interface objects with which the user can interact. Widget roles map to standard features in accessibility APIs. When the user navigates an element assigned any of the non-abstract subclass roles of widget, assistive technologies that typically intercept standard keyboard events SHOULD…

WAI-ARIA: Role=Log

WAI-ARIA: Role=Log

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
1 Comment

A type of live region where new information is added in meaningful order and old information may disappear. Description A type of live region where new information is added in meaningful order and old information may disappear. See related marquee. Examples include chat logs, messaging history, game log, or an error log. In contrast to other live…

WAI-ARIA: Role=Document

WAI-ARIA: Role=Document

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

An element containing content that assistive technology users may want to browse in a reading mode. Description An element containing content that assistive technology users may want to browse in a reading mode. When user agent focus moves to an element assigned the role of document, assistive technologies having a reading mode for browsing static content MAY switch to…

Leave a Reply

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