Feedback regarding "Clickable elements must be focusable and should have interactive semantics." metric
- 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/Guides/Understanding_WCAG/Keyboard
### What specific section or headline is this issue about?
Clickable elements must be focusable and should have interactive semantics.
### What information was incorrect, unhelpful, or incomplete?
This metric is described as always required, no exceptions. But, this isn't always the case. I often use click handlers to make a larger containing element clickable and have it activate a default action for that item which is already present on a button/link child. Examples include cards with a link and table rows which are selectable to open an editing UI.
In both of these cases, it would be worse for me to change the containing element to be keyboard focusable, as it would be duplicative of the existing (focusable) action that it's acting redundant for.
For example, this UI is flagged, because I'm using click events to make the entire "ticket" card clickable to go to the "More Info" link, but the "More Info" link is alread focusable.
### What did you expect to see?
The explanation should explain the exceptions (redundancy), and possibly it should be a warning (may be, vs should) in the UI.
### Do you have any supporting links, references, or citations?
- W3C block link cards
- Similar to the example I've shown; using click handler event to make a card clickable as a link without breaking highlighting and interacting with content on the card.
- WCAG 2.2 SC 2.1.1 Example 7
- Specifically example 7, talks about a submit button not being focusable, and that being OK because the form can be submitted from within the input field.
### Do you have anything more you want to share?
Sure, I would like to share that I hope you are having a lovely day, whoever is reading this!
### MDN metadata
Page report details
* Folder: `en-us/web/accessibility/guides/understanding_wcag/keyboard`
* MDN URL: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Keyboard
* GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/accessibility/guides/understanding_wcag/keyboard/index.md
* Last commit: https://github.com/mdn/content/commit/7ba6358a0ff684cc67c60b76d6d972722bbf0d18
* Document last modified: 2025-12-17T15:24:11.000Z
Contributor guide
Research direction
Read files/en-us/web/accessibility/guides/understanding_wcag/keyboard/index.md and locate the “Clickable elements must be focusable and should have interactive semantics” section. Compare its guidance with the linked W3C block link cards and WCAG 2.2 keyboard examples, then update the explanation to address redundant container click targets and clarify the expected severity. Done means the section accurately describes the exception and gives newcomers actionable guidance.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, javascript
- Domain
- accessibility, documentation
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 72/100