WAVE: Web Accessibility Evaluation Tool

At http://wave.webaim.org/ you will find the easy-to-use WAVE (Web Accessibility Evaluation Tool). There are several ways to use it: put in your URL, upload your HTML files, or cut and paste your code directly into a provided window.

What WAVE returns is your page with an overlay that tags both good accessibility practices and accessibility errors. Errors are noted with a big headline above the page. A screenshot is below, with various tags circled. Click it to see a larger version.

In addition, there is a button in the upper right corner that alows you to disable your CSS styles and see the basic structure of your site, sans CSS. Remember, An accessible document should be well-structured, meaningful, and readable without CSS.

Screen Reader Emulator

A key issue in website accessibility is how well your site converts to a text-to-speech reader, used by end-users with visual impairments. Essentially, a screen reader "reads" a website to the end-user, noting links, headers, tables and frames.

There is a very cool add-on to Firefox called the Fangs Screen Reader Emulator. It strips away graphics and layout and allows you to read your site as it will be read by a text-to-speech screen reader. You can download it at https://addons.mozilla.org/en-US/firefox/addon/402.

Then, to test your website's screen reader friendliness, go to the Tools menu and choose Fangs. It will bring up your page in a screen reader emulator that translate your site to text only, listing exactly what will be read by the screen reader.

Here is a site as it appears in Firefox:


And as it appears in the Fangs Screen Reader Emulator (click to enlarge):


Things to watch out for (taken from the Fangs tutorial on writing for text-to-speech screen readers):
-Are there many consecutive table announcements?
-Are there long sections of uninterrupted text?
-Are the navigation links well labeled?
-Are the heading texts understandable? Is it clear for the user under which heading to look for specific content?

To learn more about writing for screen readers, go to the Fangs help site at http://www.standards-schmandards.com/fangs/help/index.php?l=en-US&v=1.0.7#about

Colorblind Web Page Filter

A web accessibility tool after my own heart! Color-blindness is an oft-neglected but important consideration when determining web accessibility. There is a tool at http://colorfilter.wickline.org/ that allows you to see your website as a colorblind person would see it. The sight can replicate lots of different forms of colorblindness, from the relatively common red/blue color-blindness (8% of males) to total color blindness, or monochromacy (well under 1% of the population).

Just cut and past your URL into the box, and choose the type of color blindness you'd like to replicate. Some screen shots of the Extension template with the colorblind filter applied are below.

Our website in full color:


Our website as it would look to someone with red/green color blindness:


Our website as it would look to someone with monochromacy:

Using Dreamweaver's FTP

Dreamweaver has a nifty little FTP (File Transfer Protocol) that allows you to easily upload and download files between your computer and the web server that houses your website. The key is to NOT use the File pane on the right (outlined in black in the illustration below; click to enlarge), as it is easy to get confused as to whether you're working in local view or remote view. The best way to transfer files is to toggle the File pane to expand it to the entire window. The toggle is located at the very right of the toolbar above the File pane (circled in yellow below).



One you click the toggle button, you'll see your local files (the ones on your computer) at the right (see below; click to enlarge). If you click the Connect button (labeled 1 in the illustration below) you'll connect to the server, and then see the remote files (the ones on the web server) on the left. To upload a file to the web server, select the file from the local files on the right, then click the Upload button (labeled 2). The file will upload from your computer to the web server. To download a file from the web server, select the file from the server on the right, then click the Download button (labeled 3). The file will download from the web server to your own computer.