Question

我有以下标题

<h1>ADD MONEY</h1>

，并且VoiceOver会将其读取为

一笔钱

而如果我将文本更改为小写，它将正确地读为“增钱”。你有什么建议吗？我已经尝试过使用aria-labelledby了，但是没有运气！

Answer 1

我建议开发人员避免在这种情况下尝试控制屏幕阅读器。原因：

屏幕阅读器用户（通常）非常习惯这样的怪癖，并且会理解拼写出的常见词（例如“ add”）。对于整天使用屏幕阅读器的人来说，对于开发人员（和质量检查测试人员）来说，似乎是个大问题实际上可能只是个小问题。较长或不常见的单词可能是大写字母的问题，但没有门槛。
它在不同的屏幕阅读器之间有所不同，并且可能归结为使用哪种语音（或文本到语音引擎）。大写的单词可以在一个屏幕阅读器中拼出，然后由另一个屏幕阅读器宣布为单词。大多数开发人员都不必担心。
某些屏幕阅读器使用不同的大写方式，例如宣布“上限”或更改音高。
某些屏幕阅读器会提供用户设置。我认为，这是开发人员避免对屏幕阅读器体验进行微观管理的主要原因-我们可能会无意中妨碍用户的偏好。
随着语音引擎和辅助技术的发展，所有这些都可能在将来发生变化。今天尝试控制公告可能会在几年后干扰辅助技术功能。 WCAG guideline 4.1指出：“最大限度地提高与当前和将来的用户代理（包括辅助技术）的兼容性” （重点是我的）。我将其解释为意味着短期内不应该尝试对这样的小怪癖进行微观管理。

一些答案建议使用CSS text-transform: uppercase。这是一个好方法，但是在不同的屏幕阅读器之间也存在不一致之处。在理想的世界中，原始文本和文本转换都可以传递给辅助技术，以便为语音引擎提供更好的信息，同时也尊重用户的喜好。我们尚不存在，但正在由浏览器实现者进行讨论-有关更多详细信息，请参见Chromium错误跟踪器中的讨论：Honouring text-transform styles in the a11y tree?

另一种建议的技术是使用小写的aria-label复制可见文本，但是强制浏览器将小写的版本传递给辅助技术。例如<button aria-label="add money">ADD MONEY</button>。在许多情况下，这可能效果很好，但这是开发人员如何获得用户偏好的示例。例如，希望其屏幕阅读器更改大写的语音提示的用户会在这里错过。屏幕阅读器的主要工作是传达屏幕上的内容（包括大写字母）。我认为小写的aria-label技术与此不符。

关于全大写的讨论（在Drupal CMS问题中）来自屏幕阅读器用户一些有趣的贡献： Readability problem with all-caps text in core themes。

Answer 2

将标记保留为小写，但使用CSS只能通过text-transform在视觉上将文本更改为大写。

然后添加aria-label中的"add money"。

h1 {
  text-transform: uppercase;
}

<h1 aria-label="add money">add money</h1>

VoiceOver大写的小词被视为缩写

2 个答案: