Easy-to-use accessibility tools

Easy-to-use accessibility tools

Easy-to-use accessibility tools

February 02nd, 2016 – 7 Comments

Is your website ready for people with visual impairments? Have you ever tried to navigate your own site without a mouse? Just some of the questions I asked you in my article Accessibility matters. In Joost’s recent article on the Google Webmaster Guidelines update, he explains that these new guidelines also focus more on accessibility. Accessibility does matter, and clearly for Google as well. In this article, I’ll show you some easy tools you can use to make your website accessible for more visitors.

Easy-to-use accessibility tools

WordPress accessibility

If you’re using WordPress, there’s a complete team working on making WordPress more accessible for everyone. From what I can see, this team is working very hard to both make a case for accessibility and improving WordPress accordingly.

I’ve had several conversations with a number of members of this team, for instance during WordCamps (see you in Vienna?) and via Slack. One thing is always a part of those conversations: making a case for accessibility. Accessibility, in my opinion, will too many times be considered as a possible ‘extra’, where roughly 10% of your website visitors will experience some kind of accessibility issue, like contrast or fonts that are too small. If you follow accessibility guidelines, your overall website will improve for all your visitors.

Accessibility tools

We obviously spend time in our reviews testing (a number of aspects of) accessibility as well. Obvious things that are tested are use of headings, contrast and descriptive links. In this article, I’d like to go over these very easy-to-use accessibility tools and show you how you can use these yourself for your website.

Use of headings

Headings and SEO value? It’s up for much debate. Although some people already claim the SEO value of headings is zero to none these days, we’re just not sure yet. But when it comes to accessibility, headings are very important:

Headings add structure and meaning to pages by labeling each content part and indicating the relative importance of those parts.

Learn how to optimize on all aspects in our All-in-one training bundle!

All-in-one SEO training bundle Info

Of course, this is very much UX related, not just to accessibility. Not just for people with a disability of some kind, by for every visitor of your website. Make sure your headings are descriptive and nested the right way. Don’t just use headings as a design element (“it’s the only way I know how to enlarge my text”) or to impact SEO (“I use all H1 headings, that makes it all very important to Google”). The first one is a plain lazy solution –  and the second one just doesn’t hold that much truth anymore, like mentioned above.

Easy-to-use accessibility tool to test heading structure on your website: Quix. This tool is like the Swiss Army knife of our site reviews. You can test all kind of things by using a variety of commands, but the ones we use most are seo, h and seocss. That last one will show you all the headings on a web page:

accessibility tools: headings test example

Even on pages where we don’t actually can read what’s on there, this little accessibility tool will allow us to check heading structure. As you can see, the content part of this website is structured right, but the sidebar on the left is using a reversed structure. (first H2 than H1).

Read more: ‘Headings and why you should use them’ »

Contrast

There is a number of ways to test the contrast of a website. By contrast we mean the way the color of a text is readable on its background. When using black on white, you’re obviously safe. But a lot of websites change these colors for sidebars or specific sections or use text on images, for instance in a slider.

When I was building websites myself back in the old days, I often used this handy github page by Lea Verou:

Accessibility tools: contrast ratio calculation

It gives you a contrast ratio score based upon the W3C contrast guidelines, which considers 4.5:1 to be OK. Black text on white background gives a ratio of 21:1, by the way.

The test tool by Lea Verou just tests contrast. If you want to play around with contrast to find how this affects visits by for instance people that are colorblind, you might want to check the Color Contrast Analyzer (Windows/Mac) that checks foreground/background contrast levels and allows you to preview designs as they might be seen by colorblind users. If you’re using a Mac, this little contrast tool by Michel Fortin is also great: Sim Daltonism. Like the Color Contrast Analyzer, it allows you to hover a website and test a number of colorblindness variations:

Accessibility tools: sim daltonism in action

Easy-to-use and fast, I have Sim Daltonism installed on my Mac.

Another accessibility tool I’d like mention here is simply called SEE. It’s a rather confronting Chrome extension, which allows you to view a site as viewed by visitors with variations of colorblindness, but also as people suffering from for instance glaucoma or cataract. Be sure to try that one for yourself as well.

Descriptive links

The last accessibility tool I’d like to mention is right in your computer. Both Mac and PC have ways to read out the text on the screen for you. The text that is read, can be identified and that will show you if a link is set up in a descriptive way. For Windows users, the application that reads text to for instance a blind visitor is called Narrator. As I am using a Mac, let me show you how to identify inaccessible links using VoiceOver. I assume Narrator has pretty similar features. Correct me if I am wrong, Windows user.

There are a lot of keyboard shortcuts that can be used when it comes to accessibility. In our reviews, we do the following:

  1. Press CMD+F5 to turn on VoiceOver
  2. Press Ctrl+Alt+U to bring up the Content Chooser
  3. See if f.i. the read more links say more than just ‘read more’

Here’s the result of that on a blog that did not optimize for accessibility:

Accessibility tools: Testing links using VoiceOver on a Mac screenshot

New to SEO? Learn the Basics of SEO in our Basic SEO course »

Basic SEO training Info

You can clearly see that Treebeard is the nick or name of the author, but a blind visitor just sees Treebeard. And where we know that the read more is related to Part Deux of the Dumping Dumps article, a blind visitor just sees ‘read more’. About what? Don’t get me wrong: we’re not doing everything right ourselves, but we try to improve the accessibility of our site and plugins as well. Last year, Rian Rietveld wrote an article on how to use a .screen-reader-text class to make your read more links more accessible. Go read. Implement.

One more thing

The people at WAVE Web Accessibility created a nice tool to quickly identify a lot more rights and wrongs on your website. This is done completely automatically and will need a human to see what really are realistic improvements and what not. I don’t consider this a replacement for the accessibility tools mentioned above, but it is definitely worth looking into!

Most of the tools mentioned above and more can also be found on make.wordpress.org/accessibility/useful-tools/

Keep reading: ‘Accessibility matters’ »


7 Responses to Easy-to-use accessibility tools

  1. Arnoud
    By Arnoud on 12 February, 2016

    I can’t find the list with all the Quix commands. Is it just me or is there no list on the help page? https://www.quixapp.com/help/

    Thanks!

  2. Carolyn
    By Carolyn on 7 February, 2016

    Thanks for the useful tips, but please could you refer to ‘people with visual impairments’ rather than ‘the visually impaired’. The latter infers these people have no other characteristics. Many thanks!

    • Michiel Heijmans
      By Michiel Heijmans on 11 February, 2016

      Done. I don’t generalize like that, and did not intend it like that, but changing the text is a simple job.

  3. Rich Senior
    By Rich Senior on 4 February, 2016

    Great stuff Michiel,
    Here are some more accessibility tools you might find useful.
    Joe Dolson’s WP Accessibility & Access Monitor plugins:
    https://wordpress.org/plugins/wp-accessibility/
    https://wordpress.org/plugins/access-monitor/

    The latter requires a Tenon.io API key but is an awesome way of keeping content accessible.

  4. Logesh
    By Logesh on 3 February, 2016

    If we use Accessibility Tools (using some plugins), will that affect the Page Speed of the Website?
    Assume, I am using WordPress with Divi theme.

    • Mark Root-Wiley
      By Mark Root-Wiley on 4 February, 2016

      @logesh, I don’t think any of the tools mentioned above modify WordPress. Rather, they’re all for testing the accessibility of the site as generated by WordPress. I can’t really think of anything inherent to a majority of accessibility techniques that would slow down a site.

  5. Mark Root-Wiley
    By Mark Root-Wiley on 3 February, 2016

    Thanks for sharing these great tools, Michael! Quix and SEE are both new to me, and I look forward to playing with them more soon!

    Two tools you didn’t mention that I really like are:
    – No Coffee Chrome Add-on for color blindness testing
    – tota11y javascript bookmarklet from Khan Academy. It’s kind of like WAVE toolbar lite.

    As you all at Yoast keep focusing on accessibility, I really hope you’ll take on the big color blindness problem in the SEO analysis metabox of Yoast SEO. As I wrote on a previous post of yours:

    Check out this screenshot using a simulated version of Protanopia (the most common type of red-green colorblindness): https://cloudup.com/iJaJKIm4xcJ (note how the traffic signal also has extremely low contrast for someone who sees the world this way)

    Coming up with solutions isn’t too hard, here are two options I threw together in 10 minutes using Dashicons (no testing for contrast):
    https://cloudup.com/iS8YBwLjzBt
    https://cloudup.com/i_sGD5KhT9k

    There’s already an issue for this problem in GitHub (https://github.com/Yoast/wordpress-seo/issues/440), but there’s been a pretty disappointing back and forth that seems to indicate a fix is far off. Given the severity of the issue for colorblind users (“Even though I can now see the new Traffic light system that is in place, all three colours are the same so when trying to diagnose and issue, I have no clue on whats going on.”), I hope this ticket can get some new focus!


Check out our must read articles about User eXperience (UX)