SpyreStudios

Web-Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

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

March 27, 2010 by Joel Reyes 25 Comments

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 :)

Author: Joel Reyes

Joel Reyes is a web designer and developer with years of experience in the industry. He runs a development studio called Looney Designer, a design resource site at GrindSmart.com, and an a free file hosting site for designers, developers and creatives at ShareDen.com.

Filed Under: Accessibility, Tools

Comments

  1. rafael armstrong says

    March 27, 2010 at 2:15 pm

    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. Carl - Web Courses Bangkok says

    March 28, 2010 at 7:03 am

    Excellent post and the tools are very useful thanks.

    I just posted this from a test I did from you post suggestions:

    http://wcb.posterous.com/

  3. Maverick says

    March 28, 2010 at 8:19 am

    hey thanks for the list. will try them out.

    thanks again.

  4. Tim Read says

    March 28, 2010 at 10:11 am

    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.

  5. Smashing Share says

    March 28, 2010 at 10:18 am

    Thanks Joel for this very informative post.

  6. Baptiste Wicht says

    March 28, 2010 at 1:24 pm

    Really interesting set of tools for each webmaster. Thanks a lot !

  7. Joel says

    March 28, 2010 at 5:28 pm

    Thank you all for your comments! We truly appreciate them :)

  8. Jarrad says

    March 29, 2010 at 12:18 am

    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.

  9. WpFolios says

    March 29, 2010 at 3:46 am

    Thanks for the post…nice article

  10. Michael Byers says

    March 29, 2010 at 5:19 am

    Good article. I also use TAW3 from http://www.tawdis.net which analyses your whole site

  11. Jordan Walker says

    March 29, 2010 at 9:10 am

    Those are excellent tool to really improve the user interface of an application or website.

  12. Ankit Dangi says

    March 29, 2010 at 2:02 pm

    Thanks for a useful compilation. But, I wonder, what made you forget the W3C’s Complete List of Web Accessibility Evaluation Tools, which is available here: http://www.w3.org/WAI/ER/tools/complete.html

    Also, you may be interested in trying out LowBrowse: http://lighthouse.org/services-and-assistance/computers-and-technology/computer/lowbrowse/

  13. Sune says

    March 29, 2010 at 9:44 pm

    How about Total Validator? http://totalvalidator.com/

  14. Steve Grobschmidt says

    March 30, 2010 at 12:11 am

    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!

  15. Smart Web Design says

    March 30, 2010 at 5:36 am

    Interesting article these are some of the things I rarely think about. Better start now thanks for posting.

  16. Brian says

    March 31, 2010 at 4:02 pm

    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.

  17. MundoCaco says

    April 2, 2010 at 4:01 am

    very useful! thanks!

  18. Manuel says

    April 2, 2010 at 8:05 am

    Good article with some really helpful tools! I also use this validator for checking accessibility: http://fae.cita.uiuc.edu/

  19. suraj says

    April 4, 2010 at 6:50 pm

    wow, nice collection personally I liked that Juicy Studios Image Analyzer. Thank you so much.

  20. Derrick Workman says

    April 17, 2010 at 1:31 am

    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.

  21. Neil Martin says

    June 24, 2010 at 5:12 am

    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.

  22. dani says

    August 16, 2010 at 5:18 am

    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. :)

  23. Safraz says

    October 1, 2010 at 5:15 am

    Just what I was looking for. Thanks for the tips..

    Some of the online tools which has helped me the most so far are

    http://achecker.ca/checker/index.php – AChecker
    http://wave.webaim.org/ – WAVE
    http://www.tawdis.net/ – TAW

    Happy Testing!!

  24. Paul houdes says

    April 29, 2011 at 11:11 am

    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

  25. Bangkok Condo Finder says

    July 2, 2011 at 9:29 am

    Thanks for a great post. I will do a couple of changes on my site. Thanks

Leave a Reply Cancel reply

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

Please prove you're human *

Search SpyreStudios

Web Design Jobs

Development & Programming Jobs

Graphic Design Jobs

Computer & IT Jobs

UX Design Jobs

LiquidWeb

Level up professionally!

Coursera - Hundreds of Specializations and courses in business, computer science, data science, and more

Envato

SpyreStudios © 2021