CODEWITHSUNDEEP
htmlcssaccessibility
OrangeDog
OrangeDog

Reputation: 38777

Screen reader accessibility for password-like text

In some situations you want to render an alphanumeric code or other such text which should be reproduced elsewhere exactly, where e.g. the case of each character is important. You may markup each character separately and apply styles to more easily distinguish O0, 1Il, etc.

However, how would a screen reader or similar accessibility tool read this? Ideally I'd want this to be read as something like "zero, uppercase em, lowecase ee". It should not say e.g. "zero, me", nor simply "zero, em, ee".

<span class="token"><!--
  --><span class="token-d">0</span><!--
  --><span class="token-u">M</span><!--
  --><span class="token-l">e</span><!--
--></span>

Upvotes: 0

Views: 312

Answers (1)

Alex
Alex

Reputation: 9031

You could use aria-label:

<span aria-label="Uppercase A">A</span><!--
--><span aria-label="Lowercase l">l</span><!--
--><span aria-label="3">3</span><!--
--><span aria-label="lowercase x">x</span>

Upvotes: 1

Related Questions