search

PolymerElements / paper-button

A button à la Material Design
https://www.webcomponents.org/element/PolymerElements/paper-button
138 stars 64 forks source link

Links in demo are announced as button #171

Closed svinkle closed 6 years ago

svinkle commented 6 years ago

Description

When navigating with a screen reader, the "Link" in the demo is announced as a "button." This is a result of the control featuring role="button" no matter the use case.

Expected outcome

The "Link" in the demo to be announced as a "link."

Actual outcome

The "Link" in the demo is announced as a "button."

Live Demo

The demo page: https://www.webcomponents.org/element/PolymerElements/paper-button/demo/demo/index.html

Steps to reproduce

  1. Open the demo page with either Safari (macOS) or Firefox (Windows) for testing.
  2. Enable the screen reader (VoiceOver on macOS, NVDA recommended on Windows.)
  3. Tab to the first demo control and listen to how it is described ("Link, button")

Browsers Affected

All, including all assistive technology.

WCAG Info

Recommendation

  1. Adjust underlying code base to include a link prop. This would adjust the role to equal link. From here, screen readers would announce the appropriate semantic meaning of, "link".
  2. Include a to prop to represent the URL to link to. The value will be handled on the "back-end" to load the new page or jump to the desired IDREF section on the click event.
  3. In the DOM, the to prop could be output as data-href in order to keep things tidy.
  4. Support for the Space key click event is not required. The expectation on an a element would be for Space to scroll the page, as this is the default Space key behaviour.

Example:

<paper-button link to="https://google.com">link</paper-button>

Output:

<paper-button role="link" data-href="https://google.com" tabindex="0" animated="" elevation="0" aria-disabled="false" class="">link</paper-button>

Additionally, the suggestion "to use paper-button as a link, wrap it in an anchor tag." doesn't work as expected with screen readers, so this could be removed.

keanulee commented 6 years ago

You can set your own role on the button (<paper-button role="link">) if you know what you want. Otherwise, role=button is a sensible default and WAI. <paper-button> is a button and we think the space key for click is the right behavior.