Contact CITT   |    21st Century Classrooms   |    Novus   |    Online@HCC   |    CITT Resources     
      CITT Home   |    Conferences   |    Distance Learning   |    Tutorials   |    Workshops

Best Practice

View All
View Faculty
View Staff
Faculty Extras Home

Accessibility and Web Site Development ... Dolores Pusins

Tim Berners-Lee , World Wide Web Consortium (W3C) founder, and inventor of the World Wide Web, indicates that the power of the Web is in its universality. He says that access by everyone regardless of disability is an essential aspect. In 1997, the World Wide Web Consortium launched the Web Accessibility Initiative and made a commitment to lead the Web to its full potential. The initiative includes promoting a high degree of usability for people with disabilities. The United States government established a second initiative addressing accessibility and the Web through Section 508 of the Federal Rehabilitation Act.

Web Site Accessibility

When developing Web sites for classes and other informational purposes, consider using a Web development program such as Dreamweaver. These programs include features that assist you in creating accessible content. To design accessible content requires that you understand accessibility requirements and make subjective decisions as you create a Web site. Dreamweaver supports three accessibility options: screen readers, keyboard navigation, and operating system accessibility features.

Using Screen Readers with Dreamweaver

Screen readers assist the blind and vision impaired by reading text that is displayed on the screen through a speaker or headphones. The reader starts at the top-left corner of the page and reads the page content. If the Web site developer uses accessibility tags or attributes during the creation of the Web site, the screen reader also recites this information and reads non-textual information such as button labels and image descriptions. Dreamweaver makes it easy to add text equivalents for graphical elements and to add HTML tags to tables and forms through the accessibility dialog boxes. Dreamweaver supports two screen readers: JAWS and Window Eyes.

Activating the Accessibility Dialog Boxes

To create accessible pages in Dreamweaver, you associate information, such as labels and descriptions, with your page objects. After creating this association, the screen reader recites the labels and descriptions information. You create the association by activating and attaching the accessibility dialog boxes to objects on your page. These dialog boxes appear when you insert an object for which you have activated the corresponding Accessibility dialog box. You activate the Accessibility dialog boxes through the Preferences dialog box. You can activate Accessibility dialog boxes for form objects, frames, images, media objects, and tables.

Selecting Images in the Accessibility area activates the Image Tag Accessibility Attributes dialog box. Thus, anytime you insert an image into a Web page, the dialog box will display. This dialog box contains two text boxes  Alternate Text and Long Description. The screen reader reads the information you enter in both text boxes. You should limit your Alternate Text entry to about 50 characters. For longer descriptions, provide a link in the Long Description text box to a file that gives more information about the image. It is not required that you enter data into both text boxes. The following steps show how to use the Image Tag Accessibility Attributes dialog box when inserting an image.

Navigating Dreamweaver with The Keyboard

Keyboard navigation is a core aspect of accessibility. This feature also is of particular importance to users who have repetitive strain injuries (RSI) or other disabilities, or for those who would prefer to use the keyboard instead of a mouse. You can use the keyboard to navigate the following elements in Dreamweaver: floating panels, Property inspector, dialog boxes, frames, and tables.

Operating System Accessibility Features

The third method of accessibility support through Dreamweaver is through the Windows operating system high contrast setting. High contrast changes the desktop color themes for individuals who have vision impairment. The color schemes make the screen easier to view by heightening screen contrast with alternative color combinations. Some of the schemes also change font sizes.

You activate this option through the Windows Control Panel. The high contrast setting affects Dreamweaver in two ways:

  • The dialog boxes and panels use system color settings.
  • Code view syntax color is turned off.

The pages you design render colors as they will display in a browser. The following steps show how to turn on high contrast and how to change the current high contrast settings.

  1. In Windows XP, click the Start button on the taskbar and then click Control Panel on the Start menu. If necessary, switch to Classic View and then double-click the Accessibility Options icon.
  2. Click the Display tab and then click Use High Contrast.
  3. Click the Settings button.
  4. Click the Your current high contrast scheme is arrow.
  5. Click the OK button.
  6. Click the Control Panel Close button.

Author Bio:

  • Teaching at HCC since January, 1978
  • Pioneered online courses beginning in 1996
  • Developed the following AS degree programs: Computer Information Tech (first in state); Multimedia Technology, Networking Services Technology, Office Administration, Internet Services Technology (first in state), and most recently  Database Technology
  • Established the Microsoft Networking and Cisco Academies
  • Developed over 75 one- and three-credit courses
Athletics  |   Foundation  |   HCC Email   |   OIT  |   Human Resources  |   Contact HCC  |   HCC Home