Recently in Accessibility Category

Color vision deficiency, or color blindness, is a very common disease that affects about 8% of the population. For the MU home page that equals about 4,800 visitors a day. That’s a significant number of users, so it’s important that we add a color blind test to our regular set of accessibility checks.

Since Cynthia Says doesn’t check for color deficiency, this test is often overlooked. There’s no reason not to test since there are a few handy, free tools that make checking your site easy.

Color Oracle is an application that will simulate the different types of color blindness on your computer. I like this option because you can test your design at the Photoshop mock-up stage before you begin to code.

Another Web-based option is the Colorblind Web Page Filter. You submit your site URL and it will return a version as it appears to a color blind person. It’s a bit slow, but easy.

Here are a few more color blind resources:

Are Your Web Pages Color Sensitive?
This site has a few good tips on designing your site. One tip I’d add is making sure your embeded links are distinguishable from the rest of the text by using something other than a different color, like underlines.

As Seen By The Color Blind
A good article that explains color blindness and gives plenty of examples.

Colblindor
A comprehensive blog about colorblindness.

Yes, I know that there are already a million posts around the web on the best Firefox extensions. However, I had a colleague ask me for some resources specific to making a site more Accessible. So I sent her a list of Firefox extensions specific to testing a site for Accessibility, and thought I would share them here as well.

First, here is the list of IT Accessibility Standards for the state of Missouri: http://www.oa.mo.gov/itsd/cio/standards/ITGS0003.pdf. This is the standard that we try to meet with the websites/web apps we develop.

Accessibility related

Accessibility Toolbar

This 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. In addition, it provides link to submit a page to the Functional Accessibility Evaluator at the University of Illinois at Urbana-Champaign.

Fangs Screen Reader Emulator

Creates a textual representation of a web page similar to how the page would be read by a modern screen reader.

Yellowpipe Lynx Viewer Tool 1.2.1

Enables you to see what a page will look like when viewed with Lynx, a text-mode web browser. It is also presumably, how search engines see your site. In addition, it can help determine if web pages are accessible to the vision impaired. Also gives a pretty good idea of how your site will work when javascript is unavailable.

General Web Development

Web Developer Toolbar

Absolutely invaluable collection of tools/utilities for web developers. Way too many features to try and list. If you do web development, you need this extension.

HTML Validator

Performs an inline evaluation/validation of the html code of any page you look at. Essentially, this is the same thing as running your code through the W3C.org’s code Validator, except that it is done locally on your computer. It also allows you to see, at a glance via a status bar icon, if the page you are viewing passes the validator, and if not, how many errors/warnings there are. Having standardized code doesn’t make your site Accessible, but having standardized code makes it easier to make it Accessible.

Firebug

Another invaluable web developer tool. Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. I could not live without Firebug and the Web Developer toolbars installed. Well, I could live, but I certainly couldn’t develop nearly as efficiently.

Yslow

YSlow analyzes any web page and generates a grade for each rule (based on Yahoo’s “Rules for High Performance Web Sites”) and an overall grade. If a page can be improved, YSlow lists the specific changes to be made.