My Personal Website with past projects: https://my-personal-website-one-theta.vercel.app/
- Users understand the rules of tic-tac-toe
- The game follows the traditional rules i.e. 2 players per game
- Requires low latency between 2 players in the same room
The backend web service may take more than a minute to spin up
Go to: https://accessible-tic-tac-toe-zy.netlify.app/
- Clone this repo locally
- cd into frontend and run npm i
- Enter main.jsx and change to axios.defaults.baseURL = 'http://localhost:5000';
- Then run npm run dev to start the frontend
- To run backend locally, you have to start your own local postgres db
- The schema for the db is given in this repo (accessible_tic_tac_toe.sql)
- Go into server -> model -> db.js and add your local db connection url into const db = pgp(neon_db_key);
- Enter app.js and change to origin: "http://localhost:5173"
- cd into server, run npm i, then npm start
-
- To aid the visually impaired (e.g. colour-blindness)
- Having enough contrast allows these users to be able to discern different sections of the website/webapp
- We can check if the contrast ratio is enough with https://webaim.org/resources/contrastchecker/
-
- To aid the motor impaired users, I have chosen to use buttons for most parts of the game because buttons allow users to "focus" on them with a tab.
- This is useful for the motor impaired because they only need to use buttons to navigate the whole webpage
- And when they press enter, they can place either an X or O easily
-
- As mentioned earlier, the buttons allow users to "focus" on them.
- What I have done is to have a message for each of the boxes when they are in focus.
- For example it could say "Add X to the top right" when focused on the top right box on the board
- This allows the screen reader to read that text and the user can hear it
- Besides this, users need to understand what is happening on the board
- Thus I added an announce feature. At the click of this button, it will send a message to be displayed at the bottom left of the webpage, talking about the positions of each X and O.
- This is done with the help of live regions, where parts of a page are continuously announced by the screen reader.
- To do this, we need to we need to assign a role="region" attribute to a tag, as well as an aria-live attribute
- I chose aria-live to be assertive because we want the screen reader to interrupt any ongoing screen reading to announce the status of the board
- POST '/addUser' to add a new user at the sign in page
- POST '/verifyUser' to verify the details of a user in the login page
- GET '/getUser' to get the username by userId
- POST '/addMove' to add a move made by a player
- GET '/getLastMove/:sessionId' to get the last move made in the session/game
- GET '/getAllMoves/:sessionId' to get all the moves in a session
- GET '/getAllMovesByUser/:sessionId/:playerId' to get all the moves made by a user in a session
- POST '/addSession' to add a session to the DB whenever a game is created
- GET '/getSessions/:userId' to get all the sessions the user has played in
- POST '/addResults' to add the results of each session whenever there is a winner
- GET '/getResults/:sessionId' to get the result of the session
There are many more features that I would have hoped to implement if given more time, such as a more screen reader and a visually friendly dashboard, but due to the time constraint, there are some parts of the web app that are not the best.