Ronan Corr

Note: The Pig interactive game is best viewed on larger screens, as it is not responsive.

This project, part of Jonas Schmedtmann's The Complete JavaScript Course 2024: From Zero to Expert!, was enhanced with accessibility features to ensure that keyboard and screen reader users can enjoy the game, too. The following accessibility improvements were added:

Key Accessibility Enhancements:

1. Screen Reader Context for Interactive Buttons:
   Added clear descriptions for screen readers when users focus on the "New Game", "Roll Dice", "Hold", and "Rules" buttons, helping blind and low-vision users understand how to interact with these elements.
2. Icon Visibility:
   Hid decorative icons from screen readers to avoid unnecessary distractions for screen reader users.
3. Keyboard Functionality:
   Enabled keyboard trigger functionality for all buttons, allowing users to activate actions using the "Enter" key.
4. Logical Keyboard Navigation:
   Reorganized the button elements in the DOM to ensure a logical keyboard navigation order: "Rules", "New Game", "Roll Dice", "Hold", making it easier for blind and low-vision users to follow the game flow.
5. Accessible Rules Modal:
   When users click the "Rules" button, screen readers automatically announce the content of the modal window. Additionally, deactivated other page elements when the modal is open to prevent a keyboard trap.
   
6. Gameplay Feedback for Screen Reader Users:
   During gameplay, I provided screen readers with real-time status updates to ensure blind and low-vision users are aware of the game's progress:
   • When the "Roll Dice" button is focused, announce the current player and their score at the start of each turn.
   • Upon clicking "Roll Dice", announce the rolled number and the player’s current score.
   • If a player rolls a one, announce that the cumulative score is lost and state the current score, followed by the next player's turn.
   • When the "Hold" button is focused, announce the score the player wishes to add to their total.
   • When the "Hold" button is activated, announce the added score, total score, and switch focus to the next player's turn.
   • Upon winning, announce the winner and their score, and shift focus to the "New Game" button.
   • When "New Game" is activated, announce the start of a new game and shift focus to the "Roll Dice" button.