让屏幕阅读器将文本输入中的国家/地区代码发音为单个字母

问题描述

我正在开发一个 Angular 应用程序，该应用程序在文本字段中显示选定的国家/地区代码。由于空间限制，此输入显示国家/地区代码：

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

以下是显示国家/地区代码的控件的外观：

Countries Widget

现在，屏幕阅读器会像字母“o”一样读取 AU，像“@”一样读取 AT。我知道标签，但有没有办法在输入值上实现相同的结果？否则，我可以添加另一个（隐藏的）控件来代替读取？

解决方法

如果您试图强制屏幕阅读器以语音方式宣布内容，它就会开始变得混乱。如果您添加一个包含 aria-label 或 aria-label="A U" 的 aria-label="A T"，那么盲文用户将不走运，因为他们会读到“A 空格 U”。

不幸的是，对此没有真正好的解决方案。屏幕阅读器用户可以一次读取一个字符的输入值，所以如果这对他们来说听起来很奇怪，他们有一个变通办法。这不是一个很好的用户体验，但让屏幕阅读器误读内容一直是​​一个问题。