Quick and Dirty Web Accessibility Testing

There are very detailed instructions posted on the Chancellor’s Office website that explain how to thoroughly test websites for accessibility and compliance. Here at Fresno State, all official departments and units will have to comply with this level of accessibility.

But if you’re faculty, staff or students – and not necessarily web savvy – you’re probably scratching your head and wondering what all this stuff means and how you can find out if your site is “accessible” or not.

The information on this webpage has been assembled to give a very quick and dirty overview of how to test for accessibility as well as some tips for how to build for accessibility. For the full compliance details, you must read the Chancellor’s website. But these general tips will help you get started.

Testing for Web Accessibility

The quickest way to test a website for accessibility is to do the following:

Install the Web Developer’s Toolbar extension for Firefox then use it to disable JavaScript, style sheets and images. Once these items are turned off, you’ll see if the site is navigable, if the information is readable, and if any information is missing.

What to do…

About JavaScript:

By turning off JavaScript, you will see if any functionality is lost when a screen reader or other adaptive technology is used to browse your website. Typically, if your website contains JavaScript menus, they will not function. This means that your menus will not work for someone with a screen reader or other adaptive technology. If this is the case, the site is not accessible and you’ll have to change it.

The most efficient fix for this is to create menus as text hyperlinks in unordered lists then style them using CSS. You can achieve good-looking menus this way, and when JavaScript and style sheets are turned off, the menus simply appear as text hyperlinks that are totally accessible.

About Style Sheets:

By turning off style sheets, you will see the raw information structure and content of the webpage. If you haven’t used semantic markup, you’ll see it immediately because text sizes will look all crazy, having some text much larger or smaller and in random order.

The most efficient fix for this is to introduce some semantic markup into your pages and style sheets. Go back to the boring old <h1> through <h6> and <p> tags for all heading, subheads, and body text. If you’ve got a div layout be sure that the headings in each div start with <h1>. If you want an <h1> in one div to look different than the <h1> in another div, use descendant selectors. It may seem confusing, but making classes like “.bigRedHeader” are a way of the past. If <h1> is not descriptive enough, use code comments in your CSS.

About Images:

By turning off images you will see two things. First, you’ll see if all your images have <alt> tags. Second, you’ll see if any information is missing from your webpage. If you’ve used graphics for your headings, and don’t have meaningful alt tags (or no alt tag at all), a person browsing your webpage with a screen reader or other adaptive technology will miss all the heading information.

The most efficient fix for this is to use semantic markup for your headings, use styled hyperlinks in unordered lists for your menus (instead of image rollovers which are basically images and JavaScript combined – doubly problematic!) and give meaningful alt tags to all your images. If an image file is simply part of your graphic layout, give it a null alt tag (screen readers will skip the image); otherwise give every image a meaningful alt tag.

Validation:

Finally, be sure to validate your HTML and CSS. You can use the validation tools in the Web Developer’s Toolbar or the validation tools included in various software applications such as Dreamweaver. This will ensure your code is written properly and to the W3C standards. Screen readers and other adaptive technologies support the web standards. If you want your site to be accessible, so should you. Valid code will not only help with accessibility, it will help with a lot of other functionality and browser compatibility issues.

Tips for building accessible websites

The following list contains basic tips on what to do, and what not to do, in order to build accessible websites. The items are not listed in any order of importance and this list may grow over time.

General tips for creating accessible websites:

Use <div> layouts rather than table-based layouts. Adobe Dreamweaver CS3 shipped with pre-built div layouts that are ready to customize. Or you can use the <div> layouts in the “Clean Up the Web” toolkit.
Use semantic markup – especially for all headings, subheads and body text.
Use text hyperlinks in unordered lists for all navigation, such as:

<ul>
<li><a href=”../about/index.htm>About</a></li>
<li><a href=”../programs/index.htm>Programs</a></li>
<li><a href=”../contact/index.htm>Contact Us</a></li>
</ul>

Stay away from using JavaScript and Flash for menus unless you really, really know what you’re doing and know how to build accessible JavaScript and Flash. It can be done but I know almost nobody who has the skill to do this properly.
Don’t use image rollovers for menus
Give all images proper <alt> tags
Include a “skip to nav” link, or other functionality, that will allow users to go straight to page content, skipping all banner and navigation.
Make sure tables contain accessibility tags such as caption, summary and scope, such as:

<table summary="Replace with title of table for accessibility">
<caption>
    Sample table (styled and accessible)
</caption>
<tr>
    <th scope="col"> </th>
    <th scope="col">Column 1 </th>
    <th scope="col">Column 2 </th>
</tr>
<tr>
    <th scope="col">Row 2 </th>
    <td scope="row">text</td>
    <td scope="row">text</td>
</tr>
</table>

Give your pages meaningful page titles – especially the initial page of your site. Don’t simply give all pages in your site the same title.
Use meaningful text for hyperlinks and be sure to inform people if new windows are popping up. Typically it is best to make all linked pages load within the same browser window, even if it is a link to an external site.
If you really need a hyperlink to open a new window, let the users know.
When building forms be sure to label all form elements.

There are many websites that include lists of good resources or explain in great detail how to implement any and all of the items listed here. A few favorites are Accessites.org, A List Apart, Community MX and Lynda.com.

Finally...

Come to training! If you're faculty or staff, you can sign up for training. If you're a student assistant, have your boss sign up for you. If you're the web manager for an official student organization and want to utilize the "Clean Up the Web" campus web standard, email Perry Angle to get approval to attend.

If you have any questions, email cleanuptheweb@listserv.csufresno.edu.