Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessible web applications


Published on

A presentation given at a local event dedicated to JavaScript developers.

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

Accessible web applications

  1. 1. meet.JS Accessible web applicationsWojtek ZajacKRAKÓW, 31.07.2011
  2. 2. Why accessibility? A little story meet.JS
  3. 3. I got into web accessibility in 2005 meet.JS
  4. 4. I got into web accessibility in 2005✦ The first (?) online course of the Polish Sign Language✦ Tremendous feedback. Requests for help (we weren’t in position) meet.JS
  5. 5. The awareness of webaccessibility is still very low. Why is it overlooked so often? meet.JS
  6. 6. Benefits of web accessibility ✦ About 15% (5 mln) of total population in Poland live with some kind of disability¹ ✦ The average age of web users increases every year ✦ Good for not proficient language users ✦ Meets legal requirements ✦ Everyone benefits! (think slower connections)¹ meet.JS
  7. 7. Benefits of web accessibility✦ Strong overlap with: mobile web Progressive enhancement enhances mobile browsing experience greatly.✦ Strong overlap with: SEO Accessible websites are more likely to rank high. If you use proper headings, good titles, and accessible, well-structured markup, search engines will treat you better. meet.JS
  8. 8. Please spread the word to yourcompany, colleagues, client or school. meet.JS
  9. 9. Types of disability
  10. 10. Visual Hearing Motor CognitiveUser groups:✦ Blind✦ Partial vision loss (tunnel vision, cataracts, haziness etc.)✦ Color blindness (8% of males can’t differentiate green and red) meet.JS
  11. 11. Visual Hearing Motor CognitiveDon’t rely on subtle details, choose contrast or changedappearance instead. meet.JS
  12. 12. Visual Hearing Motor Cognitive Red–green colorblindnessHard to differentiate:Better version: meet.JS
  13. 13. Visual Hearing Motor CognitiveVideo transcription (closed captioning) benefits not just thosewith hearing impairments.✦ Some users choose to disable sound (at the office, using a mobile device)✦ Content becomes parsable by search robots✦ Quoting abilities, in-video search etc. meet.JS
  14. 14. Visual Hearing Motor CognitiveMotor impaired can find using keyboard or mouse problematic.Alternative inputs can have different range of complexity, most frequentbeing different types “switches”.How to help:✦ Provide focus states for links (dangers of outline:  0)✦ Make sure content and focus order is logical.✦ Avoid relying on mouse or multitouch events. meet.JS
  15. 15. Visual Hearing Motor CognitiveCognitive problems occur to older users and those with worse level ofdocument language used.✦ Increase readability of the text✦ Use large headlines and clear instructions✦ Use descriptive link text✦ Increase target area of navigation links meet.JS
  16. 16. Good practices
  17. 17. Correct alternative content More: meet.JS
  18. 18. Proper link text 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A) ~ WCAG 2.0 #navigation-mechanisms-refs meet.JS
  19. 19. Proper link text H idde n us p o si t io ni i ng <dl> ng o f f-s c <dt>Winnie the Pooh </dt> re e n <dd><a href="winnie_the_pooh.html"> <span>Winnie the Pooh </span>HTML</a></dd> <dd><a href="winnie_the_pooh.pdf"> <span>Winnie the Pooh </span>PDF</a></dd> <dt>War and Peace</dt> <dd><a href="war_and_peace.html"> <span>War and Peace </span>HTML</a></dd> <dd><a href="war_and_peace.pdf"> <span>War and Peace </span>PDF</a></dd> </dl> meet.JS
  20. 20. Accessible forms ✦ Label your inputs ✦ Check the tab order ✦ Group form elements ✦ Make sure it’s JS independent <fieldset> <legend>Select  your  pizza  toppings:</legend> <input  id="ham"  type="checkbox"  name="toppings"  value="ham"  /> <label  for="ham">Ham</label><br  /> <input  id="pepperoni"  type="checkbox"  name="toppings"  value="pepperoni"  /> <label  for="pepperoni">Pepperoni</label><br  /> <input  id="mushrooms"  type="checkbox"  name="toppings"  value="mushrooms"  /> <label  for="mushrooms">Mushrooms</label><br  /> <input  id="olives"  type="checkbox"  name="toppings"  value="olives"  /> <label  for="olives">Olives</label> </fieldset> More: meet.JS
  21. 21. UsingWAI-ARIA
  22. 22. WAI-ARIA Landmark Roles Landmark HTML 5 element role=”application” none role=”banner” none role=”complementary” <aside> role=”contentinfo” <footer> role=”main” none role=”navigation” <nav> role=”search” none ~ The Paciello Group meet.JS
  23. 23. 1. Start with POSH meet.JS
  24. 24. 1. Start with POSH POSH: Plain Old Semantic HTML meet.JS
  25. 25. 1. Start with POSH2. Order DOM content logically Viewing with CSS disabled meet.JS
  26. 26. 1. Start with POSH2. Order DOM content logically3. Make sure forms are accessible Firebug view of the grouped form fields meet.JS
  27. 27. 1. Start with POSH2. Order DOM content <!-­‐-­‐  Natural  tab  order  -­‐-­‐> <div  onclick=""  tabindex="0">Clicky  1</div> logically <!-­‐-­‐  Custom  tab  order  -­‐-­‐>3. Make sure forms are <div  onclick=""  tabindex="7">Clicky  2</div> accessible <!-­‐-­‐  Focusable  but  not  in  tab  order  -­‐-­‐> <div  onclick=""  tabindex="-­‐1">Clicky  3</div>4. Manage focus Creating Accessible Interactive Web Apps using HTML5 meet.JS
  28. 28. 1. Start with POSH2. Order DOM content logically <li  role="menuitemcheckbox"  aria-­‐checked="true">        Sort  by  Last  Modified </li>3. Make sure forms are accessible [aria-­‐checked="true"]  {  font-­‐weight:  bold;  } [aria-­‐checked="true"]:before  {  background-­‐image:   url(checked.gif);  }4. Manage focus Using WAI-ARIA: 2.2 States and Properties5. Add ARIA for screen readers meet.JS
  29. 29. ARIA Live Regions✦ Assistive Technology users are notified when the content changes✦ Mark up the parts that are likely to change with Live Regions <span  class=saving  aria-­‐live=polite>Saving...</span> meet.JS
  30. 30. Plugins, extensions
  31. 31. Check headings architecture Disable imagesWeb Developer Toolbar meet.JS
  32. 32. Investigate problems: No anchor textNo h e ading s No a l t te x t S ubm i t n o t be i ng re ad o u t Fangs meet.JS
  33. 33. Links with no anchor text Recurring “Read more” linksAccessibility Evaluation Toolbar meet.JS
  34. 34. Further reading ✦ accessibility-twitter-lists.html ✦ ✦ ✦ ✦ Accessibility: Web Standardsand Regulatory Compliance (2006) meet.JS
  35. 35. Thanks! Zajac (@theanxy) This work is licensed under a Creative Commons Attribution 3.0 Unported License