为文本框指定屏幕阅读器公告

Question

在花了几个小时寻找解决方案并阅读了类似问题后，我发布了一个新问题。

使用 NVDA，当文本框获得焦点时，会读取标签 (Organization)，然后读取 aria- describeby 内容 (200 West Street, New York, NY)，然后读取值 (Goldman Sachs)：

<label for="organization">Organization</label>
<input type="text" id="organization" value="Goldman Sachs" aria-describedby="organizationLocation" />
<span id="organizationLocation">200 West Street, New York, NY</span>

出于显而易见的原因，在这种情况下，最好先读取标签（组织），然后读取值（Goldman Sachs），然后读取 aria- describeby 内容（200 West Street, New York, NY）。

我也尝试从 aria- describeby 属性中引用文本框，尽管文本框 (Goldman Sachs) 的值是重复的，在标签 (组织) 和组织位置之后宣布一次：

<label for="organization">Organization</label>
<input type="text" id="organization" value="Goldman Sachs" aria-describedby="organization organizationLocation" />
<span id="organizationLocation">200 West Street, New York, NY</span>

实现所需功能有多难？

Answer 1

您通常不希望指定屏幕阅读器将如何宣布元素。不同的屏幕阅读器可能会以不同的方式宣布内容。您是否使用 JAWS 或 VoiceOver (Mac) 进行了测试以听到命令？

除了角色和价值之外，元素还可以有一个“可访问的名称”和“可访问的描述”。 （参见WCAG 4.1.2 和“Accessible Name Computation”）。名称和值通常先宣布，然后是描述，尽管正如您所指出的，您听到的是描述之后的值。这正是 NVDA 选择宣布它的方式，并将成为 NVDA 用户的预期订单。如果您更改该顺序，可能会使 NVDA 用户感到困惑。