Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`<button>` with `title` is not considered to have an accessible name

See original GitHub issue

Describe the bug

Accessibility Insights reports a button doesn’t have an accessible name when the accessible name is set with title.

To Reproduce

Create a page that has <button class='some css with background image' title="an accessible name"></button> on it.
Run the automated tests from the extension
See that the extension reports a failure for WCAG 4.1.2, button does not have accessible text.

Expected behavior

<button> with title set should not be flagged as not having accessible text.

Extension (please complete the following information)

OS: Windows
Version: Accessibility Insights for Web 2.6.0 (axe-core 3.2.2)
Browser Version: Chrome version 75.0.3770.100
Target Page: internal

Are you willing to submit a PR?

Maybe? I’ve never contributed before.

Did you search for similar existing issues?

yes

Additional context

Technique H91: Using HTML form controls According to the W3 spec for the Accessibility API, title is in the list of things to consider for the accessible name of a <button>

Failure details from the extension:

Title: WCAG 4.1.2: Buttons must have discernible text (iframe;.pswp__button–arrow–left) Tags: Accessibility, WCAG 4.1.2, button-name

Issue: Buttons must have discernible text (button-name: https://dequeuniversity.com/rules/axe/3.2/button-name?application=msftAI)

Snippet: <button class="pswp__button pswp__button--arrow--left" title="Previous"> </button>

Issue Analytics

State:
Created 4 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

iamrafancommented, Jul 8, 2019

hi @clottman , thanks for reporting the issue. This is a false positive caused because of the “space” inside the <button> element.

We are going to update axe-core to version 3.3.0 pretty soon. It contains PR https://github.com/dequelabs/axe-core/pull/1615 which fixes this issue

0reactions

ferBonnincommented, Oct 18, 2019

Marking this as resolved, please let us know if you encounter this issue again and we can reactivate this bug 😃

Top Results From Across the Web

How to Fix: "Buttons Do Not Have Accessible Names"

Automated audits may present the “buttons do not have accessible names" error. Here's how to quickly remediate this accessibility issue.

Buttons must have discernible text | Axe Rules

Buttons must have discernible text that clearly describes the destination, purpose, function, or action for screen reader users. The input-button-name rule ...

Button has non-empty accessible name | ACT Rule | WAI

This rule checks that each button element has a non-empty accessible name. Applicability. This rule applies to elements that are included in the...

button where "title" should be accessible name

If the aria-describedby attribute is not present, the title attribute should be used, as long as this attribute is is not being used...

Lighthouse error: "Buttons do not have an accessible name"

It suggests that the button should have inner text content or an aria-label or aria-labelledBy. <button class="search-button" type="submit"> ...