aria-label attribute not being read when navigating using keyboard

Question

<span class="phone" aria-label="phone number 9 4 9 . 5 5 5 . 1 2 3 4">949.555.1234</span>

This prints out the phone number on the page. clicking on the phone number will read the aria-label as expected, however, if I navigate to the phone number using the keyboard arrow it reads whatever text is outputted on the page ("nine hundred forty-nine period five hundred"...) in this case and the aria-label is not respected.

using ChromeVox

Also it might be worth mentioning that, the span tag doesn't recieve focus when using the arrow keys. i.e. $("span").focus(function(){ // never gets here })

Answer 1

Can you clarify what you mean by "navigating using the keyboard"?

Are you using TAB to get to the phone number and then the screen reader doesn't read your aria-label? (You don't have tabindex="0" on your <span> so I'm guessing that you are not using the TAB key.)

Or are you navigating with the keyboard using screen reader keys, such as the up/down keys that walk the DOM (or more accurately, walk the accessibility tree, which is similar to the DOM).

If doing the latter, then many browsers will not surface the aria-label of an element in the accessibility tree if that element doesn't have a role. <span> elements don't have any semantic meaning so you'd have to add the role attribute as well. Whether this is correct behavior is debatable, since the aria-label spec doesn't specifically say a role must also be specified.

There are some ARIA guidelines on how the aria-label is supported that explains (sort of) why the aria-label might be ignored on a <span>.

So if you really want the aria-label read, you'll have to decide what kind of role to give the <span>. It's hard to tell with just your small snippet of code but is the phone number part of other information as well, such as a name and address? If so, is the other info (name, address, etc) displayed in a list or table, or is it just plain text?

However, as a side note, when you specify an aria-label for the purpose of forcing a screen reader to read text a certain way, that's usually not a recommended practice. Hearing a phone number read as a real number instead of as single digits is certainly not ideal for a screen reader user, but they're used to it and can navigate numbers a digit at a time if they so choose. At some point, when the autocomplete attribute is more widely supported by screen readers, then hopefully this problem will be resolved. In the meantime, when you force text for a screen reader, it can have detrimental affects for braille users. In your phone example, as a braille user, my braille device will show me "nine space four space nine space dot space five space five space five space [etc]". That's a lot of braille characters for the space character that I have to weed through.