Designing Web Sites for Accessibility with Expression Web 2

Author: Kathleen Anderson, Spider Web Woman Designs
Web Site: http://msmvps.com/blogs/spiderwebwoman/default.aspx

Expression Newsletter, subscribe now to get yours.

So, you just been hired as a web designer or web programmer by a government agency. You’ve also been told that all your web content must be accessible to people with disabilities. What does that mean and why is it important? And last but not least, what web design tool can you use to make sure your content is accessible?

What is Web Site Accessibility?

Web site accessibility is normally defined as the practice of making web content as usable by people with disabilities as it is to people without disabilities. People with disabilities may not be able to see your web page, hear your podcast, or navigate your web page with a mouse or even a keyboard.

Why is Web Site Accessibility important?

A Web site that can’t be navigated without a mouse, or is useless without the graphics or doesn’t have enough information in text format, will lock people out of your place of business. I read an e-mail message a couple of years ago written by a woman whose husband was blind. She spoke about how, in the early days of the Internet, it was a wonderful place for her husband. It was all text-based and universally accessible. Now, it’s a world of images, clicks, online forms, marquees, blinking text and music, all of which can be obstacles to accessibility.

Additionally, if you are creating web content for a government agency, it is most likely the law that your web site comply with either the W3C WAI Web Content Accessibility Guidelines (WCAG) or the Section 508 Technical Standards for Web-based intranet and internet information and systems (United States).

The United States Federal Government requires that all web content comply with Section 508. Many US States require that all web content be accessible to people with disabilities, whether it’s by complying with Section 508, WCAG, or a hybrid of both.

How do I create Accessible Web content?

The task of ensuring that the web content you create is accessible has two parts: creating the content and testing it (before you deploy) to make sure it follows the guidelines. If you’ve already installed Expression Web 2, you are on the right track. Expression Web 2 includes an Accessibility Checker that will test one page or your entire site against either WCAG or Section 508.

To activate the Accessibility Checker:

On the Accessibility Task Pane (Task Panes | Accessibility), click the Run Accessibility Checker button, or
On the Tools Menu, select Accessibility Reports.

This will bring up the Accessibility Checker Dialog box (see Figure 1).

Figure 1. Expression Web 2 Accessibility Checker Dialog box

To check all the pages in your site, choose All pages
To check only the page(s) you have open, choose Open page(s)
To check only certain pages, select them from the list of pages under Folder List and choose Selected pages.
To check the page you currently have open, choose Current page.

To select whether to run the Accessibility Checker against WCAG, Section 508, or both, put checkmarks in the appropriate checkboxes under Check for:.

To show Errors only (the issues that must be fixed), select Errors.

To show Warnings (the issues you should fix), select Warnings.

To see a list of issues that you should test for manually, select Manual Checklist.

Not all errors can be detected automatically—some must be tested manually. Examples of this are turning off support for JavaScript in your browser to see if your page works without it, testing your page in a screen reader, and testing your page using only the keyboard.

Activate the Check button and the Accessibility Checker will run against the page(s) you have selected.

When the Checker is done, the Accessibility Task pane will open at the bottom of your work space (see Figure 2).

Figure 2. Expression Web 2 Accessibility Task Pane

The Accessibility Task Pane will list the pages that contain errors, the location of the error in the page, the type of issue (Error, Warning, or Manual check required), a link to the WCAG checkpoint for more information, and a description of the issue under Problem Summary. Expression Web does not currently link to the Section 508 rule when it finds an error.

If the error is a WCAG error or Warning, you can use the link under Checkpoint to go the W3C Web Accessibility Initiative for more information.

To navigate through the report, use the Next Result and Previous Result buttons.

To see more information about the issue, use the Show Problem Details button. This will bring up a box with a complete description of the issue (see Figure 3).

Figure 3. Expression Web 2 Problem Details

If you would like to generate a report containing the checker results to save for later, or share with your workgroup or client, use the Generate HTML Report button. You can save this report in your web site or in another location.

If you ran the Accessibility Checker on the page you currently had open, double-click on the page name in the Accessibility Task Pane. This will switch you to Code View and the area in your page where the error exists will be highlighted (see Figure 4).

Figure 4. Accessibility Error in Code View.

In this example, the error is that the image has not been given the alternative text attribute (“alt text”). For a person who is blind and cannot see the image, they will not know what it is and whether is contributes meaningful information to the page that would help them use the page. Alternative text can also be seen in some browsers when you mouse over the image and when the image can’t be found or rendered by the browser. Alternative text is especially important when the image is also used a hyperlink, as a person who is blind won’t know where the link will take them if they select it.

There are three ways to correct this error:

Add the alternative text attribute in Code view, i.e.
<img border="0" src="images/people.gif" alt="people" width="118" height="487">
Switch to Design View, right-click on the image and choose Picture Properties. This will bring up the Picture Properties dialog box (see Figure 5). Type the text that describes the image into the Alternate text box and select OK.
Mouse over the <img> tag in the Quick Tag Selector Bar, select the down arrow next to the tag, and choose Tag Properties. This will bring up the Picture Properties dialog box (see #2).

Figure 5. Picture Properties dialog box

Once you have fixed the error and saved your changes, you can refresh the report using the Refresh Changed Results button. If the Accessibility Task Pane is now empty, it means you have fixed all the errors that can be detected by Expression Web 2.

You can set up Expression Web 2 so that it will prompt you to include the alternative text attribute whenever you insert an image into your pages. On the Tools menu, choose Page Editor Options. When the Page Editor Options dialog box opens (see Figure 6), select the General tab, and check the box for Prompt for accessibility properties when inserting images. While the Page Editor Options dialog box is open, you should also check the box for Use and when using bold and italic toolbar buttons. The Bold and Italic tags have been deprecated (retired) and it is recommended that the and tags be used in their place. The Bold and Italic tags were strictly for visual representation—the and tags apply to the visual representation and are recognized by screen readers.

Figure 6. Page Editor Options dialog box

The Expression Web Accessibility Checker can also give you a list of issues that cannot be checked automatically by Expression Web and need manual testing or testing with another tool. These issues include:

Your web site must be totally “device independent”. This means that your page should be designed and coded so that it can be used by someone who cannot use a mouse, or even a keyboard.
If you have audio content, you need to have a text alternative available for people who cannot hear the audio.
If you have audio/video content, you need to have closed captioning, synchronized with the audio/video content.
Any color scheme, including text, must be checked for color contrast and accessibility by people who are colorblind. Vischeck can be used to test your page for accessibility by people who are colorblind.
Your navigation should be consistent across your web site. People with cognitive disabilities may have problems navigating your site if it doesn’t feel they are still on the same site when they move from page to page.

Occasionally, accessibility errors are caused by HTML errors. A great tool to help you check HTML and other types of errors is the Internet Explorer Developer Toolbar. The Internet Explorer Developer Toolbar enables you to:

Explore and modify the document object model (DOM) of a Web page.
Locate and select specific elements on a Web page through a variety of techniques.
Selectively disable Internet Explorer settings.
View HTML object class names, IDs, and details such as link paths, tab index values, and access keys.
Outline tables, table cells, images, or selected tags.
Validate HTML, CSS, WAI, and RSS web feed links.
Display image dimensions, file sizes, path information, and alternate (ALT) text.
Immediately resize the browser window to a new resolution.
Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
Display a fully featured design ruler to help accurately align and measure objects on your pages.
Find the style rules used to set specific style values on an element.
View the formatted and syntax colored source of HTML and CSS.

For more information, visit the Microsoft Accessibility Web site.