(ADA) Americans with Disabilities Act
ADA Basic Building Blocks Course
Project of the ADA National Network
Questions on the ADA?
1-800-949-4232 (voice/tty)

Accessibility & Design of the ADA Basics Webcourse

We strive to ensure that the ADA Basic Building Blocks webcourse is as aesthetically pleasing, useful, and most of all accessible to the widest audience possible.

This webcourse is a collaboration of the ADA National Network. All contents are maintained by the Southeast ADA Center - a project of the Burton Blatt Institute (BBI) at Syracuse University.

To promote accessibility and usability, this webcourse design and development is based on the results of usability research and established web accessibility guidelines, Web Content Accessibility Guidelines (WCAG) and the Electronic and Information Technology Accessibility Standards (Section 508).

If you have questions or encounter problems in using this webcourse, please contact: Southeast ADA Center
Email: ADAsoutheast@law.syr.edu
Phone: 404-541-9001 (voice/tty)

Methods Used to Promote Web Accessibility and Usability

The ADA Basics webcourse promotes accessibility and usability by providing:

  1. Keyboard shortcuts
  2. Logical and consistent navigation
  3. Alternative text and descriptions for images
  4. Cascading style sheet (CSS)
  5. Usability with alternative computer technology
  6. Clear and simple language

Web Content Accessibility Guidelines (WCAG)

The WCAG was established by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). Within the WCAG 1.0, there are three priority checkpoints:

The WCAG 1.0 guidelines also define two major themes of accessible web design:

  1. Ensuring web content gracefully transforms regardless of constraints, such as work environment, technological barriers, and sensory, physical, or cognitive disability.
  2. Making web content understandable and navigable.
     

Section 508 Standards for Electronic and Information Technology

Section 508 was established through Section 508 of the Rehabilitation Act by the Architectural and Transportation Barriers Compliance Board (Access Board) of the U.S. Federal Government. The scope of the Section 508 is limited to the Federal sector. It does not apply to the private sector, nor does it generally impose requirements on the recipients of Federal funds. However, states receiving assistance under the Assistive Technology Act (AT Act) State Grant program are required to comply with Section 508 according to the Department of Education, which administers the AT Act.

The Section 508 Standards define the types of technology provided and set forth provisions that establish a minimum level of accessibility within four subparts:

  1. General (defines terms, exemptions)
  2. Technical Standards (application criteria specific to various types of technology )
  3. Functional Performance Criteria (overall product evaluation and for technology not specifically covered in Subpart B )
  4. Information, Documentation, and Support (addresses access of materials provided to end users)

Within Section 508 Subpart B (Technical Standards), the provisions for Web-based Intranet and Internet Information and Applications (1194.22) are specifically addressed in paragraphs (a) through (p). These sixteen provisions, which were based on the WCAG, must all be adhered to for a website to be in compliance with the Section 508 Standards.

Keyboard Shortcuts

The ADA Basics webcourse has been programmed to offer keyboard shortcuts for course navigation (Previous section, Next section, Course Index, Glossary, Resources, Course Feedback) and some commonly used links (Skip to Page Content, Top of Page, Exit Course). In describing the "shortcut keys" below, the letter key and the corresponding letter within the link name have been listed in bold. For example: l to go to the Login to Course form.

Please note there is variable support among browsers and systems for using these shortcuts. Currently, Internet Explorer 4.0 or above (but not Netscape Navigator) allows the user to select the appropriate "attention" key (this also varies but usually "Cmd" for Macintosh machines and "Alt" for Windows machines), then select the following letter:

However, since technology changes so rapidly, also realize that besides the above technique, there may be other systems which could use different shortcut methods, or perhaps even allow the "shortcut key" to be used by itself (without the need for the "attention" key).

An example of the HTML coding for the shortcut key (ACCESSKEY) of the link to the ADA Basics Course Index using the letter "i" is as follows:
  <a href="http://www.adabasics.org/index.php"   title="Course Index (ctrl/alt + i)"  ACCESSKEY="i" >Index</a>

Logical and consistent navigation

The ADA Basics webcourse provides logical and consistent navigation. The target of all links has been identified, and linked text is brief and meaningful to ensure readability when read out of context. For example, to inform a user viewing a Resources page of more information, instead of "Click here", the linked text would say "View more Resources" Linked text like the example, if read by itself, informs the user of what to expect and is helpful when scanning information. It also assists users whose technology can list all the links of a webpage and takes into consideration people who may be using alternative computer access technology ("click" is specific to a mouse).

All navigation links are location sensitive; that is, the current page is displayed as text to provide the user with an indication as to their current location within the structure of the webcourse However, please note some links or cued text may not be visible to users of graphical browsers. These "hidden" links or cued text are programmed into the page as they are particularly helpful for people using non-graphical or text browsers and people using alternative computer access technology like screen readers and refreshable Braille displays.

A "Course Index" link, available from every page, has been provides information about the general layout and sections of the webcourse Additionally, there is a detailed description of the webcourse and its accessibility features, on this page ("Accessibility & Design of the ADA Basics Webcourse"), which is available through the "Accessibility" link in the footer of every page. Furthermore, navigation mechanisms and ways to bypass them, including Keyboard shortcuts and consistently located: Course buttons, Navigation between course pages (horizontal navigation), and Navigation within a course page (vertical navigation).
 

Course Buttons

Course Index  ,Glossary , Resources  , Exit Course are the four course buttons located on the top and bottom of each page after the course title ("ADA Basics Building Blocks"). In the bottom of the page, there is also a link to the "Course Feedback" form that precedes the four course buttons.

In general, selecting a linked button such as "Course Index", takes you to the respective page, which in this case is "Course Index". However, if you select the "Exit Course" linked button, you will be returned to the opening page of the course and your location within the course when you selected "Exit Course" will be recorded so next login you can return to the course where you left off. Also, for the most part, if you are viewing one of the linked button pages, that respective button will not be visible. For example, if you are viewing the "Resources" page, the button for "Resources" will not be seen.

Navigation between course pages (horizontal navigation)

There are several navigation features in the webcourse to indicate your current position and provide "directional links" to the previous course page and the next course page. These horizontal navigation features are located to the right side of the course page after the section / page name at the top and before the course feedback link at the bottom. These horizontal navigation features include:

However, please note some supplemental course page, such as "Resources" require you to use the "Back", "Go Back", or "Previous" function of your browser to return to the previous course page from which you followed the link. Additionally, due to the sequential nature of this course design, the contents of uncompleted sections can be viewed in the Course Index but not accessed until the previous section is finished. For example, if on last page of Topic 1, the next arrow, which would take you to Topic 2, will not be displayed until you have answered the Topic 1 "Apply Your Knowledge" questions.
 

Navigation within a course page (vertical navigation)

Several navigational features are provided in a course page to help the user more directly access desired information within a page. These vertical navigation features include:

Remember, all navigation links are location sensitive; that is, the current page is displayed as text or the associated button is absent to provide the user with an indication as to their current location within the structure of the webcourse.

Alternative text and descriptions for graphics (non-text)

The ADA Basics webcourse, aside from the consistent text-based navigational structures, has been designed to focus on content and has avoided gratuitous use of graphic elements to assist in faster downloading of the webcourse When a graphic is used, a short, literal description of what the image represents is provided. This description known as alt-text (short for alternative text) is displayed in the browser of people using non-graphical or text browsers, users who may have images "turned off", and other users who may have difficulty viewing the graphics. For people using graphical browsers, such as Internet Explorer, the alternative text appears when the pointing device (i.e. mouse) hovers over the graphic.

Additionally, for complex graphics, more detailed information may be offered through a caption or by making the graphic be a link to another web page that describes the graphic in detail. An example of the code for an image (IMG) with its alternative text (alt) and making the graphic a link to a web page for more detailed information is as follows:
  <a href="logodescription.htm" title="Description of ADA Basics Webcourse Logo"><IMG src="logo.gif" alt="Logo for ADA Basics webcourse" height="200" width="200"></a>

For an example of a descriptive link, visit Description of Logo for ADA Basics Webcourse.

Cascading style sheet (CSS)

The ADA Basics webcourse uses templates and a cascading style sheet (CSS) to achieve a consistent style of presentation across all course pages and to facilitate separating the content from the layout or format. The CSS is one file that is applied to each course page and is used to specify such characteristics as color, font type, font size, and spacing for a particular feature, such as a page title. Thus, if a change of color is desired for the page title, altering the CSS for that change becomes reflected in all the course pages with that feature. Users can choose to use the CSS for this webcourse, their own customized CSS, or "turn off" CSS altogether. Accordingly, the webcourse has been tested to ensure its usability with style sheets "turned off".

Icon for W3C Valid Cascading Style Sheet (CSS) In addition, the W3C CSS Validator has been used to to verify that the CSS used in the webcourse meets established specifications.

Icon for W3C Valid HTML 4.0 Transitional Furthermore, the coding of the webcourse has been tested to ensure its integrity has been maintained. Besides the web guidelines, the World Wide Web Consortium (W3C) defines specifications for using HyperText Markup Language (HTML), the general publishing language of the World Wide Web. The W3C HTML Validation Service has been used to verify the course pages meet the established W3C HTML 4.01 Specification.

Usability with alternative computer technology

The ADA Basics webcourse has been created and tested to be usable with alternative computer technology. The webcourse has been tested on workstations utilizing popular screen reader technologies such as Jaws. Furthermore, the webcourse has been tested in numerous operating systems (Windows, Macintosh, Linux) running different browsers under various combinations of conditions, such as sounds and/or images "turned on" or "turned off". The tested browsers include text-only browsers, such as Lynx, and various popular graphic browsers such as Internet Explorer, Netscape Navigator, Opera, and Mozilla. Additionally, the webcourse has been designed and tested to be usable without a mouse, on small or low-resolution screens, with only voice or text output, and with alternative keyboards. The webcourse has also been tested to ensure important information is not conveyed with color, and hat foreground and background colors provide sufficient contrast; this ensures usability by individuals who may have color-blindness, low vision, or are working with technology or an environment where color or lighting may be comprised.

Clear and simple language

The ADA Basics webcourse has tried to utilize clear and simple language appropriate for the content of the webcourse. Large blocks of information have been divided into more manageable groups using such elements as paragraphs, lists, and headings. Scanning of information has been facilitated by front-loading headings and paragraph text or offering a list of links that go to topical headings within a page. In addition, all forms have labels, such as "Name" associated with their field, such as the text box in which to enter the name. Furthermore, where necessary, supplemental text with graphic elements has been provided to facilitate comprehension.

Please use the "Back" button of your browser to return to the previous page.