WCAG - Screen Reader NVDA 读取占位符信息
WCAG - Screen Reader NVDA reading placeholder information
我在使用屏幕 reader (NVDA) 读取占位符信息时遇到了一个问题。
我输入了标题和占位符。屏幕先读占位符再读标题：
<div>
<input type='text' placeholder='DD.MM.RRRR' title='Insert date correctely in the format DD.MM.RRRR' />
</div>
根据网络提供的信息，NVDA 不应首先读取占位符，它应该仅用于视觉目的。我已经使用 aria-describedby 和 aria-placeholder.
尝试了一些解决方法
基本问题是如何使屏幕 readers 的占位符不可见？
屏幕 readers 将在字段为空时读取占位符属性。
这是支持占位符的屏幕 reader 中的预期行为。
我认为混淆来自建议不要使用占位符 而不是 标签。
原因是一旦该字段在很多屏幕中填写 readers 将不会读取占位符（因为它不再显示）因此已完成的字段不再具有可以被屏幕读出reader。 （加上可见的标签可以帮助有认知障碍的人等）
所以假设在生产中你有一个可见的 <label> 并且与你的 <input> 正确关联，那么你不需要在这里做任何事情。
除了 @GrahamRitchie 所说的，请记住所有交互元素都有一个“可访问的名称”和 一个“可访问的描述”。虽然您可以更改屏幕 reader 设置以关闭描述（有时在屏幕 reader 设置中称为“提示”），但两者通常都由屏幕 reader 宣布。
How the accessible name and description are computed 可以非常方便地理解这种情况。有一个属性的优先列表，检查这些属性以计算名称和描述。一旦找到一个属性，优先列表中的其余项目将被忽略。基本上是这样的：
- aria-labelledby
- aria-label
- 占位符属性或
<label>元素
- 其他东西
- 标题属性
因此，如果您同时具有 aria-labelledby 属性和 <label> 元素，则只会使用 aria-labelledby 属性，因为它具有更高的优先级。标签将被忽略。
也就是说，由于您的原始代码有一个没有标签的 <input>，因此可访问名称使用了占位符属性。如果您将代码更改为具有 <label>，则标签的优先级将高于占位符，对于可访问的名称 ，占位符将被忽略 。但是，可以考虑将占位符用于可访问的描述。
您可以在 Chrome 的辅助功能检查器中看到它。在通常显示CSS的面板中，有一个“辅助功能”选项卡（通常隐藏在“>>”菜单中）。
显示辅助功能属性有助于理解屏幕上正在播报的内容 reader。
注意“名称”（可访问的名称）是“DD.MM.RRRR”，它表示它来自占位符属性。它还说“描述”（这是可访问的描述）是“正确插入日期...”，它来自 title 属性（但该工具不会告诉您哪个属性有助于访问描述).
如果您的 <input>
有一个 <label>
<label for="foo">date</label>
<input id="foo" type='text' placeholder='DD.MM.RRRR' title='Insert date correctely in the format DD.MM.RRRR' />
注意可访问名称的变化。不再使用占位符。描述保持不变。
话虽这么说，但仍有两点令人困惑。在步骤 D 中，accessible name calculation 表示如果有属性或元素提供替代文本，则使用它。但是他们给出的属性示例是 title。但是在步骤 I（眼睛）中，它说如果有工具提示属性，则使用它。那么，title 属性 是 工具提示属性，那么如果它要在步骤 I 中使用，为什么在步骤 D 中用作示例？我不知道，对不起。这是规范中的歧义。
而且只是为了增加混乱，即使 Chrome 显示可访问的描述是 title 属性，占位符仍然在描述之后读取，就好像它是描述的一部分一样，即使它没有显示为检查器中描述的一部分。我会认为这是一个错误。这是 Chrome 错误还是 NVDA 错误还有待确定。
我在使用屏幕 reader (NVDA) 读取占位符信息时遇到了一个问题。
我输入了标题和占位符。屏幕先读占位符再读标题：
<div>
<input type='text' placeholder='DD.MM.RRRR' title='Insert date correctely in the format DD.MM.RRRR' />
</div>
根据网络提供的信息，NVDA 不应首先读取占位符，它应该仅用于视觉目的。我已经使用 aria-describedby 和 aria-placeholder.
尝试了一些解决方法基本问题是如何使屏幕 readers 的占位符不可见？
屏幕 readers 将在字段为空时读取占位符属性。
这是支持占位符的屏幕 reader 中的预期行为。
我认为混淆来自建议不要使用占位符 而不是 标签。
原因是一旦该字段在很多屏幕中填写 readers 将不会读取占位符（因为它不再显示）因此已完成的字段不再具有可以被屏幕读出reader。 （加上可见的标签可以帮助有认知障碍的人等）
所以假设在生产中你有一个可见的 <label> 并且与你的 <input> 正确关联，那么你不需要在这里做任何事情。
除了 @GrahamRitchie 所说的，请记住所有交互元素都有一个“可访问的名称”和 一个“可访问的描述”。虽然您可以更改屏幕 reader 设置以关闭描述（有时在屏幕 reader 设置中称为“提示”），但两者通常都由屏幕 reader 宣布。
How the accessible name and description are computed 可以非常方便地理解这种情况。有一个属性的优先列表，检查这些属性以计算名称和描述。一旦找到一个属性，优先列表中的其余项目将被忽略。基本上是这样的：
- aria-labelledby
- aria-label
- 占位符属性或
<label>元素 - 其他东西
- 标题属性
因此，如果您同时具有 aria-labelledby 属性和 <label> 元素，则只会使用 aria-labelledby 属性，因为它具有更高的优先级。标签将被忽略。
也就是说，由于您的原始代码有一个没有标签的 <input>，因此可访问名称使用了占位符属性。如果您将代码更改为具有 <label>，则标签的优先级将高于占位符，对于可访问的名称 ，占位符将被忽略 。但是，可以考虑将占位符用于可访问的描述。
您可以在 Chrome 的辅助功能检查器中看到它。在通常显示CSS的面板中，有一个“辅助功能”选项卡（通常隐藏在“>>”菜单中）。
显示辅助功能属性有助于理解屏幕上正在播报的内容 reader。
注意“名称”（可访问的名称）是“DD.MM.RRRR”，它表示它来自占位符属性。它还说“描述”（这是可访问的描述）是“正确插入日期...”，它来自 title 属性（但该工具不会告诉您哪个属性有助于访问描述).
如果您的 <input>
<label>
<label for="foo">date</label>
<input id="foo" type='text' placeholder='DD.MM.RRRR' title='Insert date correctely in the format DD.MM.RRRR' />
注意可访问名称的变化。不再使用占位符。描述保持不变。
话虽这么说，但仍有两点令人困惑。在步骤 D 中，accessible name calculation 表示如果有属性或元素提供替代文本，则使用它。但是他们给出的属性示例是 title。但是在步骤 I（眼睛）中，它说如果有工具提示属性，则使用它。那么，title 属性 是 工具提示属性，那么如果它要在步骤 I 中使用，为什么在步骤 D 中用作示例？我不知道，对不起。这是规范中的歧义。
而且只是为了增加混乱，即使 Chrome 显示可访问的描述是 title 属性，占位符仍然在描述之后读取，就好像它是描述的一部分一样，即使它没有显示为检查器中描述的一部分。我会认为这是一个错误。这是 Chrome 错误还是 NVDA 错误还有待确定。