mdn/content

Screenreaders swallow keyboard events

Open

#37,887 opened on Jan 30, 2025

View on GitHub
 (0 comments) (0 reactions) (0 assignees)Markdown (8,900 stars) (22,427 forks)batch import
Content:Accessibilityhelp wanted

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

Contributor guide

Tech stack
javascripthtmlcss
Domain
accessibilitydocumentation
Issue type
documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic accessibility knowledgeUnderstanding of keyboard eventsFamiliarity with screenreader behavior
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
The issue relates to the MDN page on WCAG Keyboard (files/en us/web/accessibility/understanding wcag/keyboard/index.md). The suggested fix is to add a note that screenreaders like NVDA may swallow keyboard events (e.g., Enter/Space) and replace them with click events. Contributors should review the linked NVDA GitHub issue and JSFiddle example to understand the behavior. The change should emphasize that handling click events is more robust.
Screenreaders swallow keyboard events · mdn/content#37887 | Good First Issue