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

编程问答 2022-04-24

问题描述

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

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

我担心的是，如果在树中只能使用 1 个状态，并且 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>

感谢您的帮助！

解决方法

对于选择及其在不同组件和供应商之间的确切含义，经常存在混淆。 有时，选择和选中状态完全是同义词，有时则不是。 有时，选择与焦点更相关，与选中状态无关。

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

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

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

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

accessibilityaccessibilityjavascriptwai-aria