Ever wonder how usable your site appears to someone with a disability, slower connection, or different setup? This list of tools highlights some of the most useful tools and extensions for making your website more usable.
The accessibility checker evaluates your Web page and produces a report of all accessibility problems for your selected guideline. The checker identifies known problems, likely problems, and potential problems.
Worldspace is an accessibility analysis tool designed to identify errors with Section 508, and the Web Content Accessibility Guidelines. There is also a continuous monitoring solution available that delivers monthly reports.
This service allows web authors to see what their pages will look like (sort of) when viewed with Lynx, a text-mode web browser.
The Flicker Rate Test for GIF images helps designers test images to ensure they won’t affect users with photosensitive epilepsy.People with photosensitive epilepsy can have seizures triggered by flickering or flashing. This test will check GIF images to ensure they meet accessibility standards against such cases.
The browser screen resolution checker shows what your web page looks like with the viewer’s monitor set to different screen resolutions. Good for testing if your site functions well on the common resolutions that your viewer’s use.
Get an idea of how spiders see your web page.
Validate your CSS or CSS documents or HTML with CSS.
This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.
Retrieve page size, the size of a pages text content, and the percentage of size that makes up text content on the page.
Check the syntax of Atom or RSS feeds.
Check your site to make sure all of your links are valid, and to ensure you’re avoiding common errors.
Calculate the size of all elements on your web page and see how quickly they load on various connections.Enter a URL to calculate page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component.
Test how fast your website loads to find out if it’s too slow for folks with poor connections. If so, it may be time to optimize the page/media, or move to a faster server.
Chris Pederick’s “Web Developer” extension is a really handy tool to add to your developer arsenal.The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. This extension is compatible with Firefox, Flock and Seamonkey.
The Mozilla/Firefox Accessibility Extension makes it easier for people with disabilities to view and navigate web content. Developers can use the extension to check their use of structural and styling markup that support functional web accessibility.
The Total Validator Firefox extension provides one-click validation. HTML, Accessiblity, etc.
Accessibar is a toolbar extension for Firefox which aims at providing various accessibility features for users who could benefit from them. These features primarily focus on the dynamic manipulation of the visual display of the web page in addition to the integration of a text to speech reader which can read out loud the browser’s user interface as well as web page content.
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of an HTML page is seen in the form of an icon in the status bar when browsing. The details of the errors are seen when looking at the HTML source of the page.
Checkpoint 2.2 of the WAI guidelines requires that color combinations created between foreground and background colors provide sufficient contrast when viewed by someone with color deficits or when viewed on a black and white screen. This color checker determines the color difference and contrast between any two colors.
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.
Use the Color Blindness Simulator to reveal how your images may appear to users with a variety of color blindness conditions. Just upload a graphic to see the difference.
Nifty tool that helps you choose color combinations that help make your page more accessible.
Apply any of the filters available here that simulates color blindness to an entire web page. Great for seeing exactly what your page may look like to those who are colorblind.
Assign, comment and manage tasks directly on your website. Great for finding out what needs to be improved upon during user testing.
The Scrutinizer is a web browser, based upon the Adobe AIR toolkit and the WebKit browser, that offers a simulation of the human visual system.
Fantastic, very easy to use set of tools to help research your users, and how they use your website. Features include heat maps, raw click data, and more.
A click heatmap that runs entirely on your server, completely free.
If you’re not using some sort of Analytics software, you should be. Google Analytics offers a fantastic package totally free.Completely Free Analytics and Tracking done by Google. That alone should speak for itself. Learn more about where your visitors come from and how they interact with your site.
Caution: You may fall in love with this test after using it. The five second test is a simple usability test that helps you measure the effectiveness of your user interfaces. You’ve really just got to see this to understand why it’s so awesome.
What tools do you find yourself using when you’re developing websites?
When CNN approached Fi it was a thrilling moment here at the agency. Since 1999 we saw the world famous news brand pioneer within the digital …
I was invited to speak at the MonkiGras event this week where getting a little sweary and ranty is kind of encouraged (it goes well with the c…
This is vitally important people so listen up. The web now connects a third of our planet. Over 1.2 billion people [1] use the web on devices,…
Contribute a guest post to UX Booth and let the community know what's important to you!
The community is the lifeblood of UX Booth. If you enjoyed this post, please consider sharing it via a social site, or leaving a comment below. Thanks.
Over the past few weeks we’ve been showcasing some amazing articles, tools, and videos in our Resources section. Our twitter followers have gotten a taste of these resources and have let us know they are really enjoying them! Today I would like to share some tools with you that focus on accessibility, a very important
Keeping a website maintained and usable can be done in as little as an hour a month. Check out these tips for keeping on top of your site.
This week only, save 67% on the “Creating Responsive Web Design” course from Udemy.
Super useful article – much thanks!
Great ressource – it’s much appreciated. There are a few apps in here I havent come accross.
@Simon Vallee & @Benjamin Wiederkehr: Thanks folks :) Glad this was a useful post.
I wish I had put The Five Second Test closer to the top looking back at this now. That is one of my new favorite sites, such a wonderful idea!
Sweet post, keeping this bookmarked for sure. Nice one mate.
Very comprehensive, good stuff :)
@Dmitry & @liam: Thanks Dmitry and liam :) Appreciate your feedback!
Good list!
However, Crazy Egg is NOT free.
Many thanks for giving a shout out to five second test. We’re thrilled that so many people are finding the site useful. We have some more stuff up our sleeves so stay tuned in ’09.
Oh and happy holidays :)
@Ben: Aw, man, this is unfortunate. They used to offer a free trial that limited the number of visits it would track over a month period (if memory serves me well). It’s still a powerful tool but clickheat can do most everything it can, just not as pretty. I’ll adjust as needed in the post. Thank you for pointing that out!
@Matt Milosavljevic: I can’t wait to see Matt! It’s such a great idea! Happy Holidays to you too :)
This is definitely a post worth bookmarking for any web designer. I have already been using a few of these tools to check every site I work on. I use the Firefox Web Developer extension which sure makes life easy.
Hi David.
That’s a great list. I love it when someone finds tools I haven’t heard of before.
We recently wrote an article about our favorite tools for revealing why visitors are abandoning a website. It contains a few great ones that aren’t on your list. It’s here:
http://www.conversion-rate-experts.com/articles/understanding-your-visitors/
In addition, Silverback (www.silverbackapp.com) is great software for carrying out usability tests.
@Dr Karl Blanks: Thanks Dr. Blanks.
Our team at the UX Booth actually uses Silverback in our usability review process. It is really a wonderful application.
Great stuff! Don’t forget about the latest from Optimal Workshop: http://www.optimalworkshop.com/
They should be in the User Testing list.
Thanks for the article. Keep em coming.
Under browser extensions, let’s not forget firebug for Firefox. This is one of those indispensable development tools.
I really like using the tools built into Google Chrome, very useful for site dissections, speed tests, etc.
taskee.com is not doing.
That letter-spacing on the titles is hard to read.
Thanks! Very useful tips ;)
thank you very muck
First time I’m coming across so many tools aimed at improving accessibility. Definitely bookmarking this one.
Thanks so much!
Fantastic piece of information.
nice one
Thanks for sharing this post
Thanks for providing such resourceful tips…..
Valuable tools!
Thanks for such great sharing.
Google Analytics is great – I make sure that it is installed on all of my sites so that I can track all of the information on visitors to my websites. The best part is that it’s free! I love it :) Why would I pay thousands of dollars a year to have some other company do it for me…
Thank you. This is a very well put together list!
These tools are all invaluable!