WAI-ARIA: aria-multiselectable (Property)
Description
Indicates that the user may select more than one item from the current selectable descendants.
Authors SHOULD ensure that selected descendants have the aria-selected attribute set to true, and selectable descendant have the aria-selected attribute set to false. Authors SHOULD NOT use the aria-selected attribute on descendants that are not selectable.
Note: Lists and trees are examples of roles that might allow users to select more than one item at a time.
Browser Compatibility For aria-multiselectable
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaMultiSelectable | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
aria-multiselectable Example
<p id="colorOptions">Choose the colors for your flag.</p>
<ul
tabindex="0"
role="listbox"
aria-labelledby="colorOptions"
aria-multiselectable="true">
<li id="red" role="option" aria-selected="false">Red</li>
<li id="orange" role="option" aria-selected="false">Orange</li>
<li id="yellow" role="option" aria-selected="false">Yellow</li>
<li id="green" role="option" aria-selected="false">Green</li>
<li id="blue" role="option" aria-selected="false">Blue</li>
<li id="purple" role="option" aria-selected="false">Purple</li>
<li id="magenta" role="option" aria-selected="false">Hot pink</li>
<li id="lightpink" role="option" aria-selected="true">Light pink</li>
<li id="white" role="option" aria-selected="true">White</li>
<li id="lightblue" role="option" aria-selected="true">Light blue</li>
<li id="black" role="option" aria-selected="false">Black</li>
<li id="brown" role="option" aria-selected="false">Brown</li>
</ul>
Characteristics
Used in Roles
Inherits into Roles
Value
- True/False:
Value representing either true or false. The default value for this value type is False, unless otherwise specified. - False (default)
- Only one item can be selected
- True:
- More than one item in the widget may be selected at a time.
Semantic HTML
Use the HTML5 multiple attribute of the <select> tag.
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>Reference
- W3C (opens new window)
- MDN Web Docs
