lcdsantos / lcdsantos/jQuery-Selectric
"Blank" screen reader dropdown options
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 715
- Forks
- 149
- PR merge metrics
- No merged PRs in 30d
Description
Using opensource NVDA screen reader on selectric demo page, the options read out "blank" when using arrow keys.
The focus state looks like it's on the "option" markup, but using document.activeElement shows that the focus is on the <body> tag. I had an analysis of WCAG AA done, with the following results:
WCAG criteria fails the following sections: 1.3.1, 4.1.2
Description: Using Safari with Voiceover, Internet Explorer with JAWS or FireFox with NVDA, make a selection from the menu using the Down Arrow key (JAWS, NVDA) or Control+Option+Right Arrow (VO) and press control+option+space (VO) or Space (JAWS, NVDA):
- The menu expands automatically when focused, instead of reading role=list and the currently selected option or the placeholder. I believe most accessible dropdowns for select tags operate by opening the list when enter is pressed.
- It announces as "edit text blank main X items" or "blank" w/ NVDA
- When the user uses the down arrow key, the dropdown moves but no announcement is made.
- If the user presses the tab key after pressing the down arrow key, focus is shifted to the next tabular element.
- If the user uses Control+Option+Right arrow (VO), the elements underneath the dropdown are focused.
Other than keyboard navigation, is there a possible fix for even just the screen reader reading "blank"? And has there been any talk of accessibility in the works for upcoming releases?
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue on the Selectric demo page with NVDA, JAWS, or VoiceOver, then inspect the focused element with document.activeElement while navigating the dropdown. Compare the observed announcements and keyboard focus behavior with the reported WCAG 1.3.1 and 4.1.2 failures; done means the selected option or placeholder is announced and keyboard navigation moves focus predictably.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, jquery
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100