Skip to main content

Transitioning to Accessibility

Author: Corrie Haffly, PixelMill

PixelMill offers modular site-building solutions optimized for Web 2.0, featuring high quality templates, images, video, audio, add-ons, platform-specific solutions, training, and custom services for developers' web design needs.

After learning CSS, accessibility will seem like a breeze!

Similarly to XHTML, accessibility guidelines are a basic list of rules -- once you apply them, you're done! Accessibility guidelines have been developed to allow people with disabilities to still be able to access websites through other technologies such as speech readers, text-only browsers, and so on.

The main set of accessibility guidelines is called the Web Content Accessibility Guidelines and can be found here: http://www.w3.org/WAI/intro/wcag.php. Organizations and governments may have their own set of guidelines.

Checking Your Site

We have a series of articles that you can look at to get more into the details of accessibility, but this article will give you a basic checklist to use for your site. The good news is that if your site is XHTML-compliant and uses semantic markup, you are halfway there!

  • Make sure your images have the alternative text defined, and have them be descriptive of the picture or image. This was already covered in the XHTML article! If someone is using a text-only browser or a speech reader, they will still be able to understand what the picture represents.
  • Do the same for images that have "hotspots" (image maps) as well. See this article for instructions if your site has images with hotspots: http://www.pixelmill.com/support/al1076/kb101566.htm.
  • If your template has Flash or Swish movies, you should use the SWFObject technique to provide alternative content for your movie so that users who can't view the movie (because they are using a text browser, for example) will still be able to understand what is in the movie. PixelMill templates should already have this built-in, but you'll have to fix any movies you have added yourself. See this article for more details: http://www.pixelmill.com/support/kb101619.htm.
  • Along those lines, if your website uses Flash or Swish movies for navigation, you should definitely have some normal links elsewhere on the page (or in the alternative content) that allows people to follow the links even if they can't view the movie.
  • Make sure that the text on your site is easy to read and resizable. This may require some changes to your style sheet—for example, changing some colors so that there is more contrast between the background and text, or changing the font sizes to use "em" or percentage units. Using resizable units may be confusing at first—what I find easiest is to define the body element at .7em, and then use percentages for the rest of the page sections or elements. When the default font size is .7em, 110% looks a lot like 11pt, 140% looks a lot like 14pt, etc. This allows people with low vision to resize the text to be larger so that they can read it more easily.
  • Follow the guidelines in the semantic markup article to separate your content from the presentation and design. This helps text-to-speech readers process your web page more easily.

Accessibility in FrontPage and Expression Web

Both FrontPage 2003 and Expression Web have an accessibility tool that can help you check your website, and that you can get to by going to Tools > Accessibility (FrontPage) or Tools > Accessibility Reports (Expression Web). Once there, check the WCAG Priority 1 and WCAG Priority 2 checkboxes (and the Access Board Section 508 for US government accessibility guidelines). To start off, only check the Errors checkbox to see if your site breaks any flagrant accessibility errors. Then click the Check button.

FrontPage and Expression Web will both generate a list of errors on your page or site. Once you go through and fix them, you may want to check again for warnings and manual checklists (in Expression Web, click the green arrow to change the options), which will help you hit topics like making sure that font colors can be read or that text can be read even if the style sheet is turned off.

Next: Transitioning to Expression Web

Articles in this series

  1. Transitioning to XHTML Strict in 10 Steps
  2. Transitioning to Semantic Markup
  3. Transitioning to CSS
  4. Learning CSS
  5. Transitioning to Accessibility [this article]
  6. Transitioning to Expression Web

Related Links