[Accessibility] Improve HTML semantics and form labelling for screen readers (WCAG 1.3.1 / 4.1.2)

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

Forums:

Hello H5P community,

We are conducting an accessibility audit of H5P content types against WCAG 2.1 AA and the French accessibility framework RGAA 4.1. We have identified several semantic HTML issues in the generated output that negatively impact screen reader users.

We believe these improvements would benefit the entire H5P community and align with H5P's stated goal of WCAG 2.1 AA conformance.

Issues identified

1. Generic containers instead of semantic elements (WCAG 1.3.1 — Info and Relationships)

Content text in many activity types is wrapped in generic <div> or <span> elements instead of appropriate semantic tags such as <p> for paragraphs. This prevents screen readers from conveying the structure of the content to users.

Expected behaviour: Text content should use <p> tags for paragraphs, and appropriate heading levels where relevant.

2. Misuse of navigation roles (WCAG 1.3.1 — Info and Relationships)

Multiple containers are automatically assigned role="navigation" or use the <nav> element, even when they are not navigation landmarks. This pollutes the landmark list for screen reader users, making it difficult to locate the actual navigation.

Expected behaviour: The role="navigation" and <nav> element should only be used for true navigation menus. Other interactive containers should use more appropriate roles or no landmark role at all.

3. Missing form labels on quiz inputs (WCAG 4.1.2 — Name, Role, Value)

In Quiz and Question Set activities, radio buttons (answer choices) frequently lack explicit <label> elements or aria-label/aria-labelledby attributes. This means screen reader users cannot determine what each radio button represents.

Expected behaviour: Every form input (radio button, checkbox, text field) should have a programmatically associated label.

4. Obsolete iframe attributes (HTML best practices)

Generated iframes still use the obsolete frameborder="0" attribute. While not a WCAG violation per se, this triggers warnings in automated accessibility tools and should be replaced with CSS (border: none).

WCAG / RGAA references

WCAG 1.3.1 – Info and Relationships (Level A)
WCAG 4.1.2 – Name, Role, Value (Level A)
RGAA 8.9 – Semantic markup of text content
RGAA 9.2 – Correct use of ARIA document structure roles
RGAA 10.1 – Deprecated attributes
RGAA 11.1 – Form field labelling

Content types affected

This has been observed across several content types including: Question Set, Multiple Choice, Interactive Video, Course Presentation, and Fill in the Blanks.

The issue likely stems from shared core rendering logic.

Thank you for your continued work on H5P accessibility!