mdn / mdn/content

Screenreaders swallow keyboard events

Open
#37,887 0 comments 0 reactions 0 assignees View on GitHub
Content:Accessibility help wanted
Dominant language
Markdown
Stars
11k
Forks
23.2k
Avg merge
2d 9h
Merged PRs (30d)
331

Description

### MDN URL

https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard

### What specific section or headline is this issue about?

Focusable elements should have interactive semantics

### What information was incorrect, unhelpful, or incomplete?

This section recommends adding a `keydown` or `keyup` event to elements that can be focused using the keyboard.

However, some screenreaders and other tooling can swallow keyboard events,
notably `Enter` or `Space` and replace them with a `click` event,
which will break elements that don't watch for clicks.

### What did you expect to see?

I would expect a hint that handling keyboard specific events might not be sufficient in some cases,
for example because they might be replaced by the accessibility tooling.

### Do you have any supporting links, references, or citations?

NVDA Screenreader https://www.nvaccess.org/download/

NVDA Github Conversation: https://github.com/nvaccess/nvda/issues/7898

JS Fiddle (taken from the conversation): https://jsfiddle.net/1m504ub6/1/

### Do you have anything more you want to share?

While this might not be a common problem, I ran into this issue when debugging a flyout menu.
The menu uses `mouseenter` instead of `click` for activation, which is likely problematic itself.

To verify this behaviour:
- download the NVDA Screenreader
- open the JS Fiddle
- with the screenreader active, focus the button and press enter: this should produce a `click` event
- disable the screenreader, focus the button and press enter: this should produce a `keydown` event

### MDN metadata

Page report details

* Folder: `en-us/web/accessibility/understanding_wcag/keyboard`
* MDN URL: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard
* GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/accessibility/understanding_wcag/keyboard/index.md
* Last commit: https://github.com/mdn/content/commit/194bd13942ad0c532c92d364e0d5d0c36732d98c
* Document last modified: 2024-07-25T21:02:22.000Z

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.