FreedomScientific
JAWS does not provide any way to read a disabled option in a listbox #14190
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.
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
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.
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.
