Force Screen Reader To Read One Letter At A Time Rather Than The Entire Word

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; how

Solution 1:

try using CSS letter-spacing property -

<div>G J BQ T C X U</div>

div {
    letter-spacing:-1.9px;
}

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

Solution 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.

Solution 3:

I feel like the real answer to this is:

<divaria-label="G J B Q T C X U">GJBQTCXU</div>