Should aria-checked state be set for a Treeitem role when aria-selected is already being set?

user_5465290 0
Viewed 190

I'm using jsTree to display a custom tree element with aria-multiselectable: true' as state for the tree, with aria-selected: false state as default values for the treeitem elements. I came across an accessibility issue for this, as the treeitems are visually represented as checkboxes, that screen readers are not announcing the elements as selecte/not selected.

Now, since aria-selected state being set, should aria-checked state also be set for these treeitems? The WCAG page has aria-selected as a required state, but also supports the aria-checked state. I came across a fairly long discussion on the aria repo about this, where some arguments were made that even though the spec supports both states, only one can be used within a tree.

My concerns are that if only 1 state can be used within a tree, and aria-selected is a required state, what is the purpose of supporting aria-checked? and if both can be used, should both be necessarily set to 'true' value if an element is clicked? I'm using NVDA + Chrome as my environment for testing accessibility requirements Tree element I'm working with

<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>

Thanks for any help!

wai-aria jstree accessibility javascript
1 Answers

There are often confusion with selection and what it means exactly ammong different component and vendors. Sometimes, selection and checked states are exactly synonyms and sometimes not. Sometimes, selection is more related to focus and has nothing to do with checked state.

It depends in fact on what the component you are using allows or doesn't allow to do. The following questions can help determine where you are for your case:

  • What happens when I click on an item ?
  • Can I click on an item without toggling its checkbox ?
  • What happens when I navigate between items using arrow keys ?
  • Does selection always follows focus when navigating with arrow keys ?
  • Is the set of actions that you can perform on selected items and on checked items different or the same ?

Depending on the answers to the questions above, selected and checked state of an item may be different, in which case it's certainly useful to have both aria-selected and aria-checked and possibly with different values.

Now, this is pure theory. I encourage you to test your components with different screen readers on different systems and browsers, because everything might not be supported everywhere.

user_19712160
Related