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会将输入字段声明为＆＃34;编辑＆＃34;专注时。

在阅读WAI-ARIA Combobox pattern之后，直到看了几天并进行了实验，我已经准备好承认IE太麻烦了，无法使组合可靠地工作。或者它可能不是IE本身，而是this comment中建议的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就会宣布＆＃34;选择编辑组合＆＃34;当输入直接聚焦时;当从另一个元素进行制表时，它将与组合标签一起宣布该元素的角色。非常有趣，但不是很有帮助。
在role="combobox"上放置triggerWrap并将role="button"分配给触发器伪按钮。理论上，这应该接近第一个设计模式，但组合不被认为是这样。
许多其他临时组合，其中大多数我不再记得。

唯一准的工作方式是在inputWrap 上放置组合框角色，使inputWrap tabbable而不是实际输入。这与this example中的标记相对应，似乎或多或少地与IE / JAWS一起使用;然而，这个解决方案是非常不受欢迎的，因为它打开了Pandora的盒子，里面装满了非常毛茸茸的焦点管理错误。

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

更好理解的另一个障碍是WAI-ARIA规范中的含糊不清。例如，对于第一个模式，需要＆＃34;组合框中的第一个元素是输入文本字段＆＃34;。这是指第一个结构元素（即非表示性），还是绝对第一个子元素？除非包装器<div role="combobox">是可列表的，否则以任何一种方式修改标记似乎都没有任何区别。

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

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

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

Answer 1

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

Answer 2

在尝试迎合JAWS＆amp; S时，我也有各种各样的问题。各种浏览器中的NVDA。我们使用aria-describedby属性多次解决了这个问题。当焦点在元素上时，屏幕阅读器将（在大多数情况下）准备好相应的文本，这些文本通常是从视图中隐藏的。

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

ARIA组合框的IE兼容标记

2 个答案: