Provide alternative text to JAWS for <span/>

Question

I know that JAWS, by default, will ignore <span/> tags. My team got around that issue. Now, however, we have some content that is displayed using <span/> tags where the text displayed for sighted users doesn't play well with JAWS reading the information out. In our specific case, it would be international bank account numbers, which can contain letters. In this case, instead of reading individual digits, JAWS attempts to read the content as a word, resulting in predictably poor output.

So, a couple of questions:

1. Given that this is part of a large page that I have neither the time nor the permission to refactor, is there a way to get this working within the constraints I've described?
2. If you were to write a page like this from scratch, what's the best practice for crafting the page such that I would have the ability to supply "alternate" text for read-only, non-interactive content?

If it helps, the outcome I'm envisioning is something like this:

<span id="some-label" aria-label="1 2 3 4 5 A">12345A</span>

We have been unable to come up with any combination of techniques that would have JAWS read: "1 2 3 4 5 A" instead of reading "12345A" as a single word.

Answer 1

The technical answer is always the same, and has been repeated many times here and elsewhere: aria-label has no effect if you don't also assign a role.

Now, for the more user experience question, I'm blind myself, and I can tell you, it may not be a good idea to force a spell out of each digit individually.

• We are used in having account, telephone, etc. numbers grouped
• IF we want a spell out of each digit individually, Jaws has the function: insert+up arrow twice quickly. Other screen readers have similar shortcuts.
• My native language is french, not english. Although I'm on an english page, I may want to have numbers spoken in french, because it's easier for me. BY forcing a label, you prevent me from hearing numbers in french.
• And probably the best argument: what are you going to say if you were to give your account number on the phone ? Will you say "one two three four five", "twelve thousend thirty hundred twenty one", "twelve thirty four five", something else ? Doing this litle exercise is likely to give you a good label to put in, but several people are probably going to give you different answers.

Answer 2

Quentin has given a very good answer that covers 99.9% of all scenarios.

However there are some less proficient screen reader users who may benefit from having things read back letter by letter.

This should be an optional toggle on the field.

The way to implement a letter by letter read out is as follows but please use it sparingly and with the above scenarios in mind.

The trick is to use a visual hidden class (screen reader only - vh in this example) to add full stops between each item.

Make sure that everything is tightly packed or you will end up with unwanted spaces due to using <span>s.

The beauty of doing this way is as QuentiC said - some people use a different language and ARIA labels don't always get translated, numbers in the below example should.

.vh { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

<div>
A<span class="vh">.</span>1<span class="vh">.</span>C<span class="vh">.</span>
</div>