Automattic / Automattic/jetpack
Cookie Consent front-end not accessible to screen readers
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
### Impacted plugin
Jetpack
### Quick summary
The Cookie Consent banner on the front-end is not accessible to screen readers. It is loaded at the end of the DOM making it undiscoverable by blind users.
### Steps to reproduce
1. Enable a screen reader such as NVDA on Windows or Voiceover on Mac.
2. Enable the Jetpack Cookie Consent banner.
3. View the front-end.
4. Notice how the banner is loaded at the end of the DOM where a user would have to navigate through the entire page before locating it.
### A clear and concise description of what you expected to happen.
I would expect the Cookie Consent banner to be marked up as a real dialog.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
Focus should be managed when the dialog launches and when closing the dialog. This is the only way to ensure screen readers get the same information that sighted people receive.
### What actually happened
See above.
### Impact
All
### Available workarounds?
No and the platform is unusable
### Platform (Simple and/or Atomic)
_No response_
### Logs or notes
_No response_
Contributor guide
Research direction
Start by locating the Jetpack Cookie Consent banner in the front-end DOM and compare its markup with the linked MDN dialog guidance. Verify with NVDA or VoiceOver that the banner is discoverable and that focus is managed when it opens and closes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100