Easy Does It
Regarding The Coin Flip Game
I took the easy road to making the coin flip game accessible. My hope is that developers will value the approach even if they do not value flipping coins online.
Along the way, I used HTML elements in compliance with their default purposes. That greatly simplified keyboard navigation and conveying semantics to screen reader users.
Just one spec of ARIA
The lone ARIA attribute in the game is on the >section< element that is the game container.
The aria-labelledby attribute binds the container to the game heading. As a result, the container becomes a landmark that is easily found by screen reader users, and
they hear when they have navigated into or out of this region.
I hope this demonstrates to web developers that achieving accessibility does not need to require loading pages with tons of ARIA attributes.
The Heads/Tails Widget
A pair of radio buttons is a perfect fit for choosing heads or tails . The problem is, of course, radio buttons have a decidedly un-gamelike look and feel. They also come with some unfortunate baggage. Many users consider them to be ugly, so developers often go to great lengths to avoid true radio buttons.
I was determined to use radio buttons because they provide superb semantics and great keyboard navigation with the Tab and arrow keys. So I customized their look.
I shrank the height of the radio buttons, covered them with their labels, then made the labels look like buttons. I accomplished this with CSS and no special JavaScript.
Keeping everyone informed
A screen reader user would have been unable to play the game if my accessibility efforts ended with the steps described so far. They would still need to know the coin side facing up. Then they would need to know when the flipping has started or stopped.
Developers often use ARIA to solve this issue.They can create aria-live regions that screen readers track for content updates.
Since I was hell-bent on showing a simple solution, I put an <output> element under the Status heading. The <output> element needs no ARIA.
I used JavaScript to update this block’s contents as the game progresses.Screen readers announce the changes just as they would with an anaria-live region.
Playing it safe
Do the coin flips look like flashes? I am not sure. Probably not, based on the coin colors and the short game duration.
Nevertheless, I decided to take no chances and added the Minimize coin flips
checkbox.
People with vestibular disorders face very real risks of seizures from Web animations.
All I needed to do to protect these users was add four lines of JavaScript to limit the flips if the box is checked.
Oh yes, and don’t forget to …
Test your animations with real users of accessibility technologies.
These users are bound to provide fresh, sometimes unexpected perspactives on what does—or does not—work.
Conclusion
I anticipate few people will play the game. I just hope some will be inspired to apply some of these techniques to other animations.
Meanwhile, I actually had some fun with JavaScript’s ability to generate random numbers.
See:
Guide to Accessible Animations and
Mozilla Developers Network on Seizure Issues
Published: