Update KB article about phone numbers + the aria-label tool

[stefaniefgray]

Description

Current KB article about the aria-label tool is located at https://prod.cms.va.gov/help/vamc/aria-label-tool-for-phone-number-accessibility

This article:

• Should explain why using the aria-label feature is helpful for accessibility (Screen-reading tools!)
• Should contain a sample aria-label HTML snippet for easy use by editors, including a second example of what it looks like with an extension added to the phone number
• Should include a link to the VA.gov style guide: https://design.va.gov/content-style-guide/dates-and-numbers#phone-numbers

Acceptance Criteria

• [ ] Purpose and usefulness of accessibility tool is explained
• [ ] Article contains example of aria-label phone number HTML
• [ ] Article also contains the following helpful example HTML for a phone number with an extension: <a href="tel:+18773459876,123" aria-label="8 7 7. 3 4 5. 9 8 7 6. extension. 1 2 3.">877-345-9876, ext. 123</a>
• [ ] Article links to phone number page on VA.gov Style Guide

CMS Team

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

• [ ] Platform CMS Team
• [ ] Sitewide program
• [ ] ⭐️ Sitewide CMS
• [ ] ⭐️ Public Websites
• [ ] ⭐️ Facilities
• [x] ⭐️ User support

[stefaniefgray]

Saved draft: https://prod.cms.va.gov/node/34628/latest

[laflannery]

Some thoughts:

• Generally (I was told) the purpose of the VA content guide vs the KB was that:
  • The VA content style guidelines are standards the should be followed so the ecosystem is all on the same page
  • Whereas KB articles should be more "How To" articles. How to use Drupal correctly to adhere to the standards VA puts forth. So in this case, it would be more of a "How to add a phone number so that it follows the VA guidelines".
• The Aria-label tool is fascinating and amazing for our editors and the KB is a great place for this. But I don't think we should necessarily paste all the standards in here as well? It also makes it harder to keep everything in line and up to date when things change. For example, I'm requesting an update as we speak and I wasn't aware there was another place these lived and would need to be updated: https://dsva.slack.com/archives/C01K37HRUAH/p1677091336223129
• Would it make sense to make this article more of a step by step, here's how to add a phone number so that you can be sure it will be properly formatted for accessibility?
  • When you encounter a phone number text field do this (i.e. type in the numbers with hyphens. do not use parenthesis). If you need to add an ext do it like this...
  • If you want to add a phone number in a WSYWIYG, use this very fancy tool. Then go to the source code, etc.
  • We could add a link over to the VA content guide page as well.
• In other news, I'm looking at the user experience of phone numbers and how editors can add these now. It's something that I think we might be able to improve upon now that we are moving into D10 and perhaps we might be able to do something with help text, possibly.
• I also tried the excel because I wanted to be sure it was working with exts given what I learned recently but I couldn't get it to work properly - it very well could have been because I pulled it into google sheets though: