0
Accessibility and Section 508 Compliance in 2009What you need to know.<br />John Whalen, PhD<br />Director, User Experienc...
Agenda<br />Thinking &apos;accessibly’ … why would I care?<br />What are the most common accessibility needs?<br />Evaluat...
It’s the Law<br />Section 508 of the Rehabilitation Act:<br />All electronic and information technology used, procured, de...
There’s a big audience out there…<br />
And its getting older…<br />
Disabilities truly make the Web difficult…<br />Web users with disabilities are 3 times less likely to succeed than users ...
You don’t like lawsuits…<br />
You like the benefits of accessible design…<br />
You want the advantage of being a leader…<br />
You want to support mobile devices…<br />
You appreciate great SEO…<br />
Agenda<br />Thinking &apos;accessibly’ … why would I care?<br />What are the most common accessibility needs?<br />Evaluat...
Most Common Accessibility Needs:<br />Visual disabilities<br />blindness<br />low vision<br />color blindness<br />Hearing...
Assistive Technologies<br />Alternative keyboards or switches<br />Screen readers<br />Speech recognition<br />
Assistive Technologies<br />Braille and refreshable Braille<br />Screen magnifiers<br />Tabbing through structural element...
Scenarios and Accessibility Solutions<br />Online shopper with color blindness (user control of style sheets)<br />Reporte...
Scenarios and Accessibility Solutions<br />Classroom student with dyslexia (use of supplemental graphics; freezing animate...
Agenda<br />Thinking &apos;accessibly’ … why would I care?<br />What are the most common accessibility needs?<br />Evaluat...
Core Principles – WCAG 2.0<br />Perceivable - Information and user interface components must be presentable to users in wa...
Overall check for your pages<br />Try WebAIM’s WAVE: Web Accessibility Evaluation Tool http://wave.webaim.org/<br />
Use the Web Accessibility Toolbar<br />http://www.paciellogroup.com/resources/wat-ie-about.html<br />Check HTML<br />Resiz...
1. Perceivable: Best contrast / color checkers<br />Contrast Analyzer v2 http://www.paciellogroup.com/resources/contrast-a...
2. Operable<br />Try your site with no mouse<br />Use Accessibility Toolbar to try site without pictures, without CSS<br /...
2. Operable: Screen Readers<br />JAWS: http://www.freedomscientific.com/products/fs/jaws-product-page.asp<br />NVDA - new ...
3. Understandable: Creating Captions on the Web - Multimedia<br />National Center for Accessible Media<br />http://ncam.wg...
3. Understandable – test reading level<br />http://juicystudio.com/services/readability.php#readweb<br />Is your text at t...
Agenda<br />Thinking &apos;accessibly’ … why would I care?<br />What are the most common accessibility needs?<br />Evaluat...
Classics<br />Use “good ‘ole” H1, H2, etc.<br />Good for screen reader, good for SEO.<br />Easier for mobile phone to disp...
ALT Tags – Context is Crucial<br />Source: http://www.webaim.org/techniques/alttext/<br />
ALT Tags<br />
Include table of content, skip links<br />
Make tables simple, or make them accessible<br />http://jimthatcher.com/webcourse9.htm<br />
Many more suggestions<br />Adobe Acrobat: http://www.adobe.com/accessibility/products/reader/<br />Adobe Flash:<br />http:...
Latest Updates on Section 508/255<br />
Agenda<br />Thinking &apos;accessibly’ … why would I care?<br />What are the most common accessibility needs?<br />Evaluat...
WAI-ARIA<br /><ul><li>Making sites with JavaScript and updates without screen refreshes accessible</li></ul>Great introduc...
WAI ARIA<br />Create “live area” that captures changes (without screen refresh)<br />Can set tab index to “-1” to allow fo...
Accessible Drag and Drop<br />http://devfiles.myopera.com/articles/735/example.html#kbdinstructions<br />
Toolkits incorporating WAI-ARIA<br />JQuery UI<br />Yahoo! YUI<br />Google Web Toolkit<br />Dojo<br />ASP.NET “Q2 2009”<br...
Best practices<br />Use XHTML when possible<br />Apply ARIA role attribute when needed<br />Set ARIA states and properties...
Agenda<br />Thinking &apos;accessibly’ … why would I care?<br />What are the most common accessibility needs?<br />Evaluat...
How e.magination can help<br />Accessibility Audit<br />Training<br />Coding Consulting:<br />General<br />Tables<br />ARI...
Great Accessibility Resources<br />http://www.w3.org/WAI/intro/aria<br />http://www.w3.org/WAI/<br />http://www.456bereast...
Thank you!<br />John Whalen, PhD<br />Director, User Experience<br />Twitter: 		@johnwhalen<br />Email: 		john.whalen@emag...
Upcoming SlideShare
Loading in...5
×

Accessibility And 508 Compliance In 2009

3,914

Published on

A webinar by e.magination featuring advice on designing or redesigning a website open to all audiences.

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,914
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
78
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Accessibility And 508 Compliance In 2009"

  1. 1. Accessibility and Section 508 Compliance in 2009What you need to know.<br />John Whalen, PhD<br />Director, User Experience and Design, e.magination<br />
  2. 2. Agenda<br />Thinking &apos;accessibly’ … why would I care?<br />What are the most common accessibility needs?<br />Evaluating your site&apos;s compliance and accessibility<br />Latest best practices for ensuring compliance<br />Standards for interactive applications<br />
  3. 3. It’s the Law<br />Section 508 of the Rehabilitation Act:<br />All electronic and information technology used, procured, developed, or maintained by agencies and departments of the U.S. Government must be accessible to people with disabilities.<br />Includes:<br />120,000 Federal workers<br />54,000,000 Americans<br />
  4. 4. There’s a big audience out there…<br />
  5. 5. And its getting older…<br />
  6. 6. Disabilities truly make the Web difficult…<br />Web users with disabilities are 3 times less likely to succeed than users without disabilities at:<br />Searching for information<br />Making purchases<br />Coyne & Nielsen (2001)<br />
  7. 7. You don’t like lawsuits…<br />
  8. 8. You like the benefits of accessible design…<br />
  9. 9. You want the advantage of being a leader…<br />
  10. 10. You want to support mobile devices…<br />
  11. 11. You appreciate great SEO…<br />
  12. 12. Agenda<br />Thinking &apos;accessibly’ … why would I care?<br />What are the most common accessibility needs?<br />Evaluating your site&apos;s compliance and accessibility<br />Latest best practices for ensuring compliance<br />Standards for interactive applications<br />
  13. 13. Most Common Accessibility Needs:<br />Visual disabilities<br />blindness<br />low vision<br />color blindness<br />Hearing impairments<br />deafness<br />hard of hearing<br />Aging-related conditions<br />Physical disabilities<br />motor disabilities<br />speech disabilities<br />Cognitive and neurological disabilities<br />dyslexia and dyscalculia<br />attention deficit disorder<br />intellectual disabilities<br />memory impairments<br />
  14. 14. Assistive Technologies<br />Alternative keyboards or switches<br />Screen readers<br />Speech recognition<br />
  15. 15. Assistive Technologies<br />Braille and refreshable Braille<br />Screen magnifiers<br />Tabbing through structural elements<br />Voice browsers<br />
  16. 16. Scenarios and Accessibility Solutions<br />Online shopper with color blindness (user control of style sheets)<br />Reporter with repetitive stress injury (keyboard equivalents for mouse commands; access-key)<br />Online student who is deaf (captioned audio portions of multimedia files)<br />Accountant with blindness (appropriate markup of tables, alternative text, abbreviations, and acronyms; Braille display)<br />
  17. 17. Scenarios and Accessibility Solutions<br />Classroom student with dyslexia (use of supplemental graphics; freezing animated graphics)<br />Retiree with aging-related conditions, managing personal finances (magnification; avoiding pop-up windows)<br />Supermarket assistant with cognitive disability (clear and simple language; consistent design)<br />Teenager with deaf-blindness, seeking entertainment (user control of style sheets; accessible multimedia)<br />
  18. 18. Agenda<br />Thinking &apos;accessibly’ … why would I care?<br />What are the most common accessibility needs?<br />Evaluating your site&apos;s compliance and accessibility<br />Latest best practices for ensuring compliance<br />Standards for interactive applications<br />
  19. 19. Core Principles – WCAG 2.0<br />Perceivable - Information and user interface components must be presentable to users in ways they can perceiveThis means that users must be able to perceive the information being presented (it can&apos;t be invisible to all of their senses)<br />Operable - User interface components and navigation must be operableThis means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)<br />Understandable - Information and the operation of user interface must be understandableThis means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)<br />Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies<br />
  20. 20. Overall check for your pages<br />Try WebAIM’s WAVE: Web Accessibility Evaluation Tool http://wave.webaim.org/<br />
  21. 21.
  22. 22. Use the Web Accessibility Toolbar<br />http://www.paciellogroup.com/resources/wat-ie-about.html<br />Check HTML<br />Resize screen<br />Disable CSS<br />Review image tags<br />Check color<br />Review tables<br />
  23. 23. 1. Perceivable: Best contrast / color checkers<br />Contrast Analyzer v2 http://www.paciellogroup.com/resources/contrast-analyser.html<br />tool for determining if foreground & background color combinations provide good color visibility<br />Vischeckhttp://www.vischeck.com/<br />
  24. 24. 2. Operable<br />Try your site with no mouse<br />Use Accessibility Toolbar to try site without pictures, without CSS<br />Try site in small sizes, or with magnification turned on<br />Try site using screen reader<br />Accessible CAPTCHA? Try simple math problem.<br />
  25. 25. 2. Operable: Screen Readers<br />JAWS: http://www.freedomscientific.com/products/fs/jaws-product-page.asp<br />NVDA - new free screen reader: http://www.nvda-project.org/<br />Comparison of Screen Readers: http://en.wikipedia.org/wiki/Comparison_of_screen_readers<br />
  26. 26. 3. Understandable: Creating Captions on the Web - Multimedia<br />National Center for Accessible Media<br />http://ncam.wgbh.org/webaccess/tools/index.html<br />
  27. 27. 3. Understandable – test reading level<br />http://juicystudio.com/services/readability.php#readweb<br />Is your text at the right level? Take a look at the last number – the grade level.<br />
  28. 28. Agenda<br />Thinking &apos;accessibly’ … why would I care?<br />What are the most common accessibility needs?<br />Evaluating your site&apos;s compliance and accessibility<br />Latest best practices for ensuring compliance<br />Standards for interactive applications<br />
  29. 29. Classics<br />Use “good ‘ole” H1, H2, etc.<br />Good for screen reader, good for SEO.<br />Easier for mobile phone to display page<br />Use CSS to format the tags visually<br />Use CSS<br />Keep text brief<br />Use bulleted format<br />
  30. 30. ALT Tags – Context is Crucial<br />Source: http://www.webaim.org/techniques/alttext/<br />
  31. 31. ALT Tags<br />
  32. 32. Include table of content, skip links<br />
  33. 33. Make tables simple, or make them accessible<br />http://jimthatcher.com/webcourse9.htm<br />
  34. 34. Many more suggestions<br />Adobe Acrobat: http://www.adobe.com/accessibility/products/reader/<br />Adobe Flash:<br />http://www.adobe.com/accessibility/products/flash/<br />Java: http://www.ibm.com/developerworks/java/library/j-access/<br />http://webaim.org/products/training/<br />http://jimthatcher.com/webcourse1.htm<br />
  35. 35. Latest Updates on Section 508/255<br />
  36. 36. Agenda<br />Thinking &apos;accessibly’ … why would I care?<br />What are the most common accessibility needs?<br />Evaluating your site&apos;s compliance and accessibility<br />Latest best practices for ensuring compliance<br />Standards for interactive applications<br />
  37. 37. WAI-ARIA<br /><ul><li>Making sites with JavaScript and updates without screen refreshes accessible</li></ul>Great introductory article:<br />http://dev.opera.com/articles/view/introduction-to-wai-aria/<br />
  38. 38. WAI ARIA<br />Create “live area” that captures changes (without screen refresh)<br />Can set tab index to “-1” to allow focus when needed<br />Allow keyboard control<br />“What am I?”, State, Property<br />[included in IE 8]<br />Example: http://developer.yahoo.com/yui/examples/menu/menuwaiaria.html<br /> http://video.yahoo.com/watch/3608798/9955360<br />
  39. 39. Accessible Drag and Drop<br />http://devfiles.myopera.com/articles/735/example.html#kbdinstructions<br />
  40. 40. Toolkits incorporating WAI-ARIA<br />JQuery UI<br />Yahoo! YUI<br />Google Web Toolkit<br />Dojo<br />ASP.NET “Q2 2009”<br />ExtJS?<br />
  41. 41. Best practices<br />Use XHTML when possible<br />Apply ARIA role attribute when needed<br />Set ARIA states and properties<br />Support full keyboard navigation<br />Make the visual UI match the browser states<br />See also: http://www.alistapart.com/articles/waiaria<br />
  42. 42. Agenda<br />Thinking &apos;accessibly’ … why would I care?<br />What are the most common accessibility needs?<br />Evaluating your site&apos;s compliance and accessibility<br />Latest best practices for ensuring compliance<br />Standards for interactive applications<br />
  43. 43. How e.magination can help<br />Accessibility Audit<br />Training<br />Coding Consulting:<br />General<br />Tables<br />ARIA<br />
  44. 44. Great Accessibility Resources<br />http://www.w3.org/WAI/intro/aria<br />http://www.w3.org/WAI/<br />http://www.456bereastreet.com/<br />http://www.paciellogroup.com/blog/<br />http://juicystudio.com/index.php<br />http://webaim.org/<br />
  45. 45. Thank you!<br />John Whalen, PhD<br />Director, User Experience<br />Twitter: @johnwhalen<br />Email: john.whalen@emagination.com<br />LinkedIn: http://www.linkedin.com/in/johnwhalen<br />
  1. A particular slide catching your eye?

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

×