Mark the Words: Readspeaker improvements


Acceptance Criteria

  1. Make improvements based on the below feedback


This is still extremely confusing when checking the answers:

i. It should update the header to make clear that it is the solution - not just going through the questions again

ii. It reads the answers from bottom to top

iii. There is no indication that the text has changed to read-only This is particularly confusing, because when answering questions this section is navigable using the tab key, but when checking the solutions if you use the tab key it skips the whole solution and goes to the next question.

iv. It should say “Incorrect” instead of “missed”. “Missed”

-is too easily misheard

Acceptance Criteria



Thomas Marstrander
January 3, 2020, 1:00 PM

i) added solution mode "header"
ii) moved focus to top when clicking answer and show solution button
iv) changed text

not sure what to do about iii), hopefully it is sufficient that focus is moved when answering. I don't think making the words tabbable is a good idea.

Pål Jørgensen
January 6, 2020, 9:00 AM

I am not sure about this solution since we are focusing on an “invisible” element, which means keyboard users lose focus. But at the same time, I don’t know of any other better solution. Let’s see if has any other ideas?


Frode Petterson
January 7, 2020, 9:28 AM

The setTimeout which moves focus doesn’t work for me at all in FF + NVDA. I’m guessing h5p-question has some timeout focusing of their own when hiding buttons.

I.e. ii. is missing but other than that I find that it’s working very well.

The solution is probably to move the focus before the buttons are toggled.

Thomas Marstrander
January 8, 2020, 10:15 AM

Thanks, moved focus to before removing buttons.

Frode Petterson
January 8, 2020, 1:02 PM

Sounds good



Thomas Marstrander


Svein-Tore Griff With



Code reviewer

Pål Jørgensen



Fix versions