Accessibility & Usability in Website Design

The DBTAC: Southeast ADA Center (Southeast DBTAC) strives to ensure that its website is as aesthetically pleasing, useful, and most of all accessible to the widest audience as possible. If you have any questions or comments on the accessibility of the website or finding information on the website, please contact the Southeast DBTAC by emailing sedbtacproject@law.syr.edu.

To promote accessibility and usability, the website design and development process 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).

Methods Used to Promote Web Accessibility and Usability

The Southeast DBTAC website promotes web 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 1.0 (WCAG)

The WCAG was established by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). Within the current version, WCAG 1.0, there are 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 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 Electronic and Information Technology Accessibility Standards

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, 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:

• A: General (defines terms, exemptions)
• B: Technical Standards (application criteria specific to various types of technology )
• C: Functional Performance Criteria (overall product evaluation and for technology not specifically covered in Subpart B )
• D: 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 followed for a website to be in compliance with the Section 508 Standards.

Keyboard shortcuts

The Southeast DBTAC website has been programmed to offer keyboard shortcuts for navigation among the five portals of the website[ Home, About Us, ADA, I T , and Español (Spanish) ], "Quick Links," and some frequently used links (Site Index, Skip to Page Content). In describing the "shortcut keys" below, the letter key and the corresponding letter within the link name have been listed in bold. For example: i to go to the Site Index.

•   k   to Skip to Page Content (Top of Page)
•   n   to go to Navigation of a portal (About Us, ADA, I T , Español)
•   z   to go to Southeast DBTAC Home Portal
•   b   to go to About Southeast DBTAC Portal
•   d   to go to ADA Portal (Americans with Disabilities Act)
•   t   to go to Information Technology (I T) Portal
•   l   to go to Español Portal (Spanish)
•   i   to go to Site Index
•   g   to go to Glossary

When "Quick Links" are offered, keyboard shortcuts have been provided to each of the seven quick links using the numbers on the keyboard. To access the shortcut for a quick link, use the ctrl/alt + desired number key (1-8).

1. Legal Updates & Issues
2. News
3. Promising Practices
4. Publications
5. State Resource Network
6. Training Events & Tools
7. Webcourses
8. Web Links

An example of the HTML coding for the shortcut key (ACCESSKEY) of the link to the Southeast DBTAC Home using the letter "z" is as follows:
  <a href="http://www.sedbtac.org/"   title="Southeast DBTAC Home Page (z)"   target="_self"   ACCESSKEY="z">Home</a>

Logical and consistent navigation

The Southeast DBTAC website 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 News of more articles, instead of "Click here," the linked text would say "More News articles." 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 of 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 website. 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 Site Map link, available from every page, has been provided to give users information about the general layout and sections of the website. Additionally, there is a detailed description of the website and its accessibility features, on this page ("Accessibility and Usability in Website Design "), which is available through the "Accessibility" link in the footer of every page. Furthermore, navigation mechanisms and ways to bypass them have been consistently provided, including keyboard shortcuts and features such as:

• "Skip to Page Content" link as the first line in every page to take the user over the navigation and directly to the title/text of the page.
• Tabbed portal navigation bar at the top of each page.
• "Breadcrumbs" (or vertical navigation) above the content of each page to indicate current position and provide "origin" links prior to the current page. The breadcrumb links follow the words: "You are here:"
• "Top of Page" at the end of the content for each page to take the user back to where the content starts.
• For long or multi-part pages, links that go to the main or topical headings within a page are available as a bulleted list or included in the introductory paragraph.

The website is organized according to a common hierarchical structure based on specific areas of information (identified as "portals"), which are then divided into related topics. The five portals:

• Home
• About Us
• ADA (Americans with Disabilities Act)
• Information Technology (Accessible I T)
• Español

Although there may be some overlap of content among these divisions, they serve as useful guideposts in directing users to the content for their area of interest. After the logo and website name, the navigation is displayed on every page in two levels: a) Portals are displayed as tabs and serve as primary navigation links; b) Related topic links (secondary navigation) are alphabetically arranged in an ordered list as the first part of the left navigation. There are also "Quick Links" and "Features" on some pages as part of the left navigation. Furthermore, some pages offer a "breadcrumb" (or vertical navigation) identified by "You are Here:" which lists the prior pages as links and ends with the title of the current page.

Remember, 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 website.

Alternative text and descriptions for graphics (non-text)

The Southeast DBTAC website, aside from the consistent text-based and ordered (alphabetical or list) navigational structures, has been designed to focus on content and has avoided gratuitous use of graphical elements to assist in faster downloading of the website. 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 Southeast DBTAC Logo" ><IMG src="logo.gif" alt="Logo for Southeast DBTAC"></a>

For an example of a descriptive link, visit Example of description for a complex graphic, Southeast DBTAC logo.

Cascading style sheet (CSS)

The Southeast DBTAC 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 one file that is applied to each webpage 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 webpages with that feature. Users can choose to use the CSS for this website, their own customized CSS, or "turn off" CSS altogether. Accordingly, the website has been tested to ensure its usability with style sheets "turned off." In addition, the W3C CSS Validator has been used to verify that the CSS used in the website meets established specifications; this is represented by this icon: .

Furthermore, the coding of the website 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 publishing language of the World Wide Web. The W3C HTML Validation Service has been used to verify the webpages based on the W3C HTML 4.01 Specification.

Usability with alternative computer technology

The Southeast DBTAC website has been created and tested to be usable with alternative computer technology. The website has been tested on workstations utilizing popular screen reader technologies, such as Jaws. Furthermore, the website 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 Firefox. 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 may have low vision, color-blindness, or are working with technology or an environment where color or lighting may be comprised.

Clear and simple language

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

Top of Page