Revise definition of aria-multiselectable to be consistent with normative statements related to aria-checked

[mcking65]

Describe the change

The aria-multiselectable property Does not mention that aria-checked can be used to represent selection.

Revise the definition language or add a note to ensure readers understand that aria-multiselectable should be used on widgets that use aria-checked to represent selection.

Link to the version of the specification or documentation you were looking at

Link to documentation: https://w3c.github.io/aria/#aria-multiselectable

Does the issue exists in the editors draft (the editors draft is the most recent draft of the specification)?

Yes

[mcking65]

Related to w3c/aria-practices#2746

[michaelmesser]

If I use:

<div role="listbox" aria-multiselectable="true">
  <div role="option" aria-checked="true" tabindex="0">A</div>
  <div role="option" aria-checked="true" tabindex="-1">B</div>
  <div role="option" aria-checked="true" tabindex="-1">C</div>
</div>

in NVDA: I get A not selected checked 1 of 3. A similar issue occurs with JAWS.

If I remove aria-multiselectable="true", not not selected the issue is no longer present.

[michaelmesser]

My understanding of the current behavior of screen readers is that there are two ways to represent lists where multiple options can be chosen. With aria-selected:

• Selected if the option is chosen
• multiselectable="true"
• Reads as "not selected" if not chosen
• Reads "selected" if chosen

With aria-checked:

• User agent has selected implicitly follow focus
• multiselectable="false"
• Checked if the option is chosen
• Reads as "checked" if chosen
• Reads as "unchecked" if not chosen

This issue suggests using aria-checked with multiselectable="true", but this does not describe how screen readers currently behave.

I used the following HTML to get that information:

<button>
Checked + multiselectable=true
</button>
<div role="listbox" aria-multiselectable="true">
  <div role="option" aria-checked="true" tabindex="0">A</div>
  <div role="option" aria-checked="true" tabindex="-1">B</div>
  <div role="option" aria-checked="true" tabindex="-1">C</div>
</div>

<button>
Checked + multiselectable=false
</button>
<div role="listbox">
  <div role="option" aria-checked="true" tabindex="0">A</div>
  <div role="option" aria-checked="true" tabindex="-1">B</div>
  <div role="option" aria-checked="true" tabindex="-1">C</div>
</div>

<button>
Selected + multiselectable=true
</button>
<div role="listbox" aria-multiselectable="true">
  <div role="option" aria-selected="true" tabindex="0">A</div>
  <div role="option" aria-selected="true" tabindex="-1">B</div>
  <div role="option" aria-selected="true" tabindex="-1">C</div>
</div>

[michaelmesser]

Also it appears that the 1.3 spec allows both aria-selected and aria-checked to be used at the same time:

Authors SHOULD NOT specify both aria-selected and aria-checked on option elements contained by the same listbox except in the extremely rare circumstances where all the following conditions are met:

• The meaning and purpose of aria-selected is different from the meaning and purpose of aria-checked in the user interface.
• The user interface makes the meaning and purpose of each state apparent.
• The user interface provides a separate method for controlling each state.

In this case does aria-multiselectable describe aria-selected, aria-checked, or both?

[accdc]

I disagree with this change.

The reason being, the checked state is not the same thing as the selected state in the accessibility API, and when the selected state is being queried to check for the presence of multi-selection, it is separate from the checked state.

It is supported within the accessibility API to have both the selected state and the checked state on the same option node regardless which one is currently true or false. E.G. You can have an option that is both unselected and checked, or selected and unchecked, and both are equally valid no matter what aria-multiselectable is set to.

This is why in both JAWS and NVDA, when aria-multiselectable="true", it will state "{not selected" even if aria-checked="true". This is because when aria-multiselectable is true the screen reader is checking for the "selected" state and not the "checked" state on each of the focused option nodes.

[michaelmesser]

Is there an update? As far as I can tell, it still isn't clear.