Click here to load reader

Enriching scholarship140506

  • View

  • Download

Embed Size (px)


Web Accessibility Introduction for Enriching Scholarship at the University of Michigan

Text of Enriching scholarship140506

  • Accessible Web Scott Williams Walt Stover Office for Institutional Equity [email protected] @swimsy
  • Disabilities and the web Visual: blindness, low-vision, color-blindness Hearing: partial to total deafness Motor: inability to use a mouse or physical keyboard, slow response time, limited fine motor control Cognitive: Learning disabilities, distractibility, dyslexia, inability to remember or focus on large amounts of information
  • 1in 5 people have a disability People with disabilities in the U.S: 54.4 million People in U.S. with disabilities that impede them using the internet: 24 million People age 15 and older having difficulty hearing a normal conversation: 8 million. Completely deaf: 1 million People age 15 and older having difficulty reading ordinary newsprint (even with glasses): 8 million. Completely blind: 1.8 million
  • More stats Cognitive disabilities Greater number than physical and perceptual disabilities combined Adults with ADD/ADHD: 16 million 38% of soldiers, 31% of Marines and 49% of National Guard members returning from combat report psychological conditions such as TBI and PTSD Mobility issues8 million Americans have difficulty using their arms or hands 11 million people 6 and older need assistance with everyday activities 8.3% of the U.S. population have 2 or more disabilities
  • Most influential disabled user? Google, the blind billionaire Jeffery Zeldman Whats good for accessibility is good for SEO
  • The web offers unprecedented opportunities for disabled Education News Commerce Social Web is an enabling technology
  • Legal Rehabilitation Act of 1973 and Americans with Disabilities Act of 1991, both of which prohibit colleges and universities from discriminating against students, faculty, and staff with disabilities Users with disabilities must have the full and equal enjoyment of all goods, programs, and activities If users with disabilities are forced to use separate access, it must be equally effective
  • Legal contd DOJ is in the process of revising Title II and III of the ADA to include online resources of state and local entities ETA of revised rules: 2 years??? Will be based on W3C WCAG 2.0 Level A or AA DOJ not interested in the budgetary or logistical reasons for why you are violating someones civil rights Case lawindividuals or entities can file civil rights complaints, e.g., PSU, Google, JetBlue, Target, Southwest Airlines,, Ramada, Kindle, and LSAC
  • NFB (the heat) National Federation of the Blind Litigates educational institutions who violate civil rights and to get to non-compliant companies My job for the foreseeable future is to travel around to universities with a torch and a can of gasoline and start as many fires as possible! Dan Goldstein, chief litigator for the NFB PSU received notice without warning on Christmas Eve
  • How to keep Dan away Procurement policies must include accessibility requirements New technology must be tested before purchasing to verify accessibility claims Self audit Remediation plan Policy Accessibility coordinator
  • What is web accessibility? Making the web accessible for the widest possible audience Inseparable from usability: improve one and you improve the other Best way to accomplish accessibility? Adherence to standards
  • WCAG 2.0 W3C Web Content Accessibility Guidelines De facto standard world-wide. Cited in U.S case law. Adopted by governments. Future basis for ADA and Section 508 compliance. WCAG 2.0 is principle-, not technology-based The four principles (POUR): Perceivable Operable Understandable Robust
  • Perceivable Provide text alternatives for images and form elements Provide captions and transcripts for video and audio Use correct semantic markup so content can be presented in different ways Make it easier for users to see content by using good color contrast Avoid movement and distractions on page
  • Operable All functionality is available from the keyboard! Users have control over timing and limits Do not cause seizures (dont flash content) Provide ways to help users navigate, find content, and determine where they are
  • Understandable Economical and plain use of language Text supplemented with illustrations, videos, and other formats where appropriate (i.e., use good Universal Design) Navigation, information structure are discernable and consistent Make pages operate in predictable ways Help users avoid and correct mistakes
  • Robust Functional across various technologies Syntax errors that dont affect visual presentation may hamper assistive technology and accessibility evaluation tools Adhering to W3C standards ensures future compatibility Validate your code at
  • Best Practices
  • 1. Navigation
  • Navigation Navigation is a critical aspect of accessibility Information being apparent isnt enough Sighted users have tried and true visual cues to orient them on a page Banner Search box Main navigation box Content well Blind and low-vision users rely on proper coding of page for orientation
  • What if you cant see? Title of page lets you know what page youre on when page loads Proper heading placement and hierarchy conveys organization of page and allows SR users to skip navigation Link descriptions need to be unique and make sense out of context ARIA document landmark roles highlight geographic regions of webpage Browser find function used as well
  • Skip-to-content links Not just for screen reader users Allows those who cannot use a mouse to avoid tabbing through entire menu and sidebar. Need to be visible when they receive focus Place at top of document; limit to 3 Jump to tag, which should always directly precede main content Should be visible on keyboard focus so sighted keyboard users will know it is there
  • Proper headings Screen readers can find and list headings heading uniquely identifies the page in the website Should be placed directly in front of the main content of the page The header should also match at least a subset of the the page Other headings convey content organization
  • Meaningful link text Screen readers can find and list links Descriptions for the links must be meaningful out of context, via tabbing or presented in a list Dont use here, click here, read this, and more Dont use URL as a link descriptionwill sound like gibberish, unless very short and intuitive
  • Accessible menus Main navigation needs to be operable using the keyboard only Subcategories should be visible on keyboard focus Main menu items link to index pages that list subcategories Complex menus with multiple columns and headings have negative effect on those with cognitive impairments, low vision, and motor impairments
  • ARIA landmark roles They do what good visual layout does for sighted userscall out main geographic areas of web page: Banner Navigation Search Main content Auxiliary content Posted content Footer information
  • 2. Text equivalents All informative non-text elements must be accompanied by text equivalents Informative images graphical representations of text (including drop caps, equations, and symbols) form controls and text fields graphical buttons and links audio files and podcasts Videos
  • 3. Forms Use tag to describe form fields and controls to screen reader users (is a form of alternative text) Use and tags when necessary to group form elements together (not for layout) Keep form labels close to their associated controls Make sure the form is operable using just the keyboard
  • Form example Label attribute matches input id not name
  • 4. Data Tables Provide a table summary Use table headings Use the scope attribute to indicate columns and rows
  • 5. Scripting Using javascript does not necessarily make your site inaccessible Most screen readers can interact with javascript Most SR users (98%) have Javascript enabled Ensure that users can operate widgets using the keyboard only Ensure that updated page content is apparent to a screen reader
  • Mouse-dependent Event Handlers onClick onMouseOver and onMouseOut OnMouseDown onChange used with onSelect onHover (must die)
  • AJAX and ARIA ARIA = Accessible Rich Internet Applications The use of AJAX introduces new challenges in accessibility Updating information on a page without a page refresh can disorient assistive tech users or leave them unable to view the updated content ARIA roles and properties are a means of making AJAX widgets accessible and info apparent The scope of ARIA role and property code is limited to assistive technologies
  • ARIA resources WAI-ARIA Overview Mozilla Developer Network US/docs/Web/Accessibility/ARIA/ Paciallo Groups ARIA examples : ( Open Ajax Alliance
  • 6. Color An often overlooked aspect of web accessibility Many more people are visually impaired or color blind than are legally blind There are tools that quantify the contrast between text and its background Check your web templates color contrast during design phase
  • What is color contrast? You intuitively know when something has poor contrast There is an algorithm for determining a numerical value Ratio of foreground luminance to background luminance Big is good: 4.5:1 or greater for Level AA
  • Dont use color alone to convey meaning
  • Test in gray scale
  • Accessibility Resources U-M: WebAIM: Online accessibility checkers:
  • Questions?