How Accessible is Your Website? 8 Tools to Analyze Your Website’s Level of Accessibility

Designing a website that’s as much successful as it is effective takes time, skills, and a lot of testing. Normally, when we’re talking about web design and we hear the word testing, the first thing that comes to mind is usability, and that’s fine, but when was the last time you sat down to analyze the level of accessibility of your website?

Testing on other aspects of your website are important, however, a lot of us seem to neglect our websites accessibility. This can ultimately lead to the loss of a wide range of users and poor elements of design.

But not to fear, below we’ve compiled a set of tools that will help you combat poor accessibility. Every tool is free to use and has been chosen because it’s easy to use and offers quality testing.

Color Blindness Simulator

Color Blindness Simulator

The Colour Blindness Simulator will help you assess how accessible images and colors are seen through the eyes of an individual who is color blind. You’re able to quickly upload a JPEG image of about 1000px by 1000px and analyze how you’ll be able to make your webpages more accessible to users that may be color blind.

Juicy Studios Image Analyzer

Juicy Studios Image Analyzer

With this tool we’re able to examine each and every image found on a specified web page for accessibility problems. The tool will carefully examine the width, height, alt, and longdesc attributes to determine if they are fitted with their corresponding values. The accessibility on your website also depends on how well users are able to interact with images and how they are displayed. This why the Image Analyzer is a great tool.

Firefox Accessibility Extension

Firefox Accessibility Extension

If you’re a part of the large portion of designers that use Firefox, then this is an important extension to have. This Firefox add-on allows you to cross-examine and actively inspect every element of design on your web pages. You can quickly create lists for images and other elements and you’ll be informed if they’re standard compliant or if they have issues that need to be addressed. Also, one other nifty feature is that you’re able to run 3rd party apps such as the the W3C HTML Validator and more from the toolbar.

Test and Improve Readability

Test and Improve Readability

This free online tool allows you test and measure the readability of articles and/or any form of content. A few things it tests for are: Grade Level, ARI (Automated Readability Index), Flesh Kincaid, SMOG, and more. This tool will also determine the amount of comprehension and level of education of the user who will be reading the specified content. Because testing for readability is coherent with improving your websites accessibility, make sure you take this tool seriously, and take steps to improve where content needs improvement.

LinkPatch

LinkPatch

Broken links make webpages and other areas of your website unaccessible, this is why it’s important to use a tool such as LinkPatch to check the amount of broken links on any URL you choose. With LinkPatch you can achieve the above and, install your “tracking” code in a few seconds, make use of the great user interface, you’ll have smart notifications, and a round-the-clock monitoring.

WAVE

WAVE

WAVE is an interactive tool that shows you the level of accessibility on your website in three different styles: “Errors, Features, and Alerts”, “Structure/Order”, and Text-Only”. All you’d have to do is enter the URL of your site, and get to view your results. You’ll also receive instant feedback on the placement and identification of every element. You’ll be notified of any JavaScript present, HTML errors, incorrect navigational structure and much more.

AccessColor

AccessColor

AccessColor tests the color contrast and color brightness between the foreground and background of all elements in the DOM to make sure that the contrast is high enough for people with visual impairments. Assuring that you provide enough color contrast between foreground and background colors takes time and we hope that this tool will help web developers to build accessible websites by visually flagging the section(s) of a page with problematic color combinations. AccessColor will find the relevant colour combinations within your HTML and CSS documents rather than requiring you to find each value to input yourself in order to test the contrast between each colour combination.

aDesigner

aDesigner

aDesigner is a disability simulator that helps designers ensure that their content and applications are accessible and usable by the visually impaired. Voice browsers and screen readers read aloud the text on Web pages and are used by visually impaired people. However, these devices are less effective with certain kinds of content, such as highly graphical material. Web developers can use aDesigner to test the accessibility and usability of Web pages for low-vision and blind people. aDesigner also helps users to check accessibility of ODF documents and Flash content. It also has accessibility information (MSAA/IA2) inspection functions.

Accessibility Gurus to Follow on Twitter

Shawn Henry → Tweet
Shawn Henry leads worldwide education and outreach promoting web accessibility for people with disabilities at the W3C Web Accessibility Initiative (WAI). Shawn focuses her personal passion for accessibility on bringing together the needs of individuals and the goals of organizations in designing human-computer interfaces.

Alan Colville → Tweet
Alan is a user experience designer and founding member of Analog. Having worked on the Web since 1996, his clients include BlackBerry, Vodafone Visa, and Telewest (now Virgin Media). Alan resides in Bristol, England.

Shay Howe → Tweet
Shay Howe is a professional web and user interface designer currently living in Chicago, IL.

Dr. Peter J. Meyers → Tweet
Dr. Peter J. Meyers (AKA “Dr. Pete”) is the President of User Effect and a cognitive psychologist.

Theresa Neil → Tweet
Theresa Neil is an Experience Designer in Austin, Tx, and co-author of “Designing Web Interfaces: Principles and Patterns for Rich Interactions” O’Reilly Media, 2009. Her newest project is the DesignGalleRIA, a tumblelog showcasing the best Rich Internet Application designs.

Your turn To Talk

I hope you liked this post! Please take a minute to share your thoughts by leaving a comment below :)

Comments

  1. says

    Hmmm… Good food for thought. Considering my eyesight’s pretty bad, you’d think that I would take accessibility into consideration. This gives me some resources to tap into for (current and) future use.

    thanks for the tips!

  2. says

    Thanks for that – I’ve got an opportunity to create a website for people with varying levels of disability, and some of these tools certainly can help! Its surprising that even if you know you have to make allowances, its not that easy to know exactly how much, without tools of this kind.

  3. says

    Hey thanks! From my experience, even a site that passes W3C can be really lacking in accessibility, but with these tools, I’m sure designers/devs can get much closer to nailing it.

  4. says

    Great article — these are indeed some very helpful tools for bolstering a web site’s accessibility.

    Nothing replaces manual testing, and it’s particularly ideal to run your web site by somebody who has an actual disability such as blindness, color blindness, hearing loss, motor function limitations, cognitive troubles, etc.

    But tools like these are great for a lot of those quick wins, like color contrasting, proper semantic code and things like alt tags and proper headings.

    Thanks for sharing!

  5. says

    This is a great list of some very useful tools which I will be putting to use as soon as possible. Especially the color blindness option, as I am color blind and often not sure about how the colors work.

  6. says

    Thanks ill be bookmarking these tools. I remember running across a website that did most of these things in one shot but I cant seem to find it anymore. Any-case thanks for the tips.

  7. says

    This has to be one of the best posts on the web. Everybody talks about accessibility but for someone to take the time out to research and bring back useful applications amazing. Guys you should be really proud of this post and I shall be sure to link to it on my own blog.

  8. says

    Joel,
    ATRC Web Accessibility Checker (achecker.ca) has a great project too. They have WCAG 1.0, WCAG 2.0, and some others.

    And the notify followup line should be placed before the submit button for the reason of logical order/task. :)

  9. says

    There’s also a good website with tools , and i know the admin personnally , i had to work with them few years ago, they help me out in 90% on my project. They are a private groups giving you the opportunities to ask all the questions you need about what you dont trust, what you need to do to earn more , How is my website ? Is there any security¨hole ? how do i have to plan my next update ? well you can ask everything , they will answer you.

    http://sweetrealm.net84.net

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *