• Skip to Page Content

Accessibility & Usability in Tutorial Design

This tutorial, Title II of the Americans with Disabilities Act, was developed as an educational tool of the ADA Training Resource Center and is a collaboration of the DBTAC National Network of ADA Centers . All contents are maintained by the DBTAC: Southeast ADA Center (Southeast DBTAC) - a Project of the Burton Blatt Institute (BBI) at Syracuse University. We strive to ensure this website is as aesthetically pleasing, useful, and accessible to the widest audience possible.

If you have questions or comments on the accessibility or usability of the tutorial, please contact:
DBTAC: Southeast ADA Center (Southeast DBTAC)
Email: sedbtacproject@law.syr.edu     Phone: 404-541-9001 (voice/tty)

Methods Used to Promote Web Accessibility and Usability

This website promotes accessibility and usability in its design and development based on usability research and two established web accessibility guidelines, Web Content Accessibility Guidelines (WCAG) and Section 508 Standards for Electronic and Information Technology.

To support the web accessibility guidelines and usability, this website features the following:

1. Keyboard shortcuts
2. Logical and consistent navigation
   • Links: distinct and reinforce location
   • Tools in tutorial
   • Navigation between pages of tutorial (horizontal navigation)
   • Navigation within a page of tutorial (vertical 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 are established by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C).

This website uses the WCAG 1.0 which has three priority checkpoints:

• Priority 1 (must satisfy for basic accessibility)
• Priority 2 (should satisfy to remove significant accessibility barriers)
• Priority 3 (may satisfy to improve accessibility).

The WCAG 1.0 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.

Besides the web accessibility guidelines, the World Wide Web Consortium (W3C) defines specifications for various web technologies. The HyperText Markup Language (HTML) is the most common and basic language used to make webpages. There are various tools, such as the W3C HTML Validation Service, that can be used to verify that the pages of a website meet established specifications, such as the W3C HTML 4.01 Specification.

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 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, the U.S. Department of Education requires that states receiving assistance under the Assistive Technology Act (AT Act) State Grant program comply with Section 508.

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 are based on the Web Content Accessibility Guidelines (WCAG) 1.0, must all be met for a website to be in compliance with Section 508 Standards 1194.22.

Keyboard shortcuts

This tutorial has been programmed to offer keyboard shortcuts to help in directly accessing its navigation and some frequently used links.

There is variable support among web browsers and operating systems for keyboard shortcuts. Currently, Internet Explorer 4.0 or above but NOT Netscape Navigator support keyboard shortcuts with the use of an "attention" key (this also varies with the operating system but usually "Cmd" for Macintosh and "Alt" for Windows). However, since technology changes so rapidly, web browsers and operating systems may use different shortcut methods, or perhaps even support use of the "shortcut key" by itself (without the need for the "attention" key).

• Shortcut keys in the Tutorial

  For example: If you are using Internet Explorer in a Windows operating system, to shortcut to the Index, you would select - Alt key + 4 key then the Enter key.

  • 1 key for Start of Page Content
  • 2 key for Previous section
  • 3 key for Next section
  • 4 key for Index
  • 5 key for Glossary
  • 6 key for Help/Feedback Form
  • 7 key for Resources
  • 8 key to Exit Tutorial
    *Stores your current page location so the next time you login you can start from this page, then takes you to the tutorial login page.

  How to create a keyboard shortcut

  HyperText Markup Language (HTML) is a computer language commonly used to create webpages.

  Example of HTML code for creating a shortcut key (ACCESSKEY) using the "4" key to access the Index:
    <a href="http://www.course.org/index.php"   title="Index of Tutorial (ctrl/alt + 4)"  ACCESSKEY="4" >Index</a>

Logical and consistent navigation

This website provides logical and consistent navigation that reinforces the destination (or target) of the link and is readable when viewed out of context.

Links are distinct and reinforce location

Each link is distinctly worded and identified so that if read by itself, it informs a participant of what to expect (for the destination or target) when the link is selected. Wording links to be meaningfully identifiable and readable out of context is helpful when visually scanning information, and assists a participant who uses alternative computer access technology (i.e., screenreaders) or navigates by a list of links on a webpage.

All navigation links are location sensitive; that is, the current page is displayed as text to provide the participant with an indication of their current location within the structure of the website. However, please note some links or cued text may not be visible to participants who only use graphical web browsers (i.e., Internet Explorer). These "hidden" links or cued text are programmed into the webpage because they are particularly helpful to participants who use a non-graphical or text web browser (i.e., Lynx) and participants who use alternative computer access technology (i.e., screen readers and refreshable Braille displays).

Tools in Tutorial

There are five links displayed on most pages in the tutorial under the heading - Tutorial Tools.

If you are viewing the webpage of a tutorial tool, that respective information under Tutorial Tools will be displayed as text instead of a link.
For example: When viewing the "Resources" webpage, the text "Resources" will be displayed instead of a "Resources" link.

• Index of Tutorial

  Select this link for an outline of the tutorial content and your progress in the tutorial.

• Glossary

  Select this link to find the definitions of terms commonly used in the tutorial or search an online dictionary.

• Help/Feedback

  To help us better serve you, please select this link to report any issues or submit any questions or suggestions on the tutorial.

• Resources

  Select this link for a categorized list of the resources which are cited in this tutorial followed by their external web address.

• Exit Tutorial

  When you select this link, your current page location in the tutorial will be stored so that on your next login you can return to this page, then you will be taken to the tutorial login page.

Navigation between pages of the tutorial (horizontal navigation)

There are several features in this tutorial that help you navigate between pages and also indicate your current position within the content of the tutorial. These "horizontal navigation" features are located near the header and footer of the tutorial:

• Page titles that include information on the module number, page number and module or page name.

  For example: The webpage of Module 1 - Page 2, would be denoted as:
  1.2 Overview of Tutorial.

• A counter to tell your page position within the total number of pages in a module, i.e. Page 2 of 7.
• A left-pointing arrow (or "Previous Page" link) takes you to the previous page in the tutorial.
• A right-pointing arrow (or "Next Page" link) takes you to the next page in the tutorial.

Also, some pages in the tutorial have a "Return to ..." link or textual reminder to use the "Back," "Go Back," or "Previous" function of your web browser to guide you in returning to the previous page in the tutorial. Additionally, some pages are designed to be accessed in a sequential nature; that is, the information is not available as a link until a previous section or task is finished.

For example: In the ADA Title II tutorial, a link to the Post Test from the Index or via a Next arrow on the last page of Module 9 will not be available until all pages of each module have been viewed.

Navigation within a page of the tutorial (vertical navigation)

There are several features in this tutorial that help you navigate within a page. These "vertical navigation" features help participants access desired information within a page more directly:

• "Start of Page Content" link, which is visually located in the top right hand corner (or read by a screenreader as the first aspect) of every webpage, takes you over the repetitive navigation of the tutorial and directly to the page title, which is the start of a page's content.
  

  This "skip-nav" or "skip link" is a specific requirement of Section 508 - 1194.22 (o),
  "A method shall be provided that permits users to skip repetitive navigation links."

• "Top of Page" link, which is located at the end of the content for each page, takes you back to the start of the page content (same place as the link, "Start of Page Content").
  
  
• Links to directly go to the main or topical headings within a page are available as a bulleted list of links after the page title and before the introductory paragraph of a page to help in more readily identifying and accessing the content within a page.

Alternative text and descriptions for graphics (non-text)

Aside from the text-based navigation structures, this website has been designed to be mostly content, and to permit faster downloading, we have avoided gratuitous use of graphic elements. When a graphic is used, a short, literal description of the information conveyed by the image is provided. This description known as alt-text (short for "alternative text") helps participants who use non-graphical or text web browsers, or who may have images "turned off", or who otherwise may have difficulty viewing the graphics.

However, for complex graphics (i.e., photographs or collages), more detailed information needs to be offered. Two ways of providing this "long description" are through a caption above or below the graphic or by making the graphic itself be a link to another webpage that provides the description of the graphic.

How to create alternative text and link to a detailed description of an image

HyperText Markup Language (HTML) is a computer language commonly used to create webpages.

Web accessibility guidelines require alt-text for all images. This is because when the alt-text is not provided, the file name for the image (i.e., wc0001.gif) is displayed in place of the image for participants who use a text browser or who have difficulty viewing images in a web browser (i.e., slow Internet connection, images "turned off"). However, for images which are non-informative or duplicate adjacent/surrounding text, or are spacer images, the alt-text needs to be set to empty or null (so that nothing is shown to users who cannot view the images for whatever reason).

How to create alternative text of a spacer or non-informative image

HyperText Markup Language (HTML) is a computer language commonly used to create webpages.

Example of the HTML code for creating an image (IMG) with alternative text (alt) set to null:
 <IMG src="spacer.gif" alt="">

Cascading style sheet (CSS)

This website uses templates and a cascading style sheet (CSS) to achieve a consistent style of presentation across all webpages and to facilitate separating the content from the layout or format. The CSS is a single file that is applied to the code of each webpage and is used to specify such characteristics (or styles) 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 webpages for which the CSS is applied. The CSS for this website is automatically used unless participants choose to use their own customized CSS or "turn off" CSS altogether.

A website needs to be tested to ensure its usability and readability with style sheets "turned off." In addition, there are various tools, such as the W3C CSS Validator to verify that the CSS used in a website meets established specifications.

Usability with alternative computer technology

This website has been created and tested to be usable with alternative computer technology. This website has been tested on workstations using popular screen reader technologies (i.e., JAWS) and within numerous operating systems (Windows, Macintosh, and Linux) and by running different web browsers under various combinations of conditions (i.e., sounds and/or images "turned on" or "turned off"). The tested web browsers include text-only browsers (i.e., Lynx), and popular graphic browsers (Internet Explorer, Netscape Navigator, Opera, and Mozilla). Additionally, this website 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. This website has also been tested to ensure important information is not conveyed with color, and that foreground and background colors provide sufficient contrast; this ensures usability by individuals who have color-blindness, or low vision, or are working with technology or an environment where the color or lighting may be comprised.

Clear and simple language

This website has tried to use clear and simple language appropriate for the content of the website. 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 paragraphs, or offering a list of links that identify and directly access the topical headings within a page. In addition, all forms have labels associated with their field, such as the word "Name" before the text box in which to enter your name. Furthermore, where necessary, supplemental text with graphic elements has been provided to facilitate comprehension.