Skip to Page Content

Ask Your ADA Questions
1-800-949-4232 [voice/tty]

Accessibility & Usability in Website Design

The websites: adacourse.org, adaresources.org, adagame.org, adaanniversary.org and its webcourses are collaborations 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. We strive to ensure that the websites are as aesthetically pleasing, useful, and most of all accessible to the widest audience possible.

If you have any questions or comments on the accessibility or finding information in a website or 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 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, the website features the following:

1. Keyboard shortcuts
2. Logical and consistent navigation
   • Links: distinct and reinforce location
   • Tools in webcourses
   • Navigation between pages of a webcourse (horizontal navigation)
   • Navigation within a page of a webcourse (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).

The 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

The website has been programmed to offer keyboard shortcuts to help in directly accessing the course 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 for the Webcourses

• r key for Resources
• p key for Previous section
• n key for Next section
• l key for Login to Course Form   *Only available on the login page for the course*
• k key for Skip to Page Content or Top of Page
• i key for Course Index
• g key for Glossary
• d key for Course Feedback Form
• e key to Exit Course.
  * Stores your page location so the next time you login into the course you can start from where you left off.

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 letter "i" to access the Course Index:
  <a href="http://www.course.org/index.php"   title="Index of Course (ctrl/alt + i)"  ACCESSKEY="i" >Index</a>

Logical and consistent navigation

The 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 webcourses

There are three links to tools and an "Exit Course" link displayed on most pages in webcourses.

If you are viewing the page for a tool in a webcourse, that respective link will not be shown.
For example: When viewing the "Resources" webpage, the text "Resources" will be displayed instead of a "Resources" link.

• 

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

• 

  Select this link to find the definitions of disability-related terms or search an online dictionary.

• 

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

• 

  When you select this link, you will be returned to the webcourse login page and your location in the webcourse when you exited will be recorded, so that on your next login you can return to the page in the webcourse where you left off.

To help us better serve you, please use the "Course Feedback" to report any issues or suggestions with a webcourse; this link is available on every page in the footer of the webcourse.

Navigation between pages of a webcourse (horizontal navigation)

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

• A counter to tell your relative position in the webcourse by section number, section name, page name, and page number of total pages within the section.

  For example: Your location in Topic 1, Page 2 would be denoted as:
  Topic 1 of 8, Purpose of the ADA, The Statistics, Page 2 of 7.
  It would also be shown as 1.2 Statistics for the title of the window in the web browser.

• A left-pointing arrow (or "Previous Page" link) takes you to the previous page in the webcourse.
• A right-pointing arrow (or "Next Page" link) takes you to the next page in the webcourse.

Also, for some pages in a webcourse, there are "Return to ..." links or textual reminders to use the "Back," "Go Back," or "Previous" function of your web browser to guide you in returning to the previous page in the webcourse. Additionally, some webcourses are designed to be taken in a sequential nature; that is, the contents of sections can be viewed in the Index of the Course but are not available as links until the previous section is finished.

For example: In the ADA Basics webcourse, if you are on the last page of Topic 1, the arrow that would take you to the start of the next section, Topic 2, will not be displayed until you have completed and submitted your answers to the Topic 1 "Apply Your Knowledge" questions.

Navigation within a page of a course (vertical navigation)

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

• "Skip to 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 a webcourse and directly to the page title to start the page 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, "Skip to Page Content").
  
  
• Links to directly go to the main or topical headings within a page are available as a bulleted list of links or included in 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, the 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 through a caption or by making the graphic itself be a link to another webpage that describes 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)

The 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 the 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

The website has been created and tested to be usable with alternative computer technology. The 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, the 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. The 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

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