Print this page

button

Characteristics

Superclass Role:

  • command

Base Concept:

  • HTML button

Related Concepts:

  • link
  • XForms trigger

See Related:

  • link

Supported States and Properties:

  • aria-expanded (state)
  • aria-pressed (state)

Inherited States and Properties:

  • aria-atomic
  • aria-busy (state)
  • aria-controls
  • aria-describedby
  • aria-disabled (state)
  • aria-dropeffect
  • aria-flowto
  • aria-grabbed (state)
  • aria-haspopup
  • aria-hidden (state)
  • aria-invalid (state)
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-owns
  • aria-relevant

Name From:

  • contents
  • author

Accessible Name Required:

  • True

Children Presentational:

  • True

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

The button role is used when the element is designed to look like a button but is coded as a link. Sometimes an image will be used in place of button. Adding scripting for that image will help the mouse users, but the screen reader users will not be able to understand that it is a button.

For various reasons, on web pages we find the functionalities such as Continue, Next, Confirm, Cancel etc and are coded as links. As per the semantics, these elements must be coded as buttons but not links. To ensure that the element is read as button by the screen readers role="button" can be used.

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.

Syntax

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

Microsoft Active Accessibility accRole Property:

  • ROLE_SYSTEM_PUSHBUTTON

UI Automation ControlType Property:

  • button

UI Automation AriaRole Property:

  • button