JAWS does not provide any way to read a disabled option in a listbox #14190

zarend commented 2 years ago

Summary

Navigate to https://output.jsbin.com/zijumor
(Demo opens and page says "Select a color. 'Blue' is deliberately disabled.")
Tab to the select element and press space
(select options "red", "Green" and "Blue appear")
Press Down arrow
("Green" option is browser and screen reader focused. NVDA announced "Green 2 of 3") 7 Press down arrow again

Expected result

I would expect there to be some way to read the third option in the listbox. I tried going into browse mode, and there is no way to read the third option. The "Blue" option is only communicated visually and there is no communication to screen reader that the third option is Blue.

Actual result

Nothing happens

Example

https://output.jsbin.com/zijumor

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <form>
    <p>Select a color. 'Blue' is deliberately disabled.</p>

    <select>
      <option>Red</option>
      <option>Green</option>
      <option disabled>Blue</option>
    </select>
  </form>
</body>
</html>

Additional Information

JAWS version and build number

JAWS Job Access with Speech Professional Edition Version 2021.2103.174 ILM

Operating System and version

Windows 10 Enterprise 20H2

Browser and version:

Chrome Version 105.0.5195.127 (Official Build) (64-bit)

Additional Note from reporter

I'm running into this problem when implementing listbox components for the Angular Material component library. https://github.com/angular/components.

JAWS-test commented 2 years ago

For this reason, ARIA APG says that disabled options of a listbox should receive keyboard focus: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#x6-7-focusability-of-disabled-controls

Unfortunately this is not possible with HTML listboxes, but with ARIA listboxes

JAWS-test commented 2 years ago

The WCAG also sees disabled element as not relevant. Therefore, they are excluded from perceptibility in contrast requirements. So a good recommendation is to use disabled only if the element really has no relevance

https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html:

Text or images of text that are part of an inactive user interface component ... have no contrast requirement.

rperez030 commented 2 years ago

It is possible to read the third option using the touch cursor.

With the Combo box in an expanded state, turn touch cursor on.
Turn advance navigation on.
Press Down arrow to interact with the list, and right arrow to read the elements inside the list. JAWS will properly announce the blue option as being disabled.

FreedomScientific / standards-support