我正在努力寻找一种使 Ext JS Combobox 组件与 IE/JAWS 兼容的方法。目前我们正在使用以下标记:
<div role="presentation" id="combobox-1011">
<label id="combobox-1011-labelEl" for="combobox-1011-inputEl">
<span>Choose:</span>
</label>
<div id="combobox-1011-bodyEl" role="presentation">
<!-- This wraps both input and triggers -->
<div id="combobox-1011-triggerWrap" role="presentation">
<div id="combobox-1011-inputWrap" role="presentation">
<input id="combobox-1011-inputEl" type="text" name="choose"
role="combobox" aria-readonly="false"
aria-haspopup="true" aria-expanded="true"
aria-autocomplete="none" aria-owns="boundlist-1014-listEl"/>
</div>
<!-- Trigger element styled to look like a button -->
<div id="combobox-1011-trigger-picker"></div>
</div>
<!-- This is used to announce input validation errors -->
<div id="combobox-1011-ariaErrorEl" role="alert" aria-live="polite"></div>
</div>
</div>
<div id="boundlist-1014">
<div id="boundlist-1014-listWrap">
<ul id="boundlist-1014-listEl" role="listbox" aria-hidden="false">
<li role="option" tabindex="-1" aria-selected="true" id="ext-element-7">Option 1</li>
<li role="option" tabindex="-1">Option 2</li>
</ul>
</div>
</div>
这在带有 JAWS 和 NVDA 的 Firefox 中运行得相当好；但是，IE 中的 JAWS 会在聚焦时将输入字段宣布为“编辑”。
阅读后WAI-ARIA Combobox pattern直到斗鸡眼并尝试了几天，我准备承认 IE 的问题太多，无法使组合可靠地工作。或者它可能不是 IE 本身，而是 this comment 中建议的 MSAA/UIA 桥接器.这也可能是真的，因为我发现至少一种 ARIA 属性组合在带有 JAWS(使用 MSAA)的 IE8/XP 中运行良好，但在带有 JAWS(MSAA/UIA)的 IE11/Win7 中不起作用。
标记可以在一定程度上改变；我无法改变的是像
bodyEl 这样的包装元素的存在。 , triggerWrap , 和 inputWrap .这些元素对于应用相关的 CSS 类、在输入验证失败时呈现错误指示器元素等是必需的。另一个限制是
listbox元素呈现在组件元素之外。这可以改变，但不容易；也将它呈现在输入附近似乎根本没有帮助。值得一提的是，列表本身在第一次展开时动态呈现，aria-owns事后添加的属性。到目前为止我尝试过的:
role="combobox"在外部元素上。没有做任何有用的事情，组合不被认可。 role="combobox"和相关属性在 inputWrap .这样，当输入直接聚焦时，IE 将宣布“选择编辑组合”；当从另一个元素切换时，它将改为宣布该元素的角色以及组合标签。很有趣，但不是很有帮助。 role="combobox"在 triggerWrap并分配 role="button"到触发伪按钮。从理论上讲，这应该接近第一个设计模式，但组合不被认可。 唯一的准工作方式是在
inputWrap 上放置组合框角色。和制作 inputWrap tabbable 而不是实际的输入。这对应于 this example 中的标记似乎或多或少地与 IE/JAWS 一起工作；然而，这个解决方案是非常不受欢迎的，因为它打开了潘多拉的盒子，里面充满了非常毛茸茸的焦点管理错误。不幸的是，在这种情况下，辅助功能检查工具并不完全有用，因为我需要的是针对现有实现中的错误的解决方法，而不是更严格的标准合规性。
更好理解的另一个障碍是 WAI-ARIA 规范中的歧义。例如，对于第一个模式，要求“组合框中的第一个元素是输入文本字段”。这是否意味着第一个结构元素(即非表现性)或绝对第一个子元素？以任何一种方式修改标记似乎对 IE 都没有任何影响，除非包装器
<div role="combobox">是可制表的。对不起，如果这篇文章看起来更像是咆哮;) 但它实际上是一个问题:有没有办法通过将 ARIA 属性应用于我们现有的标记元素来解决 IE 的缺陷？如果没有，可以更改什么使其工作(禁止 tabbable 包装器)？以及深入了解为什么这不按预期工作的最终奖励积分。
我将不胜感激任何提示和建议。我非常担心我们的组合不能在 IE 中完全访问，如果可能的话，我想解决这个问题。我仍然有一个微弱的希望，有人可能拥有一个 secret 成分配方，让 IE 和 JAWS 彼此满意。 ;)
更新 : 这是一个 example fiddle .请注意如何在 Firefox 中正确宣布组合，但它只是在 IE11 中“编辑”(使用 JAWS 16 测试)。为了使用屏幕阅读器获得更好的结果，我建议使用 Open outside of Fiddle共享菜单中可用的选项。
最佳答案
对于我们的自定义组合框小部件，我也遇到了同样的问题。我发现如果您将输入字段标记为只读并在输入字段上使用 role="combobox"那么 IE 上的 JAWS 会将其读取为组合框。此解决方案存在一些问题，例如普通用户无法键入文本来过滤组合框。
关于html - ARIA 组合框的 IE 兼容标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32365206/