Search code examples
htmlaccessibilitywai-ariascreen-readersnvda

How to avoid NVDA announcing "link" in the middle of a phone number?


I have a phone number with HTML as such:

<a aria-label="Call 1 8 0 0 5 5 5 1 2 1 2 for further questions" href="Tel:18005551212">1-800-555-1212</a>

It reads as intended for most screen readers, with one exception being NVDA, which reads something like "link Call 1 8 0 0 5 5 5 1 2 link 1 2 for further questions". The second "link" seems out of place there. What could be causing this and any possible suggestions for a fix?


Solution

  • I just tried your simple example with NVDA in both firefox and chrome and I didn't hear the second "link". Your code sample might be pared down from your original code which has the problem. Perhaps post a bigger sample from your original code.

    As a side note, I understand the aria-label with the spaces between the numbers to force the screen reader to announce the phone as separate digits but that causes a problem for braille users. They will read a bunch of spaces in the phone number and it will be more difficult to read. It's best to let the screen reader decide how to pronounce a phone number and then the user can adjust their settings to have it read in the style they want it.

    When I try this with NVDA in both chrome and firefox, it reads the phone number like you'd expect.

    <a aria-label="Call 1-800-555-1212 for further questions" href="Tel:18005551212">1-800-555-1212</a>
    

    In fact, it reads it better than your example because there are slight pauses between "eight hundred" and "five five five" and "one two one two" because of the dashes. In your example, I hear the string of digits as one long string with no brief pauses.