标签: wai-aria

背景：教育电子书 (HTML + CSS) 出版

我有一个作文标题，其中有这样的句子：

<p>This is <del>correct</del> <ins>incorrect</ins></p>

重要的是，用户知道某些文本正在被删除以及某些文本正在被插入。我还有一个相关的场景，其中文本应用了具有语义意义的突出显示。例如：

<p>This is an <span class="highlight-blue">adjective</span> and this is a <span class="highlight-red">noun</span>. </p>

无障碍顾问建议我在这些情况下使用 role="region" + aria-label 。

例如：

<p>This is an <span role="region" aria-label="adjective" class="highlight-blue">adjective</span> and this is a <span role="region" aria-label="noun" class="highlight-red">noun</span>. </p>

这里的灵活性是必要的，因为我们为所有标题使用标准 CSS，有时突出显示的红色可能表示被动语态，或者可能表示名词等。

我在本网站的其他问题中看到不允许在 span （或 div ）元素上使用 aria-label 。同样使用 Chromevox，我发现读者会读取 aria 标签，但不会读取 aria 标签内的文本。（我无法访问其他屏幕阅读器进行测试。）

所以我的问题是：让屏幕阅读器用户读取这些内联元素的语义的最佳方法是什么？

不可行的选择

CSS 隐藏的伪元素。我见过一些解决方案，您可以创建一个伪元素，然后使用 CSS 将其隐藏在屏幕外。当您隐藏屏幕外的内容时，Kindle 会遇到问题，在屏幕外的内容后面丢弃大块文本，因此这不是一个可行的选择。

我一直在试图找出如何将屏幕阅读器焦点限制在某个区域内。当我说屏幕阅读器焦点时，我并不是指可以通过 Tab 键/Shift-Tab 键移动的默认浏览器焦点。我主要在 Mac 上使用 Voiceover 时实现辅助功能，当您打开它时，页面上会出现一个新的焦点框，并读出它“突出显示”的信息。

此时，如果您要按 Tab 键，浏览器和屏幕阅读器焦点会同时移动。除了按 Tab 键切换到不同的可聚焦元素之外，您还可以按住 cmd + opt 并左右按键将屏幕阅读器焦点从一个元素移动到另一个元素，无论是否可以按 Tab 键切换到某个元素。这就是我试图控制的焦点。

当焦点位于我想要聚焦的最后一个元素上时，我尝试阻止按下 cmd、opt 和箭头键，但浏览器似乎无法识别屏幕阅读器焦点。而且我相信键盘禁用无论如何都不适用于屏幕阅读器，因为它似乎独立于浏览器工作。

我还尝试在模式出现时向页面上的所有其他元素动态添加 tabindex: -1 和 aria-hidden: true 。当您在事后打开 Voiceover 时，此功能有效；屏幕阅读器焦点实际上确实被困住了。但是，如果屏幕阅读器首先打开（在大多数用户实例中可能会出现这种情况），则屏幕阅读器不会考虑动态更改。这就像屏幕阅读器在页面加载时拍摄可访问性状态的“快照”，并且不考虑对 DOM 的新更改。

有人有主意吗？

关于使类似以下内容可访问，目前我有以下内容：

<div tabindex="0" aria-labelledby="key1" aria-describedby="value1">
    <label id="key1">Current User:</label>
    <span id="value1">BBRENNAN</span>
</div>

该块是否需要通过 进行聚焦tabindex="0"？或者屏幕阅读器可以更自然地推断出这种关系吗？我知道屏幕阅读器通常可以查找和阅读文本，但我不清楚如何确保传达 和 之间的Current User关系BBRENNAN。

编辑：我只是在研究定义列表，这似乎更接近我需要的。您可能还认为这是表格数据，应该使用表格。如果这些解决方案确实是最佳实践，那完全没问题，但我喜欢的一件事aria-labelledby是aria-describedby，聚焦外部 div 在 NVDA 中可以很好地读取整个内容。因此上面的内容将显示为“当前用户，BBRENNAN”。

由于某种原因，定义列表读作“包含 2 个项目的列表，当前用户”。表格只是让我使用箭头键在单元格之间移动阅读器，这也无法实现我上面描述的目的。关于这个主题的 5 年前的帖子链接：https://webaim.org/discussion/mail_thread ?thread=7089

我正在实现一个搜索框。其中一种情况是必须公布结果总数。为了实现这一目标，我将<p>标签放在一个区域内aria-live，并按预期宣布它。

预期场景：

用户输入一个字符串 --> 点击 Enter --> 显示结果并宣布字符串。

边缘情况是用户按 Enter 两次。

如果用户在没有任何更改的情况下再次按 Enter 键，则不会更新任何内容，因为计数仍然相同并且不会宣布任何内容。

我尝试在输入单击时使用它：

if (document.getElementById("header")) {
  const currentText: string = document.getElementById("header").innerHTML;
  document.getElementById("search-header").innerHTML = "";
  document.getElementById("search-header").innerHTML = currentText;
}

但是，它仍然没有宣布。

还有其他方法可以实现此目的吗？

免责声明：我知道它不是有效的 HTML。我想了解为什么不允许？

W3C 建议交互元素button不得a包含其他交互元素。

我可以找到很多提到此规则和一些解决方法的资源，还有一些与此规则如何影响可访问性和屏幕阅读器相关的资源，但几乎所有这些资源都讨论了这是一个要求这一事实，但没有解释原因。

https://adrianroselli.com/2016/12/be-wary-of-nesting-roles.html

https://codepen.io/vloux/pen/wXGyOv

在 <button> 内嵌套 <a> 在 Firefox 中不起作用

https://github.com/dequelabs/axe-core/issues/601

我真的无法找到为什么不允许这样做的解释？它会导致任何可用性问题吗？

这是一个相关的问题： 为什么不应在锚点内使用交互元素？

接受的答案是令人满意的，但不足以使该规则成为一项要求。使用正确的事件处理可以避免所描述的情况。

另外，如果嵌套的交互式内容无效，我们应该如何拥有这样的内容：

整体可点击的卡片，并且内部还有可点击的辅助 CTA。我知道解决方法是在卡内设置主要和次要 CTA，但上述内容是否也应该被允许？

这是一个小提琴： https: //jsfiddle.net/t9qbwas5/2/

<button type="button" class="card">
  The card itself is the primary CTA.
  <br/>
  <br/>
  some important content to read through.
  some important content to read through.
  some important content to read through.
  <div class="cta">
   Secondary CTA
  </div>
</button>

.cta {
  padding: 4px;
  background: #00a9a9;
  color: white;
  width: 80px;
  margin: auto;
  margin-top: 8px; …

我们正在我们的一个项目中使用反应选择组件并尝试解决可访问性问题。目前，无法向具有 aria-autocomplete="list" 属性的输入元素提供所需的 aria 属性。

https://www.digitala11y.com/aria-autocomplete-properties/

上面是我们想要实现的目标的参考链接。以下是上述链接中的短篇故事。

If an element has aria-autocomplete set to list or both, authors MUST ensure both of the following conditions are met:

The element has a value specified for aria-controls that refers to the element that contains the collection of suggested values.
Either the element or a containing element with role combobox has a value for aria-haspopup that matches the role of the element that contains the collection of suggested values.

我打开了一个 PR，以添加将 ARIA 属性添加到输入元素的功能。 …

我知道 aria-label 和 aria-labelledby 之间的区别，但是下面这些之间有什么区别，以及何时使用其中一个？

代码来自react-testing-library

// first
<label for="username-input">Username</label>
<input id="username-input" />

// second
<label id="username-label">Username</label>
<input aria-labelledby="username-label" />

对于第一个，根据mdn文档

标签文本不仅在视觉上与其相应的文本输入相关联，而且在视觉上也与其相应的文本输入相关联。它也以编程方式与之关联。...您可以单击关联的标签来聚焦/激活输入以及输入本身。

但第二个不为浏览器用户提供该功能，因为它只是用于辅助功能的 ARIA 属性。

我还检查了 chrome devtools - accessiblity，我发现第一个和第二个的计算属性都显示输入和标签彼此关联。

因此，据我了解，第一个为用户提供了编程访问权限，但第二个没有，并且屏幕阅读器可以正确访问第一个和第二个。

第二个是第一个的子集吗？那么下面的代码是否无效模式，因为第一个是第二个的超集？

<label id="username-label" for="username-input">Username</label>
<input id="username-input" aria-labelledby="username-label" />

谢谢。

我正在网络上运行一个小游戏。为了使其能够以最佳方式通过屏幕阅读器访问，传入的消息（可以是关于游戏内操作或用户文本聊天的消息）必须在到达后立即自动阅读。

消息的读取必须快速，但也必须可靠。消息必须按顺序阅读，不得过早中断或完全跳过。否则，玩家可能会错过重要的事件或信息。有时，消息以相当高的频率和/或突发到达。无论如何，它们都必须按顺序、不间断地阅读。

由于消息到达太快，用户可能无法跟上。在这种情况下，他/她通常会按闭嘴键，通常是 Ctrl 键。这通常会立即停止讲话并丢弃所有排队的消息。屏幕阅读器本身不应在没有用户干预的情况下确定是否可以安全地删除消息。某些屏幕阅读器提供第二个选项来跳过当前消息并直接转到下一条消息，例如使用 NVDA 进行 Shift。所有屏幕阅读器用户都熟知这些快捷方式。

不幸的是，所有这些都只是理论，在实践中，我很难找到一种在任何地方都有效的方法。

最有问题的情况是 Mac 上的 VoiceOver，它似乎总是在新消息到达时立即中断当前正在朗读的消息（就好像该区域是自信的而不是礼貌的，这是不希望的），或者决定跳过消息随机。

我目前有 7 个演示页面，我在其中尝试使用礼貌 ARIA 实时区域的不同方式，这已经由我和我的小团队使用尽可能多的浏览器、设备和屏幕阅读器组合进行了测试。下面您将看到我迄今为止的发现。

你能推荐一些在任何地方都适用的东西吗？特别是，您能否为 Mac 上的 VoiceOver（这似乎是最有问题的）找到一个可行的解决方案？

当然，如果没有通用的解决方案，总是可以进行用户代理检测，但最好避免它。

提醒一下，这是一个游戏，所以要求很高：消息必须按顺序读取，不能中断（除非用户需要），不能跳过，即使消息快速到达。由于我们不希望受到任何打扰，因此自信而不是礼貌并不是解决方案。

迄今为止的进展

以下是迄今为止尝试过的不同技术：

1. 单区，附加 p
2. 单区、附加跨度
3. 单区，附加div
4. 单区域，使用 insertAdjacentHTML
5. 单区，使用innerHTML替换
6. 每条消息的新活动区域
7. 循环赛 10
8. Role=log 的单区域

以下是当前结果：

我很好奇<span>read me on load</span>当页面被加载时,推动屏幕读取首先读取的正确方法(它位于html页面的中间)是什么？甚至

role="rude"

由于某种原因没有帮助.

谢谢.

我有一个angular2应用程序,我将一些动态文本绑定到ARIA-LABEl以获得嵌套的DIV.但是当我使用JAWS阅读器在页面上找到DIV时,它并没有读取指定的文本.这是我试图阅读的文本 - attr.aria-label ="{productDetails？.ProductName}}的产品详细信息"

此外,如果我给这个div指定一个标题角色,它会读取动态文本,但不会在文本前面加上"产品详细信息"的前缀

<div [ngClass]="getDescClass()" class="prdDetails-div" aria-label="some text">
<div autofocus attr.aria-label="Product details for {{productDetails?.ProductName}}" class="productDetails-name" style="cursor:default!important" role="heading" >{{productDetails?.ProductName}}   </div>
        <div autofocus class="products-result-compare">
            <!--{{getDescription(productDetails?.Description)}}-->
            Small description
        </div>