Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove aria-label from va-telephone component #2884

Closed
2 tasks
rsmithadhoc opened this issue May 29, 2024 · 1 comment · Fixed by department-of-veterans-affairs/component-library#1220
Closed
2 tasks
Assignees
Labels
accessibility Any Section 508 or accessibility issue platform-design-system-team va-telephone DS telephone component

Comments

@rsmithadhoc
Copy link
Contributor

rsmithadhoc commented May 29, 2024

Description

Based on a discussion with the accessibility group at VA.gov, we decided it would be better to remove the aria-label containing the spaced out phone number (e.g. aria-label="8 7 7. 3 4 5. 9 8 7 6."). This was intended to help screen reader users by reading each individual number, but hurts the experience for speech recognition users. Because screen reader users have the option to read out numbers individually, the prevailing guidance around this has changed.

Details

Explanation given by Siteimprove, provided by Martha:

I assume that you put spaces in the aria-label so that the phone number would be announced as single digits. I agree that there is a benefit for screen reader users in having the phone number announced as single digits. The problem is that this benefit for screen reader users makes the experience worse for speech recognition users, and in our opinion, the latter outweighs the former. So this is not a false positive. It's a true positive.
This is a difficult trade-off. If there was a way to change the web page to give both screen reader users and speech recognition users the ideal experience, then I would recommend it. But there is no known way to do that - not by changing the web page. Fortunately there are ways to do it by changing the screen reader configuration. I've written more about that below.
This case regarding spaces in phone numbers is not straightforward. Many people in the accessibility community have discussed it for years. That this is a true positive isn't just Siteimprove's opinion - rather, it's informed by the ACT (Accessibility Conformance Testing) group. The most recent best practice is mentioned in this post act-rules/act-rules.github.io#1615 (comment). The main points of that post are:

  • Regarding the argument of giving an aria-label with spaces (eg. aria-label="4 1 6. 5 5 5. 0 1 2 3."), so that the screen reader will announce the numbers one by one (eg. "four, one, six"): we now see that argument as misguided. It's misguided because screen readers can be configured by their users to announce the numbers one by one. So for the web page author to add spaces like that is unnecessary.
  • If the web page author adds spaces like that, they are taking choice away for the screen reader user. (Because what if a screen reader user wants it to be read as big numbers eg. "four-hundred-and-sixteen"?) So for the web page author to add spaces like that is undesirable.

The worse experience for speech recognition users is mentioned in this comment w3c/wcag#1936 (comment) : "So then if you use aria-label="2 0 2 3", suddenly other number groups no longer work (under Voice Control). It seems to me that that's basically the same error as if you'd used aria-label="two zero two three", which we explicitly prohibit." "So I'm of the opinion that spacing of numbers matters under SC 2.5.3."
I haven't tested this with speech recognition software. For that, I'm trusting the comments that I've read. I have tested it with some screen readers: NVDA and JAWS. In my tests, a phone number < a > element like this without the aria-label="4 1 6. 5 5 5. 0 1 2 3." was /not/ announced as single digits only under certain configurations. I tested seven configurations. Two configurations gave a bad result and five configurations gave a good result. That means two configurations where aria-label="4 1 6. 5 5 5. 0 1 2 3." would benefit screen reader users, and five configurations where it would make no difference. If some real-world users of screen readers have one of these configurations that gives a bad result when the aria-label isn't there - particularly if their configuration is the default configuration - I'm not trying to make light of that bad experience that they're having. But still, that's not enough to outweigh the bad results for speech recognition users that adding the aria-label="4 1 6. 5 5 5. 0 1 2 3." would cause.
In summary: our advice is to match the spaces. One way to do that is: remove the aria-label.

Tasks

  • Remove aria-label from va-telephone

Acceptance Criteria

  • va-telephone no longer contains a label with spaced out numbers.
@rsmithadhoc rsmithadhoc added accessibility Any Section 508 or accessibility issue platform-design-system-team va-telephone DS telephone component labels May 29, 2024
@caw310
Copy link
Contributor

caw310 commented May 29, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Any Section 508 or accessibility issue platform-design-system-team va-telephone DS telephone component
Projects
None yet
3 participants