ARIA组合框的IE兼容标记

Question

我正在寻找一种让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模式,直到看了几天并试验了几天之后,我已经准备好承认IE太麻烦了,无法使组合工作可靠.或者它可能不是IE本身,而是本评论中建议的MSAA/UIA桥.这也可能是真的,因为我发现至少有一个ARIA属性的组合似乎在IE8/XP中使用JAWS(使用MSAA),但在IE11/Win7中没有使用JAWS(MSAA/UIA).

标记可以在某种程度上改变; 我不能改变的是包装元素,如存在bodyEl,triggerWrap和inputWrap.这些元素是应用相关CSS类,在输入验证失败时呈现错误指示符元素等所必需的.

另一个约束是listbox元素在组件元素之外呈现.这可以改变但不容易; 同时将它渲染到输入旁边似乎没有任何帮助.值得一提的是,列表本身是在第一次展开时动态呈现的,aria-owns事后添加了属性.

到目前为止我尝试了什么:

• 放置role="combobox"在外部元素上.没有做任何有用的事情,组合不被认可.

• 放置role="combobox"和相关属性inputWrap.这样,当输入被直接聚焦时,IE将宣布"选择编辑组合"; 当从另一个元素进行制表时,它将与组合标签一起宣布该元素的角色.相当有趣但不是很有帮助.

• 放置role="combobox"在triggerWrap和分配role="button"到触发伪按钮.从理论上讲,这应该接近第一种设计模式,但组合不是这样认可的.

• 许多其他ad-hoc组合,其中大部分我不记得了.

唯一的准工作方式正在对组合框的作用inputWrap 和作出inputWraptabbable而不是实际的投入.这与此示例中的标记相对应,该标记似乎或多或少地与IE/JAWS一起使用; 然而这个解决方案是非常不受欢迎的,因为它打开了Pandora的盒子,里面装满了毛茸茸的焦点管理错误.

遗憾的是,辅助功能检查工具在这种情况下并不完全有用,因为我需要的是现有实现中的错误的解决方法,而不是更严格的标准合规性.

更好理解的另一个障碍是WAI-ARIA规范中的模糊性.例如,对于第一个模式,需要"组合框内的第一个元素是输入文本字段".这是指第一个结构元素(即非表示元素)还是绝对第一个子元素？除非包装器<div role="combobox">是可列表的,否则以任何一种方式修改标记似乎对IE没有任何影响.

很抱歉,如果这篇文章看起来更像是一个咆哮;)但它实际上是一个问题:有没有办法通过将ARIA属性应用于我们现有的标记元素来解决IE缺陷？如果没有,可以改变什么来使它工作(禁止表格包装)？以及最终的奖励积分,以了解为什么这不能按预期工作.

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

更新:这是一个小例子.请注意如何在Firefox中正确公布组合,但它只是在IE11中"编辑"(使用JAWS 16测试).为了使用屏幕阅读器获得更好的效果,我建议使用" 共享"菜单中的"在小提琴外打开"选项.

Answer 1

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

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