2

I am working on an Angular app that displays selected Country codes in a text field. This input displays Country codes because of space constraints:

<input type="button" #countryListTrigger matInput readonly i18n-placeholder placeholder="COUNTRIES" [ngModel]="selectedCountries" />

Here's what the control looks like with Country codes displayed:

Countries Widget

Right now, screen readers would read the AU like the letter "o" and AT like "@". I know about the tag, but is there a way to achieve the same result on an input value? Otherwise, I could add another (hidden) control that is read instead perhaps?

mkrieger1
  • 19,194
  • 5
  • 54
  • 65
Rob Gravelle
  • 21
  • 3

1 Answers1

1

It starts getting messy if you try to force a screen reader to announce things phonetically. If you add an aria-label that has aria-label="A U" or aria-label="A T", then braille users will be out of luck because they'll read "A space U".

It's unfortunate there isn't really a good solution for this. The screen reader user can read the input value one character at a time so if it sounds weird to them, they have a work around. It's not a great user experience but having screen readers mispronounce stuff has been a problem for a long time.

slugolicious
  • 15,824
  • 2
  • 29
  • 43