Enriching scholarship140506


Published on

Web Accessibility Introduction for Enriching Scholarship at the University of Michigan

Published in: Internet, Design, Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Not just blindness. A very diverse community.
  • 1 in 10 have a disability that will affect their using the internet
  • Not just blind and deaf …

    Avoid motion on screen.

    Keyboard accessible and don’t make fine motor control necessary.
  • Life is circumscribed for disabled. Everything the web does for able-bodied is amplified for disabled.
  • Besides being the right thing to do … we have legal considerations.
  • In general terms …

    The beauty of the standards are that you don’t have to keep in mind every conceivable disability when you are coding your site.

  • This is a departure from WCAG 1.0, which references specific technologies, such as javascript
  • Captions, screen reader, Braille display
  • Chunking appropriately, avoiding jargon or institutional language
    Different learning modalities, visual versus verbal
    Don’t change nav and layout structure
    Careful with AJAX-y elements, pop-ups
    Considerate form validation; especially important for ITS
  • Headings, links, and landmarks are like hand-holds on a climbing wall.

    Without them, assistive tech user must parse linearly through a web page.
  • What are those hand holds?
  • Announced with a screen reader.
    Semicolon key cycles through regions.
    Note that these perform same function as off-page headings.
  • Labels are also a form of alternative text.
  • Enriching scholarship140506

    1. 1. Accessible Web Scott Williams Walt Stover Office for Institutional Equity swims@umich.edu @swimsy
    2. 2. 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
    3. 3. 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
    4. 4. 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 issues—8 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
    5. 5. Most influential disabled user?  Google, “the blind billionaire” — Jeffery Zeldman  What’s good for accessibility is good for SEO
    6. 6. The web offers unprecedented opportunities for disabled  Education  News  Commerce  Social  Web is an enabling technology
    7. 7. 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
    8. 8. Legal cont’d  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 someone’s civil rights  Case law—individuals or entities can file civil rights complaints, e.g., PSU, Google, JetBlue, Target, Southwest Airlines, Priceline.com, Ramada, Kindle, and LSAC
    9. 9. 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
    10. 10. 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
    11. 11. 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
    12. 12. 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
    13. 13. 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
    14. 14. Operable  All functionality is available from the keyboard!  Users have control over timing and limits  Do not cause seizures (don’t flash content)  Provide ways to help users navigate, find content, and determine where they are
    15. 15. 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
    16. 16. Robust  Functional across various technologies  Syntax errors that don’t affect visual presentation may hamper assistive technology and accessibility evaluation tools  Adhering to W3C standards ensures future compatibility  Validate your code at validator.w3c.org
    17. 17. Best Practices
    18. 18. 1. Navigation
    19. 19. Navigation  Navigation is a critical aspect of accessibility  Information being apparent isn’t 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
    20. 20. What if you can’t see?  Title of page lets you know what page you’re 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
    21. 21. 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 <h1> tag, which should always directly precede main content  Should be visible on keyboard focus so sighted keyboard users will know it is there
    22. 22. Proper headings  Screen readers can find and list headings  <h1> heading uniquely identifies the page in the website  Should be placed directly in front of the main content of the page  The <h1> header should also match at least a subset of the the page <title>  Other headings convey content organization
    23. 23. 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  Don’t use “here”, “click here”, “read this”, and “more”  Don’t use URL as a link description—will sound like gibberish, unless very short and intuitive
    24. 24. 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
    25. 25. ARIA landmark roles  They do what good visual layout does for sighted users—call out main geographic areas of web page:  Banner  Navigation  Search  Main content  Auxiliary content  Posted content  Footer information  <div id="maincontent" role="main"></div>
    26. 26. 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 <img src="mlogo.gif" alt="University of Michigan Block M logo">
    27. 27. 3. Forms  Use <label> tag to describe form fields and controls to screen reader users (is a form of alternative text)  Use <fieldset> and <legend> 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
    28. 28. Form example  Label attribute matches input id — not name
    29. 29. 4. Data Tables  Provide a table summary  Use table headings  Use the scope attribute to indicate columns and rows
    30. 30. 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
    31. 31. Mouse-dependent Event Handlers  onClick  onMouseOver and onMouseOut  OnMouseDown  onChange used with onSelect  onHover (must die)
    32. 32. 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
    33. 33. ARIA resources  WAI-ARIA Overview http://www.w3.org/WAI/intro/aria/  Mozilla Developer Network https://developer.mozilla.org/en- US/docs/Web/Accessibility/ARIA/  Paciallo Group’s ARIA examples : (http://hanshillen.github.com/jqtest/)  Open Ajax Alliance http://oaa-accessibility.org/examples/
    34. 34. 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
    35. 35. 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
    36. 36. Don’t use color alone to convey meaning
    37. 37. Test in gray scale …
    38. 38. Accessibility Resources  U-M: http://umich.edu/webaccess/  WebAIM: http://webaim.org  Online accessibility checkers:  http://wave.webaim.org/  http://www.achecker.ca/
    39. 39. Questions?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.