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=Navigation

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

    A collection of navigational elements (usually links) for navigating the document or related documents. Description A collection of navigational elements (usually links) for navigating the document or related documents. User agents SHOULD treat elements with the role of navigation as navigational landmarks. Screen Reader Support For Role=Navigation Expectation JAWS Narrator NVDA Orca TalkBack VoiceOver (iOS) VoiceOver (macOS)…

  • WAI-ARIA: Role=Listitem

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

    Description A single item in a list or directory. Authors MUST ensure elements with role listitem are contained in, or owned by, an element with the role list or group. ROle=Listitem Example Pseudo-list with ‘list’ and ‘list-item’ roles Characteristics Superclass Role Subclass Roles Required Context Role Supported States and Properties Inherited States and Properties Name…

  • WAI-ARIA: Role=Checkbox

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

    A checkable input that has three possible values: true, false, or mixed. Description A checkable input that has three possible values: true, false, or mixed. The aria-checked attribute of a checkbox indicates whether the input is checked (true), unchecked (false), or represents a group of elements that have a mixture of checked and unchecked values…

  • WAI-ARIA: Role-Meter

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

    An element that represents a scalar measurement within a known range, or a fractional value. Description An element that represents a scalar measurement within a known range, or a fractional value. Authors MAY set aria-valuemin and aria-valuemax to indicate the minimum and maximum values for the meter. Otherwise, their implicit values follow the same rules as <input[type=”range”]> in [HTML]: The value of aria-valuenow MUST NOT fall below or exceed the computed…

  • WAI-ARIA: Role=Link

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

    An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. Description An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. See related button. If this is a native link in the host…

Leave a Reply

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