如何将aria组合框角色与网格元素一起使用?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将aria组合框角色与网格元素一起使用?相关的知识,希望对你有一定的参考价值。

我正在尝试制作一个可访问的日历插件,您可以在其中手动编写输入日期或从表格中选择日期。我正在使用WAI-ARIA,我认为我正确地遵循了说明,但Chrome开发者工具辅助功能审核给了我一个错误,如下所示

说明:

https://www.w3.org/TR/wai-aria-1.1/#combobox

https://www.w3.org/TR/wai-aria-1.1/#grid

例:

https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/grid-combo.html

错误:

https://i.stack.imgur.com/OIX1f.png

我的代码:

<div class="container">
    <label for="comboboxtextbox">the label</label>
    <div role="combobox" aria-expanded="true" aria-owns="comboboxgrid" aria-haspopup="grid">
        <input role="textbox" aria-multiline="false" id="comboboxtextbox" type="text" aria-controls="comboboxgrid">
    </div>
    <table role="grid" id="comboboxgrid">
        <tbody>
            <tr>
                <th>one</th>
                <th>two</th>
                <th>three</th>
            </tr>
            <tr>
                <td role="gridcell">1</td>
                <td role="gridcell">2</td>
                <td role="gridcell">3</td>
            </tr>
        </tbody>
    </table>
</div>
答案

错误消息是说具有组合框作用的任何内容都需要子元素,但它无法在标记中找到它们。有some changes to the combobox role所以,如果你从一个较旧的例子开始工作它将会过时。尝试从div和表中删除角色属性,看看是否有帮助。

以上是关于如何将aria组合框角色与网格元素一起使用?的主要内容,如果未能解决你的问题,请参考以下文章

如何将组合框值与函数一起使用并选择大小写?

ARIA 组合框的 IE 兼容标记

JAWS 如何处理 ARIA 角色?

如何在具有嵌套数据的网格中设置组合框值? Extjs 4.2 Mvc

将 Aria-labels 添加到 Angular 分页网格以使其更易于访问

如何在数据网格视图中显示数据