Hi Evolve team!
I had a course where I used a checkbox with variable to mark it as complete. In testing with keyboard navigation and NVDA screen reader, the user can’t check the box. They can tab to the next item, but using the arrows and/or enter doesn’t select the box or tick it.
I’m thinking this is probably user error on my part. Is this a case where an ARIA label or interaction label with specific keyboard instructions are needed? If so, what is the keyboard command the user would need to use?
Cheers!
Paula
Hi @phughesMT - you need to use the spacebar to select or deselect a checkbox item. This is standard for this kind of interaction, but it couldn’t hurt to have a concise component level aria label advising screen reader users of this.
Cheers-Sam
1 Like
Thanks @Sam_Cook_Evolve_LQA! Space bar worked.
1 Like
It’s not just standard - it’s actually an accessibility requirement that checkboxes should be selectable using the spacebar
I think perhaps the confusion here is down to how the MCQ component allows you to select checkboxes using either Space or Enter - but the Checkbox component does not.
I would be a little wary of using ARIA label to provide instructions, this would only be available to screen reader users and would clash with the screen reader’s own instructions e.g. on VoiceOver it tells you what the correct key press sequence is for any interactive control.
2 Likes