Whimsica11y

Testing

This is a tricky thing, as most of us don't personally have a Braille display, an input switch plus software, or several visual impairments we can turn on and off to test our websites with.

Tabbing

Just hit that tab key! Watch it jump between any inputs, links or buttons you have in your page.

Check that the tabbing order makes sense, and that everything you want a person to be able to activate or give input to is available in the tabbing order.

Can't see anything change? You have tabs and links but nothing is happening? It might be your focus styles need some attention.

Screen readers

We can of course install screen readers (SRs), but they do have a learning curve, and even an experienced sighted accessibility consultant won't use them quite like a blind person will.

That said, it's worth a try to fire up either the built-in SR in your operating system (VoiceOver for MacOS, Narrator for Windows, and Orca is available for Linux), look up its keyboard controls and have a listen to what it says and how it progresses down the page.

If you run Windows, NVDA (free) and JAWS (free trial allows 40-min sessions) are by far the most popular SRs, and can be easily downloaded and installed. LINKS TO FOLLOW

Dev tools

Accessibility tree

In Chrome, Firefox & other extensions: https://www.a11yproject.com/posts/using-firefox-for-accessibility-testing/

Turning off CSS and JS

Light and dark modes

Color vision emulation