让 JAWS 宣布尊重其角色的非重点元素

Question

我正在寻找一种方法来让 JAWS（可能还有其他屏幕阅读器）宣布未聚焦的元素。我有一个contenteditable 区域，在输入某些字符后会打开自动完成/建议面板。焦点停留在contenteditable 内，以便在面板打开时进一步键入以显示可能的建议。 JAWS 不会宣布面板外观，因为它没有聚焦。 如果将焦点强制放在面板上，JAWS 会正确宣布 (role="listbox")，但它当然会破坏自动完成功能。

我创建了一个非常简单的示例来说明问题：

var editable = document.querySelector('#editable'),
  list = document.querySelector('#list'),
  counter = 0;

editable.addEventListener('keypress', function(evt) {
  counter++;
  if (counter > 5) {
    list.style.display = 'block';
    list.setAttribute("aria-expanded", true);
    // Focusing list works fine and JAWS announces everything correctly, but then the contenteditable loses focus and typing cannot be continued which is crucial for autocompleting functionality.
    setTimeout( function() { list.focus() }, 0 ); // Comment out this line to see/hear the difference.
  }
});

div {
  width: 400px;
  height: 300px;
  border: 1px solid #000;
}

.autocomplete_panel {
  position: absolute;
  display: none;
  box-sizing: border-box;
  width: 200px;
  max-height: 300px;
  overflow: auto;
  padding: 0;
  margin: 0;
  list-style: none;
  background: #FFF;
  border: 1px solid #b6b6b6;
  border-bottom-color: #999;
  border-radius: 3px;
  font: 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
}

#label_00 {
  display: none;
}

<div role="application">

  <div contenteditable="true" id="editable">
    Type sth to show panel...
  </div>

  <ul id="list" tabindex="-1" role="listbox" aria-labelledby="label_00" class="autocomplete_panel" style="z-index: 9997; left: 150px; top: 20px;">
    <li data-id="1" role="option" aria-posinset="1" aria-setsize="4">Item 1</li>
    <li data-id="2" role="option" aria-posinset="2" aria-setsize="4">Item 2</li>
    <li data-id="3" role="option" aria-posinset="3" aria-setsize="4">Item 3</li>
    <li data-id="4" role="option" aria-posinset="4" aria-setsize="4">Item 4</li>
    <li aria-hidden="true" id="label_00">Autosuggestion panel</li>
  </ul>

</div>

JSfiddle 版本：https://jsfiddle.net/f1ames/op15mm8z/.

我正在考虑但并不完美的一些解决方案：

1. 使用带有 aria-live 和动态文本的隐藏跨度（与原生 JAWS 公告类似/相同的文本）：

   • 屏幕阅读器之间的不一致（不同屏幕阅读器中listbox 的公告不同）
   • 不会基于屏幕阅读器语言（应该）
   • 不灵活（JAWS 可能有不同的设置，因此公告可能会有所不同 - 原生 JAWS 公告会更好）

2. 聚焦自动完成面板：

   • 应该仍然支持在 contenteditable 内输入，这可能非常棘手，尤其是对于某些 unicode 字符和组合而言
   • 当焦点回到contenteditable 时，自动完成通知将被中止

3. 提供 aria-markup 以使 JAWS 正确宣布自动完成面板：

   • aria-live 和 aria-atomic 在某种程度上可以工作，但不支持 role。 JAWS 仅将 aria-labelledby 元素或列表项读取为纯文本（aria-atomic='true/false' 的差异）

所以目前我不知道有什么方法可以让 JAWS 以与焦点相同的方式宣布未聚焦的元素。有什么想法吗？

顺便说一句。自动完成的咏叹调做法：https://www.w3.org/TR/wai-aria-practices/#autocomplete.

Answer 1

您需要使用两个 aria 属性来实现这一点。
1. 咏叹调拥有
这个属性应该有列表框的id，应该有role="listbox"
2. aria-activedescendant
此属性应为列表框中列表项的 id，其应具有 role="option"


示例代码：
https://github.com/senthilshanmugam/a11yTypeAhead
演示：
http://a11ywidgetsdemo.azurewebsites.net/#/a11yTypeAhead



在下面的代码示例中，属性 aria-owns 具有列表框的 ID (AutoSuggestion-list)，其中角色 =“listbox”，而 aria-activedescendant 具有 ID ( AutoSuggestion-item-1) 的列表框中的列表项，角色="option"。该项目是当前选中的项目，由 class="selected" 属性指示

当用户更改选择时，aria-activedescendant 中的值应指向列表项的适当 id，例如 AutoSuggestion-item-2

<input id="auto-complete" type="text" aria-expanded="true" 
  aria-labelledby="List-label" aria-owns="AutoSuggestion-list" 
  aria-activedescendant="AutoSuggestion-item-1">

<ul id="AutoSuggestion-list" tabindex="-1" role="listbox">
  <li id="AutoSuggestion-item-0" role="option" aria-label="Malaysia">Malaysia</li>
  <li id="AutoSuggestion-item-1" role="option" class="selected" aria-label="Maldives">Maldives</li>
  <li id="AutoSuggestion-item-2" role="option" aria-label="Myanmar (Burma)">Myanmar (Burma)</li>
  <li id="AutoSuggestion-item-3" role="option" aria-label="Oman">Oman</li>
</ul>