Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 632
Nosrettap Avatar asked May 04 '16 21:05

Nosrettap


1 Answers

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

like image 133
Steve Faulkner Avatar answered Sep 29 '22 08:09

Steve Faulkner