Spike: Screen reader audit of phone numbers

[laflannery]

Description

Audit of screen reader behavior regarding phone numbers to determine which screen readers (if any) read phone numbers correctly even if there is not an aria-label added.

Screen readers to test

• Jaws
• NVDA
• Windows Narrator
• VoiceOver

Acceptance Criteria

• Common screen readers are tested
• Results documented

Team

Please check the team(s) that will do this work.

• CMS Team
• Public Websites
• Facilities
• User support

[sara-amanda]

CAIA-Related Inquiry

• Contact: Randi Hecht
• Topic: Long-Term Solutions, Short-Term Solutions, and Future Considerations, Relating to: ARIA labels applied to telephone numbers in Drupal

Long-Term Recommendation

The long-term recommendation would be to avoid using ARIA, per CAIA A11ys.

Rationale

• If the link already has a number the aria label isn't needed. The aria label would be duplicating the actual link. This action (even though small.) Could cause confusion to some screen reader users.
• Where the label would work is if there were multiple numbers for different countries. Then the case could be made for that label stating names of the various countries.

Issue Complicating Things

• Issue: We add aria labels to all phone numbers in Drupal because they aren't automatically added.
• Historical: The reason this was done in the first place was because if you put a phone number in the SR would read "nine hundred and eighteen" instead of "nine one eight"

Short-Term Recommendation

While Laura F. finishes testing, she is recommending that we continue the use of the aria labels as the style guide instruct, until they are officially changed.

• Testing should be completed in a few sprints from now.
• She is seeing evidence that they are no longer being needed, but would like to validate further.

Example Formatting for Short-Term Updates

Original:
<a href="tel:+19187815678" aria-label="1.9 1 8. 7 8 1. 5 6 7 8.">918-781-5678</a>

One change to this in the aria-label and have this be:
+ 1. 9 1 8. 7 8 1. 5 6 7 8.

• Do this instead because without that it's a different phone number so we want to make sure screen reader folks get that information
• Then in order to actually add this all into Drupal, you will need to use the source view in the rich text editor where you are adding this.

Future Considerations

• Audit Needed: If we wind up not doing these anymore, we would need to figure out how to remove them from all the numbers that are currently set up with aria labels in Drupal.
• Improvement: If we no longer will have to add these in manually at a later date that will eliminate an added step.

[laflannery]

@sara-amanda Couple other things to keep everything in one place and for awareness:

• I have another ticket for a CMS phone number audit and the hope was to see how many actually are using aria (and following the other guidelines) But this would hopefully tell you how many did need to get updated
• If we did end up with a recommendation to no longer use the aria-label:
  • We would want to work with the DST to update the component to remove aria from there was well so everything was consistent
  • This would help to get rid of the false positive that keeps coming up in Siteimprove for our editors so I would love it
  • There might also be some other hardcoded phone numbers that maybe are using aria that are older so aren't using the component that we would want to update

[laflannery]

Testing results spreadsheet

Not present in the results because I don't have the devices:

• Mac
• Android

Summary

• In general, phone numbers are read smoother when an aria label is included but this doesn't necessarily make them wrong
• TTY number on Desktop was read "wrong", as seven hundred and eleven instead of individual numbers
• Extensions were also read "wrong" in multiple instances, as the full number instead of individual numbers
• 800 was sometimes read as "eight hundred" but that is a known convention