Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accordion: Keyboard operation does not work with screen reader #1477

Closed
JAWS-test opened this issue Jul 30, 2020 · 1 comment · Fixed by #1830
Closed

Accordion: Keyboard operation does not work with screen reader #1477

JAWS-test opened this issue Jul 30, 2020 · 1 comment · Fixed by #1830
Labels
Example Page Related to a page containing an example implementation of a pattern Feedback Issue raised by or for collecting input from people outside APG task force question Issue asking a question
Milestone
1.2 Release 1

Comments

@JAWS-test
Copy link

https://w3c.github.io/aria-practices/examples/accordion/accordion.html:

Down Arrow: When focus is on an accordion header, moves focus to the next accordion header. When focus is on last accordion header, moves focus to first accordion header.
Up Arrow: When focus is on an accordion header, moves focus to the previous accordion header. When focus is on first accordion header, moves focus to last accordion header.
Home: When focus is on an accordion header, moves focus to the first accordion header.
End: When focus is on an accordion header, moves focus to the last accordion header.

Of course, these 4 key do not work if a screen reader is used, because it is not in application or forms mode, but the virtual cursor is on. The only unsightly solutions I can think of are

  • use role=application or
  • use other keys that are not used by the screen reader or
  • on the page at least document that the keyboard operation does not work with screen reader

Is there a better solution?
@JAWS-test JAWS-test changed the title Accordion: Keyboard operation does not work with Screenreander Accordion: Keyboard operation does not work with screen reader Jul 30, 2020
@mcking65 mcking65 added Example Page Related to a page containing an example implementation of a pattern Feedback Issue raised by or for collecting input from people outside APG task force question Issue asking a question labels Oct 4, 2021
@mcking65 mcking65 added this to the 1.2 Release 1 milestone Oct 4, 2021
@mcking65 mcking65 linked a pull request Oct 4, 2021 that will close this issue
Update Accordion example code and behavior #1830
Merged
6 tasks
@mcking65
Copy link
Contributor

mcking65 commented Oct 4, 2021

@JAWS-test
We are removing the optional arrow key behavior in #1830.
Issues discussing the decision are linked from the PR.

mcking65 pushed a commit that referenced this issue Oct 4, 2021
@smhigley
Accordion Example: Allow any or all sections to expand, clean up styl…
d0299b2 
…es, implement APG code guidelines (pull #1830)

Updates the accordion example to resolve issues #1819, #616, #304, and #1477.

Made the following Behavior changes:
* Removed optional arrow key support.
* Removed requirement forcing one section to always be expanded.
* Removed constraint limiting only one section to be expanded at a time.
* Updated tests to reflect behavior changes.
* Removed section that talked about focus styling for "enhanced keyboard interaction".
* Removed arrow key/home/end rows in example page keyboard table.
* Removed aria-disabled row in example page attributes table.

Code cleanup:
* Updated JS file to a class syntax.
* Update classnames to be lowercase.
* Fix some border-radius issues in focus styling.
* Updated example page wrapper id  attributes to match other example pages.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Example Page Related to a page containing an example implementation of a pattern Feedback Issue raised by or for collecting input from people outside APG task force question Issue asking a question
Projects
Accordion Patterns and Examples Development Project
Status: Complete
Milestone
1.2 Release 1
Development

Successfully merging a pull request may close this issue.

Update Accordion example code and behavior w3c/aria-practices
2 participants
@mcking65 @JAWS-test