Force screen reader to read one letter at a time rather than the entire word

Question

I'm building an HTML webpage that contains the following content:

In order to proceed, please enter this code: GJBQTCXU

"GJBQTCXU" is a code comprised of a string of letters; however, screen readers attempt to pronounce this as a single word. How can I stop them from attempting to pronounce this nonsensical word and instead get it to read one letter at a time: "G J B Q T C X U".

As clarification, I'm building this page so that screen readers automatically do the right thing. I know that users can choose to have their reader pronounce each letter at a time, but I don't want my users to have to take any additional steps.

Answer 1

try using CSS letter-spacing property -

<div>G J B Q T C X U</div>

div {
    letter-spacing:-1.9px;
}

example: http://codepen.io/stevef/pen/grZGBP

Answer 2

There are many screen readers and those readers can also be inconsistent between browsers due to accessibility APIs differences.

With that said here is a good generalization of functionality from WebAIM http://webaim.org/techniques/screenreader/

They note that some screen readers by default won't read punctuation like periods, semi-colons, etc. but rather pause between them. You could try visually hidden versions of these. Now if they have more verbose settings turned on it might read those.

Another reading aspect mentioned is that some screen readers pause at the end of a paragraph. So if you wrapped each letter in a p tag and then made them display inline, there could be pauses.

Since nuances aren't as well documented between the screen readers between browsers it's hard to say either will work in your instance.

Since users can just use left/right arrow keys to read individual letters it wouldn't take much for regular screen reader users to read the word slowly.

I would say the punctuation is more dangerous if their verbosity settings are set high. So try the paragraph tag approach first. Since users can also jump between paragraph tags with screen readers there might be some confusion but it seems like the lesser of the two.