当已经设置了 aria-selected 时，是不是应该为 Treeitem 角色设置 aria-checked 状态？

Posted 2023-05-09

【中文标题】当已经设置了 aria-selected 时，是不是应该为 Treeitem 角色设置 aria-checked 状态？

【英文标题】：Should aria-checked state be set for a Treeitem role when aria-selected is already being set?当已经设置了 aria-selected 时，是否应该为 Treeitem 角色设置 aria-checked 状态？

【发布时间】：2021-08-30 19:51:56

【问题描述】：

我正在使用jsTree 显示自定义树元素，其中aria-multiselectable: true' 作为树的状态，aria-selected: false 状态作为treeitem 元素的默认值。 我遇到了一个可访问性问题，因为树项在视觉上表示为 checkboxes，屏幕阅读器不会将元素宣布为选择/未选择。

现在，既然设置了 aria-selected 状态，是否也应该为这些树项设置 aria-checked 状态？ WCAG 页面已将 aria-selected 为 required state，但也支持 aria-checked 状态。我在 aria repo 上遇到了一个相当长的 discussion 关于这个问题，其中提出了一些论点，即即使规范支持这两种状态，也只能在树中使用一个。

我担心的是，如果一棵树中只能使用一种状态，而 aria-selected 是必需的状态，那么支持 aria-checked 的目的是什么？如果两者都可以使用，如果单击一个元素，是否都必须设置为“真”值？ 我使用 NVDA + Chrome 作为测试可访问性要求的环境 我正在使用的树元素

<div aria-required="true" id="blLH9Ody5"
    class="jstree jstree-1 jstree-default jstree-checkbox-no-clicked jstree-checkbox-selection" role="tree"
    aria-multiselectable="true" tabindex="0" aria-activedescendant="d7ce355a-4203-e911-a966-000d3a1bec9a"
    aria-busy="false">
    <ul class="jstree-container-ul jstree-children jstree-no-dots jstree-no-icons" role="presentation">
        <li role="none" id="ce0523b3-6fb8-eb11-bacc-000d3a3066fa" class="jstree-node  jstree-open jstree-last"><i
                class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1"
                role="treeitem" aria-selected="false" aria-level="1" aria-expanded="true"
                id="ce0523b3-6fb8-eb11-bacc-000d3a3066fa_anchor"><i class="jstree-icon jstree-checkbox"
                    role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>test
                parent-treeitem</a>
            <ul role="group" class="jstree-children">
                <li role="none" id="980d3aa1-6fb8-eb11-bacc-000d3a3066fa" class="jstree-node  jstree-leaf jstree-last">
                    <i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#"
                        tabindex="-1" role="treeitem" aria-selected="false" aria-level="2"
                        id="980d3aa1-6fb8-eb11-bacc-000d3a3066fa_anchor"><i class="jstree-icon jstree-checkbox"
                            role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>test
                        child-treeitem</a></li>
            </ul>
        </li>
    </ul>
</div>

感谢您的帮助！

【参考方案1】：

在不同的组件和供应商之间，经常会混淆选择以及它的确切含义。 有时，选择和检查状态是同义词，有时不是。 有时，选择与焦点更相关，与选中状态无关。

这实际上取决于您使用的组件允许或不允许做什么。 以下问题可以帮助您确定您的案件所在的位置：

当我点击一个项目时会发生什么？ 我可以在不切换复选框的情况下单击某个项目吗？ 当我使用箭头键在项目之间导航时会发生什么？ 使用箭头键导航时，选择是否始终跟随焦点？ 您可以对选定项目和选中项目执行的操作集是不同的还是相同的？

根据上述问题的答案，项目的选中状态和选中状态可能不同，在这种情况下，同时使用 aria-selected 和 aria-checked 并且可能具有不同的值当然很有用。

现在，这是纯粹的理论。我鼓励您在不同的系统和浏览器上使用不同的屏幕阅读器测试您的组件，因为并非所有地方都支持所有内容。