Select All mechanism for a multiselect/combobox

[bozdoz]

Is there a recommended approach to including a mechanism to select all of a multiselect's options?

Consider this example:

https://codepen.io/bozdoz/pen/wvYVvLL?editors=1010

<select id="demo" multiple>
  <option value="all">Select All</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">.... many more</option>
</select>

Is this intuitive to a screenreader? My thoughts are that "Select All" will appear as an option, even though, it's not exactly an option (it's a mechanism to select all options); so the count (1 of 7) is incorrect. Would a button be more suitable (how would that be associated to the select drop down)?

I couldn't find an example of this pattern anywhere, but I would have thought this was a desirable UI for long-list options/comboboxes.

[JAWS-test]

A selection list with multiple selections should be avoided for other reasons:

• In most cases it is not recognizable that multiple selection is possible
• Most people do not realize how they can use the mouse or keyboard to select multiple entries that are not adjacent.
• With the screen reader, I usually cannot perceive the selected entries, at least when I navigate to the selection list with TAB.

Better alternatives:

• Checkbox group
• Two selection lists, one of which is used to select items that can be moved to the other list: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/
• ARIA selection list, where the selection is made with SPACE and navigating through the list does not change the value of the list: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/ example 2