The Matching Game,

Built with accessibility in mind, By Abdulaziz Alshmasi.

Table of Contents:

1. Introduction
2. How to play
3. Accessibility features
   1. Screen reader terminologies
   2. Sounds
4. Future improvements
5. Issues

Introduction

The Matching Game is a fun game, focusing on matching cards together. Pick a card, find its match, try to match all 16 cards in the least time with the least mistakes possible. Built using jQuery, Vanilla JS, HTML5, CSS3 and Materialize, this game will put your memory to the test. So, are you up for it?

How to Play

This game doesn't need any dependencies to work, just follow the instructions:

1. Clone or download and unzip this repo.
2. open the file "index.html" using any browser of your choice.
3. Enjoy!

Accessibility Features

This game takes advantage of aria controls, roles, and labels to provide screen reader users with a positive experience while playing the game. Screen readers will read the movements, grade, and card statuses automatically.

Screen Reader Termonologies

Here are some screen reader terminologies that you might hear during playing:

• "Hidden Card": the card is hidden and should be clicked to be revealed.
• "Temporarily revealed": the cards are all shown for 3 seconds for you to be able to memorise their places.
• "Revealed": The card is shown, it should be matched with a similar card.
• "Matched": The card is matched with a similar card.

Sounds

There are sounds which you will hear during playing:

• Card Flipping Sound: which means that you flipped a card.
• Chime Sound: Which means that two cards are matched.
• Buzzer Sound: Which means that the cards don't match.
• Shuffle Sound: Which means that the game is restarted and the cards are reshuffled.

Future Improvements

There are Some future improvements in mind:

1. Change the accessible layout of the game to a grid, with keyboard navigation features.
2. Make an online score board.
3. Translating the game to Arabic.

Issues

I'm currently trying to solve the following issues:

1. Audio files fail to load on Apple devices, I don't want to convert them to wav files, as they will load slower, ruining the user experience.
2. on apple devices, Voiceover doesn't read the hidden cards, as the css font-size attribute for them is 0, making Voiceover ignores them. I tried to set the aria-hidden attribute to False, but that didn't solve the issue.

Enjoy playing The Matching Game.