1. Web Accessibility
An Introduction

2. Objectives Introduce accessibility terms
Understand the need for universal design
Learn Basic Accessibility Techniques
Introduce Tools for checking accessibility
11/23/2018

3. Why is Accessibility Important?
More than 50 million Americans 750 million worldwide - have disabilities.
Numbers increasing as population ages.
$1 trillion in aggregate annual income.
Emerging best business practices.
Government and institutional mandates.
Universal design
"For most people technology makes things easier. For people with disabilities, technology makes things possible."
11/23/2018

4. Accessibility in law and policy
In the US
Americans with Disabilities Act and others
The Rehabilitation Act - Section 504, Section 508
Equivalent laws in Europe, Japan, Australia, others
Free online tutorial
11/23/2018

5. Section 508
Requires Federal Agencies to make information technology accessible
Section 508 uses the Federal procurement process to ensure that technology acquired by the Federal Government is accessible.
Lists 16 objective measurable standards for web accessibility
11/23/2018

6. Section 508 Guidelines
(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
(d) Documents shall be organized so they are readable without requiring an associated style sheet.
(e) Redundant text links shall be provided for each active region of a server-side image map.
11/23/2018

7. Section 508 Guidelines
(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.
(g) Row and column headers shall be identified for data tables.
(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.
(i) Frames shall be titled with text that facilitates frame identification and navigation.
(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
11/23/2018

8. Section 508 Guidelines
(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.
(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.
(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 § (a) through (l).
11/23/2018

9. Section 508 Guidelines
(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.
(o) A method shall be provided that permits users to skip repetitive navigation links.
(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
11/23/2018

10. Basic Requirements for Web Accessibility
Text Tags
Multimedia Presentations
Color
Readability
Server-Side Image Maps
Client-Side Image Maps
Data Table
Frames
Flicker Rate
Text-Only Alternative
Scripts
Applets and Plug-Ins
Electronic Forms
Navigation Links
Time Delays
11/23/2018

11. Web Content Accessibility Guidelines (WCAG)
W3C Accessibility Guidelines 2.0 V. 2.0 is a working draft at this time.
Widely accepted: European Union, Canada, Australia have adopted WCAG 1.0
Three levels of compliance declaration
Priority 1 (Meets minimum goals) -- A Web content developer must satisfy this checkpoint
Priority 2 -- A Web content developer should satisfy this checkpoint
Priority 3 (Most accessible) -- A Web content developer may satisfy this checkpoint
11/23/2018

12. WCAG WCAG 2 Guidelines Principle 1: Content must be perceivable.
Guideline 1.1 Provide text alternatives for all non-text content.
Guideline 1.2 Provide synchronized alternatives for multimedia.
Guideline 1.3 Ensure that information, functionality, and structure can be separated from presentation.
Guideline 1.4 Make it easy to distinguish foreground information from background images or sounds.
11/23/2018

13. WCAG Principle 2: Interface elements in the content must be operable.
Guideline 2.1 Make all functionality operable via a keyboard interface.
Guideline 2.2 Allow users to control time limits on their reading or interaction.
Guideline 2.3 Allow users to avoid content that could cause seizures due to photosensitivity.
Guideline 2.4 Provide mechanisms to help users find content, orient themselves within it, and navigate through it.
Guideline 2.5 Help users avoid mistakes and make it easy to correct them.
11/23/2018

14. WCAG Principle 3: Content and controls must be understandable.
Guideline 3.1 Make text content readable and understandable.
Guideline 3.2 Make the placement and functionality of content predictable.
11/23/2018

15. WCAG
Principle 4: Content must be robust enough to work with current and future technologies.
Guideline 4.1 Use technologies according to specification.
Guideline 4.2 Ensure that user interfaces are accessible or provide an accessible alternative(s)
11/23/2018

16. WCAG Where can I get more information? WCAG 2.0 Checklist
11/23/2018

17. Web Assistive Technology
Examples include:
Alternative Keyboard
Alternative Mouse
Refreshable Braille Display
Screen Magnifier
Screen Reader
11/23/2018

18. Web Assistive Technology
Examples of Screen Magnifiers/Screen Readers:
Zoom Text by AI Squared - screen magnifying software that makes computers accessible/friendly to low-vision users.
JAWS by Freedom Scientific - popular screen reading software. Uses internal speech synthesizer and computer's sound card to read info from computer screen aloud.
Home Page Reader by IBM - a web access tool for blind and low vision users.
Window Eyes - a Windows screen reader for Microsoft Office applications as well as the web.
FireVox - A screen reader extension for the FireFox web browser
11/23/2018

19. Basic Accessibility Techniques
Structural Markup
XHTML
Cascading Stylesheets
Accessible Images
Quality Link Text
Navigation
Relative Units
Contrast
Color
Tables
Forms
Blinking and Flickering
Pop-ups and new browser windows.
Site map
Accessible Search Engine
Functionality operable from keyboard
11/23/2018

20. Who Benefits? People using different web browsers
People using different screen resolutions
People using handheld display units
People using audible web interfaces
People who are unable to hear
People who can’t use a mouse
People who can’t perceive color differences
People who are easily distracted
11/23/2018

21. Who Benefits Text Alternatives
Users of screen readers
Users of text-only browser
Users of audible browsers
Users with low bandwidth
Users of PDA’s
Your site (better search engine placement)
11/23/2018

22. Who Benefits Closed Captioning
Users who are deaf or hard of hearing
Users in noisy environments
Your site (facilitates archival & search)
11/23/2018

23. Who Benefits Mouse independence
People who don’t use a mouse due to disability
People who don’t use a mouse due to personal preference
People whose mice or dirty or broken
Users of audible browsers
Users of PDA’s and pen computers (can’t “mouseover” with stylus)
11/23/2018

24. Who Benefits Color Independence
People who are color blind
People with single-color displays (including PDA’s)
People with custom color settings & style sheets
11/23/2018

25. Who Benefits Accessible CSS-Based Layout
Users of screen readers
Users of emerging web-enabled devices
Users who are connecting at slower speeds (pages load much faster)
Web developer (easier to maintain)
11/23/2018

26. Who Benefits Accessible Forms
Users of screen readers
Users of audible browsers
Mouse users (click on label to select a checkbox or radio button)
11/23/2018

27. Who Benefits Explicitly-Stated Natural Language
Users of screen readers
Users of audible browsers
Your site (better search engine placement)
11/23/2018

28. Tools to Check Accessibility
Don't depend on automated tools. The best testing is self testing or user testing. Use common sense -- Experience it yourself. 
Browsers – test your site with multiple browsers on multiple platforms
Accessibility Tool Bar for IE
Bobby
Markup Validator
CSS Validator
A-prompt
LIFT
Text only browser, LYNX
Zoom Text Magnifier
JAWS
IBM Home Page Reader
FireVox
11/23/2018

29. Resources General Accessibility W3C - World Wide Web Consortium
Web Accessibility In Mind (WebAIM)
Web Content Accessibility Guidelines (V. 2.0)
11/23/2018

30. Resources Accessibility Techniques
508 Web Accessibility Tutorial by Jim Thatcher
Accessibility Institute at the University of Texas
AccessibleNet.org
IBM Web Accessibility Checklist
Techniques for Web Content Accessibility Guidelines 1.0
Cascading Style Sheets
CSS Tutorial from W3Schools
11/23/2018

31. Resources Color and Contrast WCAG 2.0 Techniques
Lighthouse.org --Designing for People with Partial Sight and Color Deficiencies
Accessible Forms
Creating Accessible Forms
Learn Accessible Forms
11/23/2018

32. Resources Language Codes Library of Congress List of Language Codes
Accessible Images
Jim Thatcher’s Text Alternatives Tutorial
WebAIM’s Creating Accessible Images
WCAG’s Techniques for Accessible Web Content
Making Multimedia Accessible
Captioning
Video Captioning Using Magpie
11/23/2018

33. Resources Making Tables Accessible Creating Accessible Tables
W3C Techniques
Structural markup
W3C Web Techniques for accessibility
WebAIM on Semantic Structure
XHTML
XHTML Tutorial from W3Schools
11/23/2018

34. Resources Structural markup W3C Web Techniques for accessibility
WebAIM on Semantic Structure
XHTML
XHTML Tutorial from W3Schools
11/23/2018