# Presentation: 486300

## Website Accessibility

**Section 508 and You**
**11:00am June 11****th****, 2007**
**Andrew Steele**
**Sandia National Laboratories**
**Computer Systems Analysis**

- Sandia is a multiprogram laboratory operated by Sandia Corporation, a Lockheed Martin Company,for the United States Department of Energy’s National Nuclear Security Administration under contract DE-AC04-94AL85000.

## “The power of the Web is in its universality.  Access by everyone regardless of disability is an essential aspect.”

“Whatever the device you use for getting your information out, it should be the same information.”

- Tim Berners-Lee
Inventor of the Web
Director of the World Web Consortium (W3C)

**“****Whatever the device you use for getting your information out, it should be the same information.”**
**- Tim Berners-Lee**
**Inventor of the Web**
**Director of the World Web Consortium (W3C)**

**Accessibility Quotes from Tim Berners-Lee**

## Another Accessibility Quote

**“****Accessibility is all about enabling people to get to (or access) the content of a website and ensuring that they can navigate (get around) the site to find the information or perform the task they want.”**
**- Jon Duckett**
_**Accessible XHTML and CSS Web Sites**_

## Disability by the Numbers

**50 Million Americans are disabled or have functional limitations (of which a major cause is aging)**
**10 million are blind and visually impaired**
**Employment**
**46% of visually impaired adult Americans are employed**
**32% of legally blind Americans are employed**
**At least 1.5 million use computers**

## Assistive Technologies

**Assistive technologies are technologies that make it easier for users with disabilities to access and navigate a site.**
**Types of Assistive Technologies**
**Screen Readers**
**Braille Readers**
**Screen Magnifiers**
**Custom User Defined Style Sheets**
**Alternative Input Devices**

## Screen Readers

**Screen Readers read webpage elements aloud to a user in a linear fashion.  Users navigate the page with esoteric keyboard shortcuts.**
**Most common screen-reading software**
**JAWS for Windows (JFW)**
**Most popular screen reader**
**http://www.freedomscientific.com**
**Home Page Reader**
**Easy to use**
**http://www.ibm.com/able/**

## Braille Readers

**Braille readers create a Braille equivalent of what a screen reader might read out on an electronic Braille pad**

**Pins moving up and down on a rotating wheel convert text on a screen to Braille**
**90% of the blind cannot read Braille**

## Screen Magnifiers and User Defined CSS

**Screen Magnifiers hardware or software which increase the size of screen content**
**User Defined CSS**
**Custom colors**
**Custom sizes**
**Replaces site’s existing style sheets**

## Alternative Input Devices

**Trackballs**
**Keyboard Only Input**
**Touch screens**
**Foot control mice**
**Eye or head movement tracking systems**
**Joysticks**
**Puff/Suck tubes**

## JAWS DEMONSTRATION

## Web Accessibility Guidelines

**Section 508 of the Rehabilitation Act**
**§ 1194.22 Web-based Intranet and Internet Information and Applications**
**http://www.section508.gov**
**Web Content Accessibility Guidelines 1.0 (WCAG)**
**http://www.w3.org/WAI/**
**WCAG 2.0 is in a Working Draft Format**

## Section 508

**Section 508 requires that individuals with disabilities, who are seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities.**
**All government web sites were mandated to be accessible by June 21, 2001**
**Contains sixteen guidelines §1194.22a to §1194.22p**
**To comply a site must comply with all sixteen guidelines**

## WCAG 1.0 Guidelines

**Web Content Accessibility Guidelines were published in 1999 by the W3C Web Accessibility Initiative (WAI)**
**Contains 14 Guidelines covering 65 Checkpoints**
**Accessibility is measured in three priority levels**
**Priority 1: Web developers must satisfy these requirements, otherwise it will be impossible for one or more groups to access the Web content. Conformance to this level is described as “A”**
**Priority 2: Web developers should satisfy these requirements, otherwise some groups will find it difficult to access the Web content. Conformance to this level is described as “AA”**
**Priority 3: Web developers may satisfy these requirements, in order to make it easier for some groups to access the Web content. Conformance to this level is described as “AAA”**

## Benefits of Compliance

**Accessible sites separate design from content**
**Reduced Markup**
**Less code means faster pages**
**Forward Compatibility**
**Ensure that a site will be readable in the future**
**Site is accessible on more devices and in more situations**
**Accessible sites have larger audiences**

**Notes:**
By using CSS to control a site’s design, updates and redesigns become easier.  Site-wide changes can be made instantly through the update of a single style sheet.

Less code also means more server capacity, which in turn means less money needed for server space and bandwidth.

## More Benefits of Compliance

**Designing a site with accessibility in mind from the start is far cheaper than going back and redesigning a site**
**A site designed with accessibility is often times a lot easier to use for many people (not just those with disabilities)**

## Now What

**Web Standards = Solutions**
**Structured/Semantic markup**
**Use tags that imply meaning not presentation**
**XHTML**
**“****The XHTML family is the next step in the evolution of the Internet.  By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content’s backward and future compatibility.”**
**CSS**
**A simple mechanism for describing how documents are presented on screens, in print, or pronounced.**

**Notes:**
Example of housing standards prior to the twentieth century
	doorknob
	dishwasher

No more font tags, no more nested tables, no more positional transparent gifs

## SECTION 508 AND WCAG 1.0 COMPARABLE SECTIONS

## Text Equivalents

**Section 508 1194.22.A**
**A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)**
**WCAG 1.1**
**Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content).**
**508 - WCAG Comparison: Similar**

**Notes:**
 This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.

All graphical images must include alt text which textually describes the image
<img src=“logo.gif” alt=“Company Logo” ... />
Alt text should be short and simple
For charts, graphs or images with display data the longdesc attributes should be used
<img src=“chart.gif” longdesc=“chart.html” ... />

## Synchronized Multimedia

**Section 508 1194.22.B**
**Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation**
**WCAG 1.4**
**For any time-based multi-media presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation**
**508 - WCAG Comparison: Same**

**Notes:**
Video must be closed captioned
Flash Player 7 supports captioning with the Hi-Caption SE component.  Streams synchronized XML-based captions to the player

## Color Use

**Section 508 1194.22.C**
**Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup**
**WCAG 2.1**
**Ensure that all information conveyed with color is also available without color, for example from context or markup**
**508 - WCAG Comparison: Same**

## Content Structure

**Section 508 1194.22.D**
**Documents shall be organized so they are readable without requiring an associated style sheet**
**WCAG 6.1**
**Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document**
**508 - WCAG Comparison: Same**

## Image Maps

**Section 508 1194.22.E**
**Redundant text links shall be provided for each active region of a server-side image map**
**WCAG 1.2**
**Provide redundant text links for each active region of a server-side image map**
**508 - WCAG Comparison: Same**

## Image Maps (continued)

**Section 508 1194.22.F**
**Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape**
**WCAG 9.1**
**Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape**
**508 - WCAG Comparison: Same**

## Tables

**Section 508 1194.22.G**
**Row and column headers shall be identified for data tables**
**WCAG 5.1**
**For data tables, identify row and column headers**
**508 - WCAG Comparison: Same**

**Notes:**
Utilize the scope attribute of th and td elements
Further helped by use of the thead, tbody, and tfoot elements

## Tables (continued)

**Section 508 1194.22.H**
**Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers**
**WCAG 5.2**
**For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells**
**508 - WCAG Comparison: Same**

## Frames

**Section 508 1194.22.I**
**Frames shall be titled with text that facilitates frame identification and navigation**
**WCAG 12.1**
**Title each frame to facilitate frame identification and navigation**
**508 - WCAG Comparison: Same**

## Animation

**Section 508 1194.22.J**
**Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz**
**WCAG 7.1**
**Until user agents allow users to control flickering, avoid causing the screen to flicker**
**508 - WCAG Comparison: 508 is more specific**

## When All Else Fails

**Section 508 1194.22.K**
**A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes**
**WCAG 11.4**
**If, after best efforts, you cannot create an accessible page, provide a link to an alternative page that uses W3C technologies, is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible (original) page**
**508 - WCAG Comparison: Same**

## Scripting

**Section 508 1194.22.L**
**When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology**
**WCAG 6.3**
**Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page**
**WCAG 6.4**
**For scripts and applets, ensure that event handlers are input device-independent**
**WCAG 8.1**
**Make programmatic elements such as scripts and applets directly accessible or compatible with assistive technologies**
**WCAG 9.3**
**For scripts, specify logical event handlers rather than device-dependent event handlers**
**508 - WCAG Comparison: WCAG More Restrictive**

## Plug-Ins

**Section 508 1194.22.M**
**When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21.A through §1194.21.I**
**WCAG 6.3**
**Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page**
**WCAG 6.4**
**For scripts and applets, ensure that event handlers are input device-independent**
**WCAG 8.1**
**Make programmatic elements such as scripts and applets directly accessible or compatible with assistive technologies**
**508 - WCAG Comparison: Similar**

## Forms

**Section 508 1194.22.N**
**When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues**
**WCAG 10.2**
**Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned**
**WCAG 12.4**
**Associate labels explicitly with their controls**
**WCAG 9.3**
**For scripts, specify logical event handlers rather than device-dependent event handlers**
**508 - WCAG Comparison: Similar**

## Navigation

**Section 508 1194.22.O**
**A method shall be provided that permits users to skip repetitive navigation links**
**WCAG 13.5**
**Provide navigation bars to highlight and give access to the navigation mechanism**
**WCAG 13.6**
**Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group**
**508 - WCAG Comparison: 508 More specific**

## Extended Session

**Section 508 1194.22.P**
**When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required**
**508 - WCAG Comparison: Not in WCAG**

## Reference

**Section 508**
**http://www.section508.gov**
**WCAG WAI**
**http://www.w3.org/WAI/**
_**Accessible XHTML and CSS Web Sites**_
**Jon Duckett isbn 0-7645-8306-9 Copyright 2005**
_**Web Standards Solutions**_
**Dan Cederholm isbn 1-59059-3812 Copyright 2004**
**Bulletproof Web Design**
**Dan Cederholm isbn 0-32134-693-9 Copyright 2005**
**www.JimThatcher.com**
**Excellent webpage full of accessibility resources **

## Contact Information

**Andrew Steele**
**Sandia National Laboratories**
**PO Box 5800, MS-0662**
**Albuquerque, NM 87185-0662**
**(505) 284-4442**
**ahsteel@sandia.gov**** **