Web Accessibility An Introduction
Objectives Introduce accessibility terms Understand the need for universal design Learn Basic Accessibility Techniques Introduce Tools for checking accessibility 11/23/2018
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
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
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
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
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
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 §1194.21(a) through (l). 11/23/2018
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
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
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
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
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
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
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
WCAG Where can I get more information? WCAG 2.0 Checklist 11/23/2018
Web Assistive Technology Examples include: Alternative Keyboard Alternative Mouse Refreshable Braille Display Screen Magnifier Screen Reader 11/23/2018
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
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
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
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
Who Benefits Closed Captioning Users who are deaf or hard of hearing Users in noisy environments Your site (facilitates archival & search) 11/23/2018
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
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
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
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
Who Benefits Explicitly-Stated Natural Language Users of screen readers Users of audible browsers Your site (better search engine placement) 11/23/2018
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
Resources General Accessibility W3C - World Wide Web Consortium Web Accessibility In Mind (WebAIM) Web Content Accessibility Guidelines (V. 2.0) 11/23/2018
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
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
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
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
Resources Structural markup W3C Web Techniques for accessibility WebAIM on Semantic Structure XHTML XHTML Tutorial from W3Schools 11/23/2018