0

我正在尝试使具有 WAI-ARIA 属性的残障用户可以访问来自richfaces 的丰富：选择组件（启用手动输入）。我直接在 SelectRenderer.java 类中添加属性。我在用：

  • IE9（这是我们必须使用的浏览器）
  • RichFaces 4：特别丰富：启用手动输入的选择
  • 大白鲨 15.0

呈现的 rich:select 的当前 HTML 结构如下所示（已包含我的更改）：

<div id="registration:persondata:gender" class="rf-sel" aria-labelledby="registration:persondata:genderLabel" role="combobox">
    <span class="rf-sel-cntr">
        <input id="registration:persondata:genderselValue" type="hidden" name="registration:persondata:gender" value="">
        <input id="registration:persondata:genderInput" class="rf-sel-inp rf-sel-dflt-lbl" type="text" onclick="document.getElementById(this.id).select();" name="registration:persondata:genderInput" aria-activedescendant="registration:persondata:genderItem0" aria-owns="registration:persondata:genderItems" aria-autocomplete="list" autocomplete="off" title="" customtitle="true">
        <span id="registration:persondata:genderButton" class="rf-sel-btn">
            <span class="rf-sel-btn-arrow"></span>
        </span>
    </span>
    <div id="registration:persondata:genderList" class="rf-sel-lst-cord">
        <div class="rf-sel-shdw">
            <div class="rf-sel-shdw-t"></div>
            <div class="rf-sel-shdw-l"></div>
            <div class="rf-sel-shdw-r"></div>
            <div class="rf-sel-shdw-b"></div>
            <div class="rf-sel-lst-dcrtn">
                <div class="rf-sel-lst-scrl" style="min-height: 20px; width: auto; min-width: 307px;">
                    <div id="registration:persondata:genderItems" role="listbox">
                        <div id="registration:persondata:genderItem0" class="rf-sel-opt" title="Empty Entry" role="option"> </div>
                        <div id="registration:persondata:genderItem1" class="rf-sel-opt" title="male" role="option">m</div>
                        <div id="registration:persondata:genderItem2" class="rf-sel-opt" title="Undescribed" role="option">u</div>
                        <div id="registration:persondata:genderItem3" class="rf-sel-opt" title="Female" role="option">f</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

以下更改和属性我已经实现：

  • 每当 ItemsList 弹出时，不可见的 HTML 项目列表将变得可见并移动到 HTML 文档的末尾。我删除了这个元素的移动到底部，所以现在它和上面的结构一样保持在同一个地方（其他一切都很好）
  • 第一个包含 Input、Button 和 Items-Container 的 DIV Container 接收角色“combobox”和 aria-labelledby="IDofLabel" 属性

输入收到以下更改：

  • aria-activedescendant="IDofRandomItem"：请注意，如果我省略此属性，除了“这是一个输入”之外，我不会从 JAWS 得到任何响应。有了这一行（以及一个有效的项目 ID 作为值），我至少得到一个响应，上面写着“这是一个选择菜单”，它工作正常。但这应该是组合框响应！
  • aria-owns="包含子项的元素的 ID"
  • aria-autocomplete="list" ：因为我希望这个被识别为 ComboBox。

包含项目以及项目的元素具有以下更改：

  • role="listbox" 包含项目的元素被引用为列表框
  • role="option" 每个项目都接收到此角色以被识别为实际项目。

如前所述，我确实得到了“选择菜单”响应，但没有得到我想要的“组合框、使用箭头键选择或键入”响应。顺便说一句：当我将 tabindex="0" 添加到包含组合框角色的第一个 DIV 时，我确实得到了所需的响应，但它关注的是整个容器而不是输入。因此，如果我在此阶段按 Tab，则焦点将进入我的实际输入，将其作为输入读取。如果我尝试将组合框角色添加到 Input-Element 而 JAWS 仍然识别出这是一个选择菜单。

任何帮助，将不胜感激。

4

0 回答 0