Screen reader accessibility for password-like text

Question

In some situations you want to render an alphanumeric code or other such text which should be reproduced elsewhere exactly, where eg 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 eg "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> 

Answer 1

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>