[Accessibility] Fix keyboard traps, focus visibility and tab order (WCAG 2.1.1 / 2.4.3 / 2.4.7)

Submitted by qmoreaux on Wed, 03/25/2026 - 11:50

Forums:

Hello H5P community,

As part of our WCAG 2.1 AA / RGAA 4.1 accessibility audit, we have identified several keyboard navigation issues that make certain H5P activities difficult or impossible to use without a mouse.

Issues identified

1. Keyboard focus blocked by tabindex="-1" (WCAG 2.1.1 — Keyboard)

Some interactive elements are assigned tabindex="-1", which completely prevents them from receiving keyboard focus. Users who rely on keyboard navigation cannot interact with these elements at all.

Example: Observed in interactive image-based activities (e.g. "Rain and Flooding" type activities with hotspot interactions).

Expected behaviour: All interactive elements should be reachable via the Tab key.

If a custom focus management pattern is needed, it should follow WAI-ARIA Authoring Practices (e.g. roving tabindex within composite widgets).

2. Illogical tab order (WCAG 2.4.3 — Focus Order)

In Question Set (quiz) activities, the keyboard focus reaches the "Finish" button before the "Back/Previous" button. This is counter-intuitive and confusing for keyboard users who expect a logical reading order.

Expected behaviour: The DOM order of buttons should match the expected logical flow: navigation buttons (Previous / Next) first, then action buttons (Finish / Submit). Alternatively, proper use of tabindex or flexbox order could resolve this.

3. Insufficient focus indicator contrast (WCAG 2.4.7 — Focus Visible)

Default button styles (e.g. the standard red buttons) do not provide a sufficiently visible focus indicator. When using keyboard navigation, it is difficult to see which element currently has focus, especially in the :focus and :hover states.

Expected behaviour: All interactive elements should have a clearly visible focus indicator with a minimum contrast ratio of 3:1 against adjacent colours, as per WCAG 2.4.11 (Focus Appearance) and the minimum requirement of WCAG 2.4.7 (Focus Visible).

WCAG / RGAA references

WCAG 2.1.1 – Keyboard (Level A)
WCAG 2.4.3 – Focus Order (Level A)
WCAG 2.4.7 – Focus Visible (Level AA)
RGAA 7.3 – Keyboard operability of interactive elements
RGAA 10.7 – Focus visibility
RGAA 12.8 – Logical tab order

Content types affected

Question Set (tab order and focus issues)
Interactive image/hotspot activities (tabindex="-1" blocking)
Multiple content types (focus indicator contrast)

Thank you!