Accessibility tools

Vincent Kempers
3 min readJun 25, 2018

--

After a talk of Ischa Gast I really noticed how the experience on the web isn’t the same for everyone. Especially someone who has a disability. Muscle disabilities, blindness or ADHD. How you navigate or view the web, is different for everyone. Either way the experience should be equal for everyone.

Accessibility on the web is changing for the better. But it’s still not there, where we want it to be. So after being inspired by great developers and designers. I had to write a short article about tools and tips I have gotten.

Alt tags

Twitter has a feature about these alt tags. How users could add their own alt tags to all the images

This is amazing! For the people who actually enable the feature. The rest doesn’t (really should). But not only that they actually should be descriptive. You should actually tell what the picture shows and explain the image as if you should explain it to someone who can’t see.

If you are interested in how alt tags are on your timeline and see which one are good or bad. Download the chrome extension of Sindre Sorhus.

aXe

aXe is an accessibility tool that runs through the website semantics and gives you a report on how accessible your website is. The report also shows you what you have missed in your website. It could be contrast or even missing alt tags. Contents that are hidden but will be picked up on screen readers. Run this while developing and you will catch the most obvious things.

aXe in the browser (image from Chrome store)

Funkify

This tool is not only a great accessibility tool but it actually makes testing an eyeopener. Funkify gives you a wide range of persona’s to use and test.There are a lot of them! You can click on one of the persona’s like “Dyslexia Dani”. His profile makes all the letters appear on different places.

Because of this you could look at your content and see if you can make it more accessible for our Dani here. More white space maybe? Or bigger font?

You can download Funkify here.

Ischa Gast mail dump

You really should follow Ischa Gast. He has a Twitter account that he uses to not only give tips and drop some tools. Also call out companies that have poor accessibility!

Ischa Gast tweet to Airbnb

This developer works at Schiphol as front end developer and knows everything about accessibility! No hesitation subscribe to the maildump!

Colour Contrast Analyzer & Sim daltonism

CCA

These two I use everyday! First up, Colour Contrast Analyser; this little native app is pretty great. Most of us have a colour picker and I bet it’s set on CSS Hex. Great! You have that hex copied before implementing it on your website let it run through this handy application!

It will give you a contrast ratio, and it will show you how the score will be on normal and large text. Now you don’t have to worry about the colours you use.

Sim Daltonism

This is a handy native app you can download from the MacOS app store. This application is a window with filters. These filters you can use to look at the website you’ve made. These colourblind filters will show you when the contrast is off or the colours will blend with eachother.

You can get sim daltonism here.

There will be updates on the tools in the future, so stay tuned.

--

--