meet.JS Accessible web applicationsWojtek ZajacKRAKÓW, 31.07.2011
Why accessibility?  A little story                 meet.JS
I got into web accessibility in 2005                                       meet.JS
I got into web accessibility in 2005✦   The first (?) online course of the Polish Sign Language✦   Tremendous feedback. Re...
The awareness of webaccessibility is still very low. Why is it overlooked      so often?                                  ...
Benefits of web accessibility ✦    About 15% (5 mln) of total population in      Poland live with some kind of disability¹...
Benefits of web accessibility✦   Strong overlap with: mobile web    http://www.w3.org/TR/mwbp-wcag/    Progressive enhance...
Please spread  the word to yourcompany, colleagues,   client or school.                   meet.JS
Types of disability
Visual              Hearing            Motor           CognitiveUser groups:✦   Blind✦   Partial vision loss (tunnel visio...
Visual         Hearing             Motor        CognitiveDon’t rely on subtle details, choose contrast or changedappearanc...
Visual             Hearing      Motor         Cognitive                         Red–green colorblindnessHard to differenti...
Visual          Hearing              Motor       CognitiveVideo transcription (closed captioning) benefits not just thosew...
Visual           Hearing      Motor           CognitiveMotor impaired can find using keyboard or mouse problematic.Alterna...
Visual            Hearing             Motor   CognitiveCognitive problems occur to older users and those with worse level ...
Good practices
Correct alternative content          More: http://webaim.org/techniques/alttext/                                          ...
Proper link text 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or f...
Proper link text                                                       H idde n us                                        ...
Accessible forms  ✦   Label your inputs                           ✦   Check the tab order  ✦   Group form elements        ...
UsingWAI-ARIA
WAI-ARIA Landmark Roles         Landmark                             HTML 5 element      role=”application”               ...
1. Start with POSH                     meet.JS
1. Start with POSH                     POSH: Plain Old Semantic HTML                                                     m...
1. Start with POSH2. Order DOM content   logically                       Viewing bbc.co.uk with CSS disabled              ...
1. Start with POSH2. Order DOM content   logically3. Make sure forms are   accessible                         Firebug view...
1. Start with POSH2. Order DOM content     <!-­‐-­‐	  Natural	  tab	  order	  -­‐-­‐>                         <div	  oncli...
1. Start with POSH2. Order DOM content   logically             <li	  role="menuitemcheckbox"	  aria-­‐checked="true">     ...
ARIA Live Regions✦   Assistive Technology users are notified when the content changes✦   Mark up the parts that are likely...
Plugins, extensions
Check headings architecture                                                       Disable imagesWeb Developer Toolbar     ...
Investigate problems:                                  No anchor textNo h e ading s                                     No...
Links with no anchor text        Recurring “Read more” linksAccessibility Evaluation Toolbar   http://goo.gl/pgdDK   meet.JS
Further reading                                   ✦   http://webaxe.blogspot.com/2011/05/                                 ...
Thanks!slideshare.net/wojciechzajacwojtekzajac.comWojtek Zajac (@theanxy)             This work is licensed under         ...
Upcoming SlideShare
Loading in...5
×

Accessible web applications

1,529

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total Views
1,529
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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)¹ http://www.niepelnosprawni.pl/files/www.niepelnosprawni.pl/public/rozne_pliki/fakty_i_mity_2009.pdf meet.JS
  7. 7. Benefits of web accessibility✦ Strong overlap with: mobile web http://www.w3.org/TR/mwbp-wcag/ 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. http://contrastrebellion.com/ 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: http://webaim.org/techniques/alttext/ 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 http://www.w3.org/TR/2008/REC-WCAG20-20081211/ #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: http://webaim.org/techniques/forms/ 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 bbc.co.uk 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 http://goo.gl/J5afH 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 http://goo.gl/hHOOB meet.JS
  33. 33. Links with no anchor text Recurring “Read more” linksAccessibility Evaluation Toolbar http://goo.gl/pgdDK meet.JS
  34. 34. Further reading ✦ http://webaxe.blogspot.com/2011/05/ accessibility-twitter-lists.html ✦ http://twitter.com/a11y ✦ http://webaim.org/ ✦ http://www.rnib.org.uk/ ✦ http://html5accessibility.com/Web Accessibility: Web Standardsand Regulatory Compliance (2006) meet.JS
  35. 35. Thanks!slideshare.net/wojciechzajacwojtekzajac.comWojtek Zajac (@theanxy) This work is licensed under a Creative Commons Attribution 3.0 Unported License
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×