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
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
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
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
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
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 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 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 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.
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!
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/
hey thanks for the list. will try them out.
thanks again.
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.
Thanks Joel for this very informative post.
Really interesting set of tools for each webmaster. Thanks a lot !
Thank you all for your comments! We truly appreciate them :)
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.
Thanks for the post…nice article
Good article. I also use TAW3 from http://www.tawdis.net which analyses your whole site
Those are excellent tool to really improve the user interface of an application or website.
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/
How about Total Validator? http://totalvalidator.com/
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!
Interesting article these are some of the things I rarely think about. Better start now thanks for posting.
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.
very useful! thanks!
Good article with some really helpful tools! I also use this validator for checking accessibility: http://fae.cita.uiuc.edu/
wow, nice collection personally I liked that Juicy Studios Image Analyzer. Thank you so much.
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.
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.
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. :)
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!!
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
Thanks for a great post. I will do a couple of changes on my site. Thanks