Nice submission! I love the game design and could see this being very fun to play physically with friends. It was very satisfying trying to construct a hand of all nines by the end of the game—even if I was playing against myself (Chrome with NVDA versus my phone)! Perhaps you could add CPU players who have different strategies or difficulties?
There are many opportunities for improvement with screen readers, even NVDA:
- Try to think of headings more as an outline of the document structure, rather than how big their font is on the screen. Hidden Hand is the main
<h1>, and all others could probably be<h2>elements. You can use classes to make them look how you’d like instead. - The sticky header could be a semantic
<header>element so it gets a landmark region that’s more easily jumped to with a screen reader. - The live region is far too chatty, reading out every line each time it updates for me. Try to get it to only read the most recent messages. I see that it uses
aria-atomic, so that may mean that the entire contents are getting replaced, rather than new children being appended to it. - Consider using
Element.focus()to move the user to the right place after performing actions like drawing and discarding cards. Currently the user needs a pretty good mental model of the page and must navigate by hand between actions or when it’s their turn. - The hidden cards are read aloud as clickable buttons but don’t have an accessible label or do anything when clicked. Consider using
aria-disabled="true"to indicate that it can’t be clicked. Or you may consider using a generic<div tabindex="0" role="button">for the cards—when a card is hidden, you could remove theroleattribute. For the labels, I might usearia-label="Hidden card 2"andaria-label="Hidden card 3".
I think this is sufficient to enhance the screen reader experience. Take these tips, dig in with the screen reader, and you’ll find other things that I haven’t mentioned either. Please continue to iterate on this and share your progress, because it certainly has potential!