3

So, say I have an account number where I don't want to expose the first 8 digits.

Something like ········1234 or with asterisks ********1234.

What's the best way to handle these situations for screen reader users? It seems wonky for it to say "Black dot, Black dot, Black dot, Black dot, Black dot, Black dot, Black dot, Black dot, One thousand thirty-four."

I couldn't find anything searching Google.

degys
  • 75
  • 5

3 Answers3

3

Instead of having "Account number ········1234" you can just use "Account number ending in 1234". I've seen this before, it's easy, and the experience is consistent for everyone.

Alternatively, if you like how dots look, you can hide them from the screen reader and have screen reader only text for "ending in".

If you need to say how long your number is, consider saying that it's a "12 digit account number ending in 1234" (showing and hiding what you want visually and to screen readers).

Laurel
  • 5,965
  • 14
  • 31
  • 57
1

Most screen readers will actually say 'star' or 'bullet' for each character. This also happens when entering a password if asterisks are displayed: the reader says 'star' after each character that is typed. So this is normal behaviour.

The difference between using an asterisk and a bullet is that the bullet will always be read (it is therefore considered a safe symbol for screen readers), whereas the asterisk will only be read in some cases, by some of the readers.

For more info on this topic, here's an excellent blog post from deque on Punctuation and Typographic Symbols

Andy
  • 4,783
  • 2
  • 26
  • 51
Camelopardalus
  • 499
  • 1
  • 4
  • 20
0

You can treat your dots similar to an image, because it’s a visual representation, and provide a text for screen readers:

<dl>
  <dt>Account number</dt>
  <dd><span role="img" aria-label="12 digit number ending with">········</span>1234</dd>
</dl>
Andy
  • 4,783
  • 2
  • 26
  • 51