Live Demo hosted on Netlify
This is just a little experiment playing with the Numbers API. This is my first time using a third-party API, so I wanted to keep it simple.
I'm generating random numbers between 0 and 360 and using the Numbers API to retrieve facts associated with those numbers. In browsers that support CSS variables (custom properties), the color used throughout will change to the hue of the random number generated by using hsl as the color format.
All hues generated meet the WCAG contrast ratio requirements according to those I tested using Lea Verou's wonderful contrast ratio testing tool.
New random number facts can be generated when keyboard focus is on the "get new number fact" button by pressing ENTER or SPACEBAR.
Using aria-live
on the dynamic text container, each new number and fact will be announced for screenreader users. NOTE: I've tested this on a Mac using VoiceOver in Safari and Chrome. Further testing is needed.