Tic-Tac-Toe in HTML5. Keyboard and Screen Reader Accessible.
Play Tic-Tac-Toe with a friend.
Implicit keyboard accessible is provided by the use of the <input type="checkbox"> element. Each cell of the game board is a custom styled <input type="checkbox"> and recieves keyboard focus, can be tabbed through, and checked using the spacebar key.
Forcefully hidden (display:none) text along with aria-describedby is used to describe the game to screen readers. As the game is played and users take turns the hidden text is updated and read aloud each time a game cell recieves focus.
This projects makes use of:
aria-describedbyaria-atomic
aria-describedby is used to associcate each cell with the general game description so that each time a cell recieves focus or a move is made the state of the game board is read aloud.
aria-atomic is used to ensure updates are heard whenever the "who's turn is it?" component changes.
The <noscript> tag is used to remind users to enable JavaScript for the game. Since the game is enhanced from a semantic <form>, the game could technically be played through syncrounous form submissions however that is not demonstrated here.
This component strives for WCAG 2.0 Guidelines Level AA. Please open an issue for any accessibility issue, feedback, or concern.