Progressive Options Tree logo
Yaquina Bay bridge

Progressive Options

See our abilities, not our disability.

Building and Testing Accessible Web Sites

This page presents a brief introduction to accessible Web building and suggests some useful links to help build and test accessible Web pages.

GoodSearch logo

Web This Site

benefits Progressive Options!

About Accessible Web Sites

Some Web sites can be attractive and provide useful information but lack consideration for users with disabilities such as vision loss, restricted mobility, and hearing loss. Accessible Web sites take into account these users to make Web pages as useful and navigable by as many users as possible. Such sites utilize the inherent flexibility in Web coding standards and take advantage of such technology as browser-accessibility options and screen readers.

The Progressive Options Web site is designed to comply with recognized Accessibility standards. We strive to deliver information readily accessible to Web users with restrictive disabilities.

Suggestions from our users to improve accessibility are welcome!

Icons at the bottom of a page indicate that the page has been tested and conforms to the indicated standards.

About HTML and CSS

W3C is the World Wide Web Consortium and sets standards for Web coding. Most browsers such as Internet Explorer and FireFox, interpret Web page coding according to these standards, but variations in the way particular browsers interpret the coding (as well as the user's browser settings) can affect the way a Web page looks.

To start with, an Accessible Web site complies with the W3C HTML (Hypertext Markup Language) standard and to the W3C CSS (Cascading Style Sheet) standard.

HTML is a language used to code Web pages. CSS is a method of specifying "styles" for Web pages. A style specifies how the HTML code will be interpreted. For example, the color, size, and position of an element (such as a paragraph) can be specified one time in a style sheet; then, by referencing the style, the element displays the same on each page without laboriously recoding each time. Styles can be defined within individual Web page, but for the sake of consistency within a Web site an external style sheet should be used.

For example, for all the pages in this site, the <P> paragraph element has an off-white background with dark wine-colored letters. (The size defaults to the browser's "normal," somewhat larger than most commercial Web sites use.)

Styles can also be combined or modified within the document for special effects, but this is a little trickier.

Using a style sheet makes it easier to achieve consistency within the Web site while still allowing for interesting variations.
 
When you use styles consistently, it makes navigation easier for your user, and easier for you to adhere to Accessibility requirements. Valid HTML code and style sheet are prerequisites for most accessibility testing tools!

The definitive accessibility standard is the W3C Accessibility Standard.

Fonts: About Web Text

It is possible to specify a wide variety of fonts for Web pages. Those fonts can only display on the users screen if the browser has access to them. If not, the browser will choose another font. A style sheet can specify a list of fonts for the browser to choose from. For example:
font-family: "Times New Roman", Times, serif;

This tells the browser to use Times New Roman font if possible; if not, use Times or any "serif" font.

For accessibility, avoid fancy fonts and prefer fonts readily accessed by most browsers. WebAIM's Fonts provides useful insight on fonts for accessible Web sites.

Specifying Color

Browsers paint by number, for example Blue is specified as the hexadecimal number #0000FF. There are many common colors (Red, Black, White, etc.) that can be specified by name, but if a browser doesn't recognize the name, it will "guess" at the color, which can produce painful surprises. Only 16 color names will pass testing for valid HTML and CSS. Read more about HTML Color names.

For a more comprehensive understading of accessibility see Introduction to Web Accessibility from W3C Accessibility Initiative.

Go to Top

Testing for Accessibility

Accessibility testing tools are available on the Internet. Many are free.1

First, ensure that Web page markup (HTML) meets current standards. There are many tools that do this. The Markup Validation Service by W3C is very easy to use and is free. Once the code passes, remember to test any embedded styles. If the page uses a style sheet, that must be valid as well. The CSS Validation Service by W3C is easy to use and free.

HiSoftware's Cynthia Says is free, easy to use and educational if you are just beginning to build and test Accessible Web sites. To test a page see Cynthia Says Accessibility Test.

HiSoftware also offers this excellent free starter manual. Web Accssibility Handbook.

To see what a Web page looks like when all the graphics and color is taken away and only the text remains, run the Lynx Viewer. This is what will the visually impaired user "sees" when relying entirely on a voice screen reader or Braille reader. Does it still make sense? Has important information been lost?

Color and Contrast are the heart of Web page appeal, but they are also critical to accessibility for a wide range of visual impairments including low vision and color blindness. Numerous testing tools have been developed to test color and contrast. We used AccessColor - Online Tool for Colour Contrast early in the design phase to arrive at an accessible style sheet.

Web Accessibility Test toolbar from Web Accessibility Tools Consortium. Wow. Download and install this toolbar for use with Internet Explorer. Access numerous tools from your browser tool bar. And yes, it is freeware.

Go to Top

1About Bobby: One noteworthy free test tool was Bobby from Cast Software. The most recent incarnation of this tool can now be purchased from IBM under the name of Rational Policy Tester, a complex software tool that tests for online "privacy, quality and accessibility compliance."

 TOP of Page   Email us! 
Valid HTML 4.01 Transitional  Valid CSS!  Cynthia Tested!  lynx inspected icon
© 2008, Progressive Options.
All rights reserved.