Slide 1: Title
Federal IT Accessibility Initiative 
“Designing Accessible Web Sites”

Slide 2:  Introduction
•	Federal IT Accessibility Initiative (FITAI) is working to create a set of modules to meet a variety of training needs for implementing Section 508. 

Slide 3:  Participant Survey
•	Webmasters?
•	Programmers?
•	Project managers?

Slide 4:  Agenda
•	Part 1: Section 508 and other legislation
•	Part 2: Working definitions of disabilities and accessibility
•	Part 3: Techniques for designing accessible web pages
•	Part 4: Validation and budgeting

Slide 5:  Program Objectives
•	How accessibility affects persons with disabilities
•	Rights of persons with disabilities under Section 508
•	Access Board standards
•	Developing accessible web pages
•	Testing a page for compliance

Slide 6:  Accessibility Myths
True or False?
•	Accessible pages are dull.
•	Accessible pages are too time consuming and expensive.
•	Accessible Web authoring is too hard to learn.
•	The Web is graphical and cannot/should not be adapted for auditory or text-only users.
•	Assistive technology (AT) can solve the problem.

Slide 7:  Myth #1
Accessible pages are dull.

•	30% of Web users do not load images
•	Search engines use textual information
Slide 8:  Myth #2
   Accessible pages are too time consuming and expensive.

•	Accessibility is “built-in” to HTML
•	Cost-effective to factor accessibility in the design phase

Slide 9:  Myth #3
     Accessible Web authoring is too hard to learn.

•	Accessible Web design requires limited working knowledge of HTML

Slide 10:  Myth #4
     The Web is graphical and cannot/should not be adapted for auditory or text-only users.

•	Style sheets can add visual flare
•	Use alternate text with multimedia

Slide 11:  Myth #5
   Assistive technology (AT) can solve the problem. 

•	AT can only interpret information that is formatted to the same standards

Slide 12:  Part 1:
Section 508 and Related Legislation

Slide 13:  Staggering Stats
Americans with disabilities spend twice as much time on the Internet.

•	500 million disabled worldwide
•	54 million disabled in US
•	Aging population
•	Temporary disabilities not included

Slide 14:  Inaccessibility = Barriers to Information
•	IT should provide resources to everyone
•	“Digital divide” in today’s e-society
•	Good business practice
•	Legal ramifications
Slide 15:  Rehabilitation Act
•	Defined rights of the persons with disabilities to help them re-enter the workforce
•	Non-discrimination on basis of disability in programs or activities receiving Federal money

Slide 16:  1998 Amendments
•	Workforce Investment Act (1998) included amendments to the Rehabilitation Act
•	Section 501 requires reasonable accommodations for employees with disabilities
•	Section 504 prohibits discrimination of persons with disabilities by Federal agencies in any federally funded or federally conducted programs or activities

Slide 17:  Section 508: What’s Covered
•	All E&IT developed, procured, maintained, or used by Federal agencies must be accessible
•	Alternative means of access when accessibility cannot be achieved
•	Tasked the Access Board to develop standards (12/21/00)
•	Required revision of the FAR to create binding, enforceable procurement standards
•	Authorizes lawsuits after June 21, 2001

Slide 18:  Section 508: What’s Not
•	Does NOT require:
•	Agencies to provide AT to the general public
•	All workstations to be fitted with AT
•	Retrofitting of E&IT (e.g., Web pages)

Slide 19:  Accessibility Initiatives
•	Federal Information Technology Accessibility Initiative (FITAI)
•	Offers information and technical assistance in implementing Section 508
•	Executive Orders
•	Commitment that Federal programs be free from disability-based discrimination
•	Strategy for development of assistive technology and universal design
•	Bush’s New Freedom Initiative

Slide 20:  Related Legislation
•	Assistive Technology Act of 1998 established Federal grants for state programs that address assistive technology needs
•	Section 255 of the Telecommunications Act of 1996 requires telecommunications equipment and services to be accessible

Slide 21:  Part 2:
Why You Need to Care About Accessibility

Slide 22:  Usability vs. Accessibility
•	Usability = Easy to use
•	Accessibility = Barrier free as possible 
•	Section 508 provides a baseline for E&IT accessibility

Slide 23:  Accessible Web Sites Demonstration
•	What makes a web site accessible?

Slide 24:  Barriers to Access
•	Visual
•	Auditory 
•	Mobility 

Slide 25:  Visual Disabilities
•	Blindness
•	Weak vision
•	Tunnel vision
•	Dimness
•	Extreme near- or far-sighted
•	Color blindness

Slide 26:  Hearing Disabilities
•	Deaf
•	Hard of hearing
•	High/low frequency hearing loss

Slide 27:  Mobility Disabilities
•	Repetitive Stress Injuries (RSI)
•	Arthritis
•	Stroke
•	Spinal Cord Injuries
•	ALS
•	Loss of limbs or digits

Slide 28:  Assistive Technology (AT)
•	Visual disabilities
•	Screen readers
•	Braille displays
•	Voice recognition
•	Magnification
•	Hearing disabilities
•	Require visual representation of auditory information

Slide 29:  Assistive Technology (AT)
•	Mobility Disabilities
•	Keyboard controls
•	Breath control
•	Retinal scanning devices
•	Voice recognition

Slide 30:  Benefits of Accessible Design
Accessible design benefits everyone!

•	Older technology
•	Slow connection speeds
•	Newer wireless technology
•	Personal preference

Slide 31:  Q & A
•	Questions?

•	Comments?

Slide 32:  Part 3:
Techniques for Developing Accessible Web Pages

Slide 33:  Game
Who Wants To Be An Accessible Web Site Developer?

Slide 34:  Question 1
    When designing an HTML table, you must:
A. Only use it for data
B. Use the SCOPE attribute in header rows and columns
C. Use structural markup reserved for tables (e.g., TH)
D. Associate every data cell with its header cells

Slide 35:  Answer!
B. Use the SCOPE attribute in header rows and columns

        Guideline (g): Row and column headers shall be identified for data tables.

        Guideline (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.

Slide 36:  Question 2
     You're going to use an image on your web page to symbolize a good example of an accessible web site.  Which of the following text could you use for the ALT attribute of the graphic:
A.  Empty ALT text (“ ”)
B.  “Photos”
C.  “A collage of photos depicting a student attending class, a football team, and the president of the university.”
D.  An ALT attribute is not necessary

Slide 37:  Answer!
Answers B. and C. are both correct.

       Guideline (a): A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).

Slide 38:  Question 3
What’s wrong with this scenario…?

    You design a layout that requires users to use color-coded buttons to navigate the site: the green button advances one screen, the red button goes back one screen. You use JPGs with embedded text to display the screen content and you design a cascading style sheet that defines the other text colors.

Slide 39:  Answer!
1. Meaning should not be portrayed through the use of color alone.
2. Text within graphics will not enlarge with the use of a magnification device.
3. Make sure the page is readable without using the style sheet.

      Guideline (c): Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

      Guideline (d): Documents shall be organized so they are readable without requiring an associated style sheet.

Slide 40:  Question 4
What’s wrong with this scenario…?

    You create a really flashy navigational scheme that requires users to click on an area of a checkerboard-looking server-side image map.

Slide 41:  Answer!
1. You should use client-side image maps whenever possible (squares hotspots can be defined on a client-side image map)
2. When you do use server-side image maps, provide redundant text links

      Guideline (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.

      Guideline (e): Redundant text links shall be provided for each active region of a server-side image map.

Slide 42:  Question 5
What’s wrong with this scenario…? 

     You decide that the best way to structure the navigation bar in relation to the content is to use two frames: one for navigation and one for content.  You provide text links at the bottom of the content frame so you figure you won't need to name the navigation frame since visually impaired users can simply use the text links.

Slide 43:  Answer!
    Without frame labels, a blind user has difficulty determining which frame is currently active.

       Guideline (i): Frames shall be titled with text that facilitates frame identification and navigation.

Slide 44:  In the Beginning…
…WWW was text-only!
•	Mosaic has created a visually-biased medium
•	Keyboard enabling is a must!

Slide 45:  Keep These Separate!
•	Content
•	Structure
•	Presentation

Slide 46:  Overview
•	Non-text Elements (e.g., images)
•	Tables 
•	Navigation
•	Color 

Slide 47:  Non-Text Elements
   Guideline (a): A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).

•	Use meaningful ALT text
•	Use LONGDESC when necessary

Slide 48:  Tables
   Guideline (g): Row and column headers shall be identified for data tables.

   Guideline (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.

Slide 49:  Tables
•	Provide row and column headers for all data tables by using one of the following:
•	SCOPE
•	TD and TH
•	Group rows with THEAD, TFOOT, TBODY
•	Group columns with COL, COLGROUP

Slide 50:  Navigation
   Guideline (e): Redundant text links shall be provided for each active region of a server-side image map. 
 
   Guideline (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. 
 
   Guideline (o): A method shall be provided that permits users to skip repetitive navigation links. 

Slide 51:  Navigation
•	Image maps
•	Use client-side where possible
•	For server-side image maps, provide redundant text links
•	Provide a method to skip repetitive navigation

Slide 52:  Color
   Guideline (c): Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

•	Don’t rely on color alone to convey meaning

Slide 53:  Q & A
•	Questions?

•	Comments?

Slide 54:  Advanced Programming Issues
•	Frames
•	Cascading Style Sheets (CSS)
•	Multimedia
•	Scripting
•	Forms
•	Adobe PDF files

Slide 55:  Frames
   Guideline (i): Frames shall be titled with text that facilitates frame identification and navigation. 

•	Be sensitive to your user
•	When you use frames, provide a title for each frame that communicates its purpose

Slide 56:  Cascading Style Sheets
   Guideline (d): Documents shall be organized so they are readable without requiring an associated style sheet. 

•	Designed to separate structure from layout
•	Removes inaccessible barriers 
•	Easier content revision

Slide 57:  Cascading Style Sheets
•	Use external style sheets
•	Ensure the page can be read without the style sheet

Slide 58:  Multimedia
   Guideline (b): Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

•	Provide captioning or transcripts for multimedia presentations
•	Use captioning for video files
•	SMIL
•	SAMI

Slide 59:  Multimedia
•	Use a transcript for audio files
•	Demonstration: “Car” Video (RealPlayer)
Slide 60:  Plug-ins
   Guideline (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 (l).

Slide 61:  Plug-ins
•	Additional software that works with browsers
•	If you use a plug-in:
•	Choose one that is accessible 
•	Provide adequate instructions for downloading and installing it

Slide 62:  Flash
•	Basically inaccessible
•	To create alternate accessible format:
•	Use custom HTML template to export movie text to HTML
•	Provide controls
•	Use keyboard navigation features
•	Synchronize the audio track
•	Provide alternative text

Slide 63:  Scripting
    Guideline (j): Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. (also applies to animated graphics)
 
    Guideline (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.
 
    Guideline (p): When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. 

Slide 64:  Scripting
•	Assistive technologies do not handle client-side scripts well 
•	Use server side scripts: all content viewed by user is HTML
•	Allow the user to initiate change
•	Create accessible script output
•	Don’t cause the screen to flicker

Slide 65:  JavaScript
•	Remember the ALT text when using a graphic to invoke a function
•	Test the event handlers you use
•	Work well: onClick, onLoad, onUnload
•	Questionable: onMouseover, onMouseOut, onBlur, onFocus
•	Avoid: onDblClick, onMouseDown, onMouseUp, onChange

Slide 66:  Java
•	Use the Java Foundation Classes/Swing Set (version 1.8 or higher)
•	Structure event handlers properly
•	Describe icons and graphics and set Accessible Description on all components
•	Set the focus
•	Label components
•	Name logical groups
•	Be sufficiently multithreaded
•	Provide a logical layout

Slide 67:  Forms
   Guideline (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.

Slide 68:  Forms
Create accessible forms by:
•	Simplifying text entry 
•	Using helpful elements as cues for AT

Slide 69:  Adobe PDF Files
•	PDF files are inaccessible
•	Users can obtain a converted PDF file via e-mail or a utility
•	PDF becoming accessible?
•	Avoid creating PDF as a graphic
•	Convert PDF to HTML or text

Slide 70:  Equivalent Pages
   Guideline (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.

Slide 71:  Development Tools
•	Accessibility is “built in” to the standards for HTML
•	The standards include tags to communicate with AT
•	The web developer is responsible for using the tags!
•	Not all web page editors are equal for creating accessible web pages

Slide 72:  Development Tools
•	To choose a development tool, ask:
•	Does it encourage the creation of accessible content?
•	Does it identify nonstandard/ inaccessible HTML?
•	Does it provide easy editing of the HTML?

Slide 73:  Editors
•	Text Editors
•	BBEdit
•	HomeSite/ ColdFusion Studio
•	Visual Editors
•	Netscape Composer
•	FrontPage
•	Dreamweaver
•	HoTMetaL PRO

Slide 74:  Netscape Composer
•	Easy to use
•	Contains most of the tools necessary for creating accessible web pages
•	Can’t always use the keyboard

Slide 75:  FrontPage
•	“Themes” can aid in developing consistently accessible pages
•	Code is hidden until page is published
•	Don’t use the rollover image Java applet

Slide 76:  Dreamweaver
•	Built-in accessibility checker
•	Easy to insert ALT text and table headers
•	DHTML (dynamic) is not typically accessible

Slide 77:  HoTMetal PRO
•	Includes embedded accessibility features
•	Onscreen “Visual Dynamic Keyboard” 
•	Convenient input of ALT and longdesc attributes

Slide 78:  Q & A
•	Questions?

•	Comments?

Slide 79:  Part 4
Testing, Validation, and Budgeting 

Slide 80:  Accessibility Features of Popular Browsers
•	Netscape Navigator 
•	Microsoft Internet Explorer (IE)
•	Opera
•	Amaya

Slide 81:  Test for Browser and Version Differences 
•	May interpret standard HTML elements differently 
•	Accessibility features
•	Style sheet support 
•	Deprecated elements

Slide 82:  Browsers Designed for Persons 
with Disabilities
•	Complete keyboard control
•	Speech synthesis
•	Screen magnification

Slide 83:  Quick Test Your Site: 
Format
•	Turn all the images off
•	Turn off style sheets 
•	Use the largest custom font size
•	Resize the browser window
•	Select all text and copy it into a word processor

Slide 84:  Quick Test Your Site: 
Navigation
•	Navigate using only the keyboard
•	Press Tab to move through the links
•	Does the link text tell you where the link will take you? 

Slide 85:  Quick Test Your Site: 
Media
•	Turn off sounds
•	Disable all applets and scripts

Slide 86:  Quick Test Your Site: 
 Color Scheme
•	View the page on a monitor set to black & white resolution 
•	Print the page on a black & white printer
•	Set a color monitor to high contrast

Slide 87:  A More Thorough Test
•	View your site in a text-only format
•	Lynx Viewer
(http://www.delorie.com/web/lynxview.html 
•	Lynx-It (http://www.slcc.edu/webguide/lynxit.html)
•	Turn off “Play Animations”
•	Use a combination of various AT to view the site

Slide 88:  Let Someone Else Test It!
•	Bobby (http://www.cast.org/bobby/)
•	HTML checkers (http://validator.w3.org)
•	HTML Accessibility Tool (http://cmos-eng.rehab.uiuc.edu/what)
•	LIFT (http://www.usablenet.com/index.htm)
•	WebSAT: Developed by the National Institute on Standards and Technology (NIST) as part of its Web Metrics usability suite 

Slide 89:  Budget Justification
•	Developing accessible technologies
•	Factor accessibility into initial project budget
•	Receive funds for validation efforts
•	Talk to your Section 508 Coordinator

Slide 90:  Q & A
•	Questions?

•	Comments?