Player accessibility

[cayb0rg]

Adds keyboard navigation and partial screenreader accessibility to the player

Why partial? Describing destinations for the screenreader has not been implemented. It is possible we can add an additional input box in the creator for the author to add their own descriptions. For example, in the world map demo, the author could describe a label with some fact about that country or even describe the physical location: "Northern country east of the Atlantic Ocean", etc. This would essentially turn the game into Matching, but at least unsighted users could play.

Update: Added optional label descriptions to the creator. Screenreader accessibility is left up to the author to make labels make sense.

• New keyboard controls added to instructions:
  • Tab key: Move between terms
  • For screenreaders, this will read Tab key or Arrow keys.
  • Arrow Keys: After focusing a term, use these keys to move between labels
  • For screenreaders, this will read "A" and "D" keys because the arrow keys are reserved
  • Enter/Space: Assign a term to a label
  • Escape "H": Open/Close the instructions
  • R key: Return all labels to the term list
• Auto focuses the submit button after all terms have been assigned
• Auto focuses the next term in the list after you assign a term
• Re-focuses the player on the last active element after leaving a dialog
• Updates button colors in dialogs
• Changes for the screenreader:
  • Hides game board when a dialog appears and vice versa
  • Attaches aria-labels to terms with their title and placement status
  • Attaches aria-labels to labels with their destination index and if it is empty or not (totally useless information)
  • Adds aria-visible-only headers for placed and unplaced labels to indicate number of unplaced and placed labels
  • Adds aria-live updates indicating that a label was placed, that a label replaced another label, that a label wasn't moved upon hitting Enter, and that all labels have been placed
  • Added alt text requirement to the creator and alt text to image in player

Question on destination navigation: should the player cycle through unfilled destinations first, or would this be too confusing?

To-Do

• More descriptive labels

[FrenjaminBanklin]

Everything looks really good and keyboard interactions are great, only a couple of minor things I can think of:

• The screen reader is not actually reading out the keyboard instructions, at least in Chrome. I tend to deal with this by just setting the aria-label of the keyboard instructions button (or whatever the nearest convenient element is that is reachable in the tab order) to the full text of the keyboard instructions so unsighted users don't even have to open a dialog to get the information.
• If the keyboard instructions are opened outside of the intro dialog, the labels are still reachable in the tab order.

As for the order in which destinations are cycled through, I think the current approach of keeping them in a predictable order all the time would be better than the order changing depending on whether some of them are unassigned or not.

[cayb0rg]

Nice catches. The latest changes include:

• Optional label descriptions in the creator that are read aloud when navigating destinations in the player
• "Let me finish" button is focused first on Submit Answers
• Can no longer tab out of the dialog into the game
• Changed Escape hotkey to the "H" key since that is reserved by screenreaders
• Adds instructions in an aria-label on the "Got It" button

[cayb0rg]

New changes to Creator

• Fixed placeholder text disappearing on click
• Fixed placeholder text not reappearing after an input loses focus and is empty
• Image description changer will now appear after importing an image. For existing widgets, an arrow will point to the image description changer
• Checked that the qset additions are conserved in save and load operations with both new and old qsets; realized I need to put label descriptions in options instead of question. Thanks for the heads up!

New changes to Player

• Fixed issue with labels staying in ghost state if placed at same destination
• Aligned ghost label with dropped label
• Ctrl+R now resets all labels, "R" resets selected label
• Added demo label descriptions
• Fixed issues with dragging terms not updating aria-labels correctly
• Submit button is no longer focused every time the player finishes placing all labels

[cayb0rg]

• Agreed. By default, the player will lose focus when placing a label (since labels are being removed and inserted into "placed" or "unplaced" divs), and pressing Tab will then focus the next element. Before, I was essentially removing this step of having to press Tab to return the focus. However, it makes more sense to let the user do this themselves, and removing the auto-focus makes the screen reader output less confusing.
• Good catch. I forgot to apply styling to hide the assistive alert in the DOM.

[cayb0rg]

I'll keep thinking on this, but I'm not sure there is anything I can do to focus the first element without manually refocusing, which would read the aria label of the focused label before the ARIA live region update as it did before. It's currently focusing the next label in the list directly after the one the user just moved by default.

[clpetersonucf]

Closing, since these were incorporated into #36 which was approved and merged.