[a11y Support & CAIA Content Support] ARIA labels applied to telephone numbers in Drupal

[sara-amanda]

[!CAUTION]

• STATUS: HOLD - PER OCTO
• DETAIL: "In short: please hold off on taking any action to make a change at this moment."
  • Per @artsymartha68 via ticket comment on July 9, 2024 cc: @strelichl @NaomiPMC

Original Ticket

• Primary Contact: @laflannery
• Ticket Detail: 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.
• Repository: department-of-veterans-affairs/**va.gov-cms
• Ticket Name: PublicSpike: Screen reader audit of phone numbers #13951
• Link to Original Ticket

CAIA-Related Inquiry

• CAIA Contact: Randi Hecht
• Topic: Long-Term Solutions, Short-Term Solutions, and Future Considerations, Relating to: ARIA labels applied to telephone numbers in Drupal
• Ticket: Link to Comment 6/13/2023

  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.
• Additional Considerations from Laura F.: See comments in her ticket, here.

### Short-Term Recommendations
- [ ] Receive feedback from @laflannery 
- [ ] Implement decision 
- [ ] Move on to long-term recommendations

### Long-Term Recommendations
- [ ] The long-term recommendation would be to avoid using `ARIA`, per CAIA A11ys.
- [ ] Address issues complicating things, noted in this ticket. 
- [ ] If this changes, update the guidelines in the [VA Design system](https://design.va.gov/content-style-guide/dates-and-numbers#phone-numbers). 

### Related Items
- [ ] [CMS Phone number audit](https://github.com/department-of-veterans-affairs/va.gov-cms/issues/13949) `#13949`
- [ ] [Spike: Screen reader audit of phone numbers](https://github.com/department-of-veterans-affairs/va.gov-cms/issues/13951) `#13951`
- [ ] [Phone Number aria-related SR Testing](https://docs.google.com/spreadsheets/d/1F3orxFaPX3N9R_5BYhvi0hoSwB0xDTibtzifgQ6Gsns/edit?usp=sharing) `(Google Sheet)`

### Future Considerations
- [ ] Audit Needed (in ticket body)
- [ ] Improvement (in ticket body)
- [ ] Additional Considerations from LF (in ticket body)

[sara-amanda]

a11y Specialist Update

Laura Flanner's Feedback and Audit

Laura Flannery reached out to the a11y specialist group for feedback on this item and provided her current thoughts, below.

• Currently it is in the VA content guidance that phone numbers should include an aria-label to make sure it is announced properly by screen readers.
• However, Laura F. believes this guidance may be outdated as most common screen readers are able to understand and read phone numbers correctly.
• Laura F. did a basic audit of this earlier and the results are documented in this comment here.
• Based on what Laura F. is currently seeing, she is also not sure we need to have these aria-labels expect for in the TTY numbers.

SK's Feedback

aria may not be necessary.

the text preceding the number should identify what sort of number it is like main office phone.

Thoughts on TTY in general (since we're discussing phone #'s might as well add)- (use picture below for reference)

it should not say TTY unless that number is specific for a TTY operator that can respond in text. in which case, you may need to list both a phone and a TTY number and specify which is which.

TTY is probably redundant, unless you intend to answer voice phone calls with a TTY device. Deaf people who have a TTY device (or TTY software on their phone) will call the phone number and the TTY at their end will translate voice into a visual display.

TTY is only for teletype services (text only, using a modem, supporting deaf). It must not be used with voice lines.

Brian's Feedback

Brian DeConinck said he is on board with removing the aria-label, since that item in the style guide goes against what he was always taught about screen readers (don’t try to force how they pronounce things, trust users to be able to figure it out).

Brian's concerns:

• Experience: We want to know what the experience is across as many device/screen reader combinations as possible.
  • They don’t all have to be the same, but it would be good to be confident that phone numbers are handled well across the board.
  • I don’t want to have users go from hearing one thing (which may not have been the right approach in the first place) to hearing something totally different.
• There are a handful of times when international phone numbers show up.
  • Would be good to test against them, numbers with extensions, etc
• He will also try and get in some testing, as time allows.

FYI - @coforma-terry @RLHecht @SarahKay8 @laurwill

[sara-amanda]

CAIA Update

June 13, 2023

Laura's Feedback in Ticket #13951 Comments

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

June 21, 2023

Laura's Feedback in Ticket #13951 Comments

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

cc: @coforma-terry @laurwill @megzehn

[megzehn]

Hi @sara-amanda, thanks for this write-up.

For the TTY number and extensions that were read incorrectly, were there aria labels attached?

Is Laura ultimately recommending to keep the aria labels?

[sara-amanda]

CAIA a11y Update

@megzehn @laflannery mentioned today (7/26/2023) in Slack the following:

For the aria labels, you will want to follow the guidelines in the VA Design system. While we have done some research on if these are still needed, we have no officially changed anything so you should still follow what is written here for both the phone number and the TTY number

[eli-oat]

@laflannery is this still stuck?

[laflannery]

@eli-oat Yes a bit - I still don't have the ability to test on Mac or Android. If there was someone able to see how various phone numbers behaved with and without aria-labels on those devices we might be able to come to a determination if we wanted to update/change our guidelines around this.

[eli-oat]

@laflannery we don't have official guidance re: android testing, but CAIA can 100% check in on this using macOS VoiceOver to confirm there. I'll circle back as soon as that is done!

[laflannery]

Thank you, I really appreciate it!

[SarahKay8]

@laflannery

Environment- (Mac) Chrome + VO.

First video shows behavior of phone number without an aria-label.

Second video shows behavior of phone number without an aria-label Without an aria-labelVO is reading out eight hundred instead of 8 0 0

https://github.com/department-of-veterans-affairs/va.gov-team/assets/102324990/180a0db3-266c-402f-bc26-2749040d9944

https://github.com/department-of-veterans-affairs/va.gov-team/assets/102324990/8a1d551d-905a-4a44-bb3e-914b7d39e9bb

Is there a specific environment you'd like for me to test?

[laflannery]

@SarahKay8 Spreadsheet here, if you wanted to add column for VoiceOver Mac and add results that would be helpful to have everything in one place

[SarahKay8]

Thanks! Just requested access @laflannery

[SarahKay8]

Feedback to spreadsheet has been added to "Voiceover Mac" column @laflannery

[megzehn]

Thanks for testing this!! Just to reiterate, it seems like the consensus is to keep using the aria label for now. Is that correct, @sara-amanda?

Does this advice apply to fax numbers and numbers for texting as well?

Also, are we OK to close this ticket out?

CC @laflannery

[SarahKay8]

@megzehn - I believe @laflannery and her team are making that final call based on the audit we did

[sara-amanda]

CAIA Update

@megzehn I would wait until we hear the final verdict from @laflannery. I can add a task list to this ticket, now that we are using task lists, too. Also, once the verdict is in, we will need to address if we are implementing the long-term solution and addressing future considerations. So, I would hold off on closing this for now.

• Yes, this would apply to all phone/fax numbers.
• Here is Laura's open ticket relating to this CMS Phone number audit #13949.
  • We are unable to test Android at this time.
  • Until @laflannery is done with her research as to if these are still needed (link to Google Sheet).
    • We have not officially changed anything so you should still follow what is written here for both the phone number and the TTY number
      • You will want to follow the guidelines in the VA Design system.

Discussion Points

Toggle to view discussion points

### Design System Guidance as of 10/25/2023 > - Hyperlink all phone numbers, including TTY numbers. It is not a requirement to link the “call” or “text” verb that precedes the number. We do however include “TTY” in the link and aria-label to make it clear that it’s specifically for TTY so that users who need the service see it and so those who do not do not unintentionally call a TTY number. > - Include an aria label using spaces between the digits and periods between sections in order to have screen readers read the phone number one digit at a time like a phone number, rather than as thousands or hundreds. > - For example:`800-827-1000``TTY: 711` ### Ticket comment from LF 6/21/2023 > - In general, phone numbers are read smoother when an `aria label` is included but this doesn't necessarily make them wrong > - `TTY numbe`r 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_** ### Ticket comment from: MZ 10/24/2023 > Thanks for testing this!! Just to reiterate, it seems like the consensus is to keep using the aria label for now. Is that correct, @sara-amanda? > Does this advice apply to fax numbers and numbers for texting as well? > Also, are we OK to close this ticket out? > CC @laflannery ### Ticket comment from: SK 10/24/2023 > @megzehn - I believe @laflannery and her team are making that final call based on the audit we did

[sara-amanda]

@laflannery do you have any updates on the final call on this by chance?

[laflannery]

An unofficial poll is that folks would prefer to hear the 3 digit numbers announced individually (9 1 1 instead of nine hundred and eleven) which would mean that we would need aria labels. However, I'm still pondering if would would want to include labels on every number or just these exceptions - like ones that don't follow a typical phone number pattern? Or am I just overthinking this entirely because I'm against using the labels?

[megzehn]

Hi @laflannery!

I'm trying to add a status to this ticket. Do we want to chat about this over a call? Or just decide to keep following the standard guidance to add aria labels to all numbers?

Thanks again for looking into this!

[laflannery]

Sorry @megzehn Yes, let's close this because I don't have good enough evidence or reasoning to change the guidance right now. I'm not saying I won't bring it up again in the future but let's just call it for now. Again so sorry I let this linger!

[megzehn]

No worries at all!! Thanks so much for looking into it.

[megzehn]

Hi @laflannery, sorry I have one more question before I close this!

@sara-amanda confirmed that our decision here applies to fax numbers as well. Is this the correct way to add an aria label to a fax number? Would we remove the phone link?

Fax your form and any supporting documents to <a href="tel:+18446788979" aria-label="8 4 4. 6 7 8. 8 9 7 9.">844-678-8979</a>

[laflannery]

@megzehn I would not use an at all as I don't think this typically should be clickable. You are also correct in that we wouldn't want to use the tel: protocol and have folks call a fax number, that would be very disruptive to the user.

My recommendation would be <p>Fax: 800-123-4567</p>. My reasoning behind this:

• There is still some debate if an <a> tag without an href should be used. However, when this is done, it becomes a non-interactive element.
• The aria-label attribute is not supported on non-interactive elements, meaning even if this is added, it's not going to be announced or used by assistive tech.
• To reiterate/clarify, based on the investigation done previously, screen readers typically only announced phone numbers "oddly" when they were non-standard, meaning 3-digit numbers or the extensions of a phone numbers. Folks at the BVA stated that they did prefer to hear these non-standard numbers announced individually which is why there wasn't enough evidence to reverse the current aria-label guidance and trying to come up with guidance for standard vs. non-standard seemed a bit duanting at the time.
  • For fax numbers though, given that we don't want folks accidently calling these and having a poor user experience and the fact that the standard numbers will be read appropriately without an aria-label, it should be sufficient to add these using a non-interactive element and without this additional label.

Let me know if there are use cases I might be missing that would contradict my thinking here, thanks!

Thanks so much @laflannery! I'm going to summarize some of the takeaways again. Let me know if any of this is wrong!

• This latest test confirmed that screenreaders will announce standard numbers one digit at a time, rather than a giant number. But this isn't the case for nonstandard numbers, like 711 or 911, etc. Aria labels on phone numbers also sound smoother, so we're going to keep the current guidance as is and add aria labels to all phone numbers for consistency and experience.

• Exception: We should remove aria labels from fax numbers. We don't want to make fax numbers interactive in the same way as phone numbers. But we should make it clear in the content that these are fax numbers (to avoid people accidentally calling them).

Also, I know we discussed some open questions that came out of this. I'm going to go ahead and open a backlog ticket for a11y to help us explore in the future these related questions:

• Do we need to wrap something around fax numbers to prevent them from getting linked automatically?
• How often are people clicking on fax numbers? Or facing issues?

[laflannery]

This looks good to me @megzehn, thanks for summarizing!

[megzehn]

@sara-amanda based on the summary above, do you want to weigh in on next steps? And are you OK with closing this ticket?

[megzehn]

@laflannery I have another clarifying question!

It seems like Drupal automatically adds the<va telephone>component to anything that looks like a phone number. Is that true?

If so, do we need to be manually adding aria labels on all phone numbers? Or are we duplicating efforts there?

[laflannery]

@megzehn you ask a complicated question lol. The short answer is, no I wouldn't recommend putting aria-label on any phone number because:

• Main reason is because we are officially recommending that the aria-label be removed from the component so for consistency, it would be good not to include this anywhere going forward
• Second reason, is that The consistency of when Drupal phone numbers are able to use the component is not as straightforward as it may seem:
  • Phone numbers coming from Drupal sometimes are able to use the component on the Front end. This is dependent on a couple things:
  • If the phone number is coming from an individual phone number field that can be easily parsed properly into the component
  • If the phone number is in a WYSIWYG but is NOT actually formatted as a link in the content, we are typically able to parse and format this into the component
  • Otherwise, we are not able to pull the phone number out of the Drupal data in a format that can properly use the component.

Let me know if that makes sense and helps you or feel free to ping me if you have any other questions!

[artsymartha68]

Adding in some notes from a fact finding mission I went on today.

In short: please hold off on taking any action to make a change at this moment.

Removing the aria label aligns with the latest widely held practice in the a11y community. Admittedly, the practices have evolved over time as phones keep getting smarter.

I validated that with newer phones (iPhone 13 in my case, both Safari and Chrome), a phone number on a web page will appear as a tappable link, even if there is no tag in the code. I don't think there will be any way to stop a fax number from being display as tappable on new phones, but my search didn't lead me down that particular rabbit hole today.

Interesting thing I learned: GOV.UK has no phone number links on their web pages! “Do not display telephone numbers as links on devices that cannot make calls.” That was an interesting rabbit hole. We don’t want to emulate GOV.UK this time. We want desktop users to be able to click a phone number link, they may want to use VOIP or FaceTime or some such application.

The OCTO a11y specialists and VA 508 office are all aligned but we want to verify this with user testing before the change is made. Problem: there is no team tasked to do this kind of research. It would have to be tacked onto another study. @davidakennedy has kindly offered to see if he can sneak this into an upcoming study.

[sara-amanda]

Hold Request

This ticket has been moved to Blocked to reflect the hold request from Martha.

[davidakennedy]

@sara-amanda Looks like the design system team has moved forward with these changes in the PR. The change is in production. @rsmithadhoc will be working with CAIA to get the content guidelines updated.

[artsymartha68]

Thanks DK. I think this ticket can be closed since the change happened via the other ticket.