Improve accessibility in Memory Game

Description

The following accessibility changes should be made to memory game:

  1. Only [tabindex="0"] should be used

  2. Cards navigation

    1. Cards should be navigated by keyboard arrow keys. (only two axis should be supported, but Home and End keys can also be used to navigate to the first and last element)

    2. Images must have [alt] (is this the description?)

    3. The card should have [aria-label="<description>"], and when flipped, it should do a blur() →{{focus()}}, to read the updated description.

    4. When navigation to a unopened card, this should be communicated to the user by having aria-label="Unopened card"

  3. "Time spent" should read e.g "1 minute 5 seconds"

  4. (optional improvement) The image and "matching image" can have different [alt] values. This will engage visually impaired users to find the two written words that match

  5. When a successful match has been done, it should be announced trough [aria-live]

  6. When an unsuccessful match has been done, it should be announced trough [aria-live]

  7. When finished with the entire card set, it should be announced, along with "Good work"

  8. When finished the focus should be moved to "Time spent"/"Card turns" to give the player a summary

Acceptance Criteria

1. WCAG 2.0 AA 2. Good Wai ARIA coverage 3. Important to test keyboard navigation and focus effects in all supported desktop browsers

Activity

Frode Petterson September 26, 2017 at 12:41 PM

It's hard to say what's the most natural solution is in these cases. I think it's probably best to not overdo it now, and rather wait for the feedback from the testers.

I've merged the branch into master.

Timothy Lim September 25, 2017 at 2:12 PM

Keyboard navigation works really well and so does the reading of the labels. A few points to consider:

1. I think that turned cards should have an aria-label “Turned”.

2. What is your opinion on an incorrect match being announced? It may be a bit confusing for the cards to be flipped without users being notified.

3.You could use this function to have the time be read out in with words as sepcified by point 3. in the description:

https://github.com/h5p/h5p-arithmetic-quiz/blob/759dffbf23c8b9e1c872231db33026901e0ea515/js/timer-widget.js#L53

Done

Details

Assignee

Reporter

Funding

Code reviewer

Original estimate

Time tracking

No time logged

Sprint

Fix versions

Priority

Created July 11, 2017 at 12:47 AM
Updated September 26, 2017 at 12:50 PM
Resolved September 26, 2017 at 12:41 PM