指定 aria-label 和 title

Question

我有一个input我想为其提供一个可访问的标签以及一个默认的工具提示。

根据我的研究，这是我的理解：

• title 仅凭可访问性是不够的。
• aria-label 不会显示工具提示
• 指定两者aria-label并title可能导致某些屏幕阅读器同时阅读两者。

有没有更好的方法来实现这一目标？

Answer 1

严格来说，最好的方法是在label元素上使用可见标签，因为这使得输入更容易与语音控制一起使用。（语音控制是 WCAG 2.1 引入SC 2.5.3 的原因：“对于带有包含文本或文本图像的标签的用户界面组件，名称包含视觉呈现的文本。”但是，该 SC 不需要可见标签。）

如果你不想要一个可见的标签，你需要了解“可访问名称计算”的优先规则。WAI-ARIA 1.1包含一些关于此的基本信息：

name 来自作者在显式标记特性中提供的值，例如aria-label属性、aria-labelledby属性或宿主语言标记机制，例如HTML 中的alt或title属性，其中 HTML 标题属性具有最低优先级指定文本替代。

这意味着您应该期望屏幕阅读器读出该aria-label属性的值，而不是（而不是除了）该title属性的值。title正如预期的那样，工具提示只会显示属性的内容（但屏幕阅读器不会使用鼠标，除非他们有一些残留的视觉）。

由于 WAI-ARIA 1.1 中的可访问名称计算算法有点短，W3C 正在 GitHub 上目前提供的草案规范中研究更详细的算法。请参阅HTML Accessibility API Mappings 1.0 中的第 5.1.1 段

但是，与此问题相关的官方规范目前是 WAI-ARIA 1.1（上文引用）和2018 年 12 月的可访问名称和描述计算 1.1。