Accessibility issues

[matthias-noetzli]

During an accessibility review of our website, a couple of accessibility issues regarding this content type were raised:

1. According to WCAG 2.2 Success Criterion 1.4.11 the contrast of the boxes against the white background is too low with a value of 1.34:1 (measured with WebAIM: Contrast Checker, see screenshot). A color with suitably high contrast against the white background (#FFFFFF) would be #5A97D8, for example. Other suitable colors can be determined with the Contrast Checker. The contrast for this boxes must be at least 3:1.
2. The terms for filling the text gaps are not formatted as an HTML list (WCAG 2.2: Success Criterion 1.3.1 Info and Relationships
3. According to WCAG 2.2 Success Criterion 1.4.3, text must have a minimum contrast ratio of 4.5:1 (exception: large text, which is not the case here at 16 px). To be considered large text, 18px would be required). The selected term has too low a contrast ratio of 2.22:1, see Printscreen (requirement min. 4.5:1). Either the contrast must be increased or the font must be enlarged.
4. It's not possible to create multiple paragraphs. Those are turned into breaks and empty lines. Breaks (<br>) are not output by screen readers (SR); they continue reading seamlessly. The text subdivision, which is visually displayed as two separate lines, is not recognized by SR users. Empty lines are output by the SR as “empty”. See WCAG 2.2: Success Criterion 1.3.1 Info and Relationships.

While the color contrast issues can be worked around with custom CSS, it would still be beneficial to the community if the defaults would already meet the requirements.

[otacke]

@matthias-noetzli H5P Group does hardly respond to issues on github, unfortunately. You should rather add a ticket to their JIRA instance at https://h5ptechnology.atlassian.net/jira/software/c/projects/HFP/issues to improve your chances.