ARIA 组合框的 IE 兼容标记

Posted 2023-05-07

【中文标题】ARIA 组合框的 IE 兼容标记

【英文标题】：IE compatible markup for ARIA combobox

【发布时间】：2015-11-28 16:09:18

【问题描述】：

我正在努力寻找一种使 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 会在输入直接聚焦时提示“Choose edit combo”；当从另一个元素切换时，它将宣布该元素的角色，以及组合标签。很有趣，但不是很有帮助。

将role="combobox" 放在triggerWrap 上并将role="button" 分配给触发伪按钮。理论上这应该接近第一个设计模式，但组合不被识别为这样。

许多其他的临时组合，其中大部分我已经不记得了。

唯一的准工作方式是将组合框角色放在inputWrap 和 使inputWrap 可选项卡而不是实际输入。这与this example 中的标记相对应，似乎或多或少与 IE/JAWS 一起使用；然而这个解决方案是非常不可取的，因为它打开了潘多拉的盒子，里面装满了非常多毛的焦点管理错误。

不幸的是，可访问性检查工具在这种情况下并不完全有用，因为我需要的是针对现有实现中的错误的解决方法，而不是更严格的标准合规性。

更好理解的另一个障碍是 WAI-ARIA 规范中的歧义。例如，对于第一个模式，要求“组合框中的第一个元素是输入文本字段”。这是否意味着第一个 structural 元素（即非展示性），或者绝对是 first 子元素？以任何一种方式修改标记似乎对 IE 没有任何影响，除非包装器 <div role="combobox"> 是可选项卡。

对不起，如果这篇文章看起来更像是一个咆哮；）但它实际上是一个问题：有没有办法通过将 ARIA 属性应用于我们现有的标记元素来解决 IE 缺陷？如果没有，可以改变什么来使它工作（禁止标签包装器）？以及深入了解为什么这没有按预期工作的最终奖励积分。

我将不胜感激任何提示和建议。我非常担心我们的组合在 IE 中无法完全访问，如果可能的话，我想解决这个问题。我仍然有一个微弱的希望，那里的某个人可能拥有一个秘密成分配方，让 IE 和 JAWS 彼此满意。 ;)

更新：这是example fiddle。请注意如何在 Firefox 中正确宣布组合，但它只是在 IE11 中“编辑”（使用 JAWS 16 测试）。为了更好地使用屏幕阅读器，我建议使用共享菜单中的Open outside of Fiddle 选项。

【问题讨论】：

你能提供一个jsFiddle吗？

@BasvanStein 用小提琴更新，见上文。不能为此使用 jsFiddle，因为他们没有最新的 Ext JS，但 Sencha Fiddle 也应该可以工作。

【参考方案1】：

对于我们的自定义组合框小部件，我也遇到了同样的问题。我发现，如果您将输入字段标记为只读并在输入字段上使用 role="combobox"，那么 IE 上的 JAWS 会将其读取为组合框。此解决方案存在一些问题，例如普通用户无法键入文本来过滤组合框。

【讨论】：

救命稻草！ ----

【参考方案2】：

在尝试在各种浏览器中迎合 JAWS 和 NVDA 时，我也遇到了各种各样的问题。我们通过使用 aria- describeby 属性多次解决了这个问题。当焦点位于元素上时，屏幕阅读器将（在大多数情况下）准备好通常隐藏在视图之外的相应文本。

这是它的规格。 https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html