Flashcards: Accesibility


Improvement suggestions from Aaron M. Page at the University of Montana.

Simple text flashcards were created using H5P: Task description, question and answer (no image). The testing results are below:

Tested using Windows 10 Enterprise Build 1607, JAWS 18.0.2324, Firefox 51.0.1

This may actually be the best flash card example we have seen so far. It is possible to work with these flash cards using a screen reader. There are a few issues, but none of them will prevent a user from successfully making use of the cards:

• No automatic announcement of whether the users response was correct.
o Note: This can be manually determined by rereading the flash card content.
• Previous/Next Controls do not announce labels when navigating via arrow keys, navigation quick-keys, or when using the buttons list
o Note: The controls do read correctly when navigating using tab. I have no idea what could explain this behavior.
o Note #2: This is actually an issue I have seen with all H5P content when using JAWS anytime there is a previous/next control presented. If you know of a way to get this feedback back to H5P that would be great.
• The correct response/solution is presented in the DOM prior to the question text, which forces the user to backtrack from the “check” button in order to read the correct answer.
o Note: There are multiple ways in which a user can make it quicker/easier to backtrack. If I were using these I would create a placemarker right above the location where the answer appears, then I could jump to that spot with a single command.
• Frame used to display Flash Card is read as “GRE Frame”. You can manually change the name of the frame by modifying the title attribute or adding an aria-label to the embed code. Example: aria-hidden=”Flash Cards” or title=”Flash Cards” should result in it reading out “Flash Cards Frame”, which would bring it in-line with WCAG 2.0 A 2.4.1. I would suggest changing the title first, and if that causes trouble (H5P might not like it) then restore the original title and use the aria-label instead. SC H64 suggests using title as it is most consistent across browsers/AT, but aria-label can be used as an alternative if need be.

Marlene also looked it over for color and contrast issues. Here is her feedback:

There was a color contrast issue with the white on gray “Check” text and another issue with the red on pink “incorrect response” text.

I’ve added screenshots below showing the exact text and Colour Contrast Analyser results. The black on gray text for clues and the light green on dark green “correct response” text had sufficient color contrast.

Acceptance Criteria

Improve accessibility for Flash Cards




Tom Arild Jakobsen




Code reviewer