Getting Started withWeb Accessibility & WAVE                         @seanyo                        SeanYo.ca             ...
What is Web Accessibility?  Web accessibility refers to the practice of   making websites usable by people of all   abilit...
What is WAVE? Web-based tool Helps make web content  more accessible Not a substitute for  humans Reports a11y errors,...
Web Accessibility
Diversity of AbilitiesWeb Accessibility Barriers  1     Auditory  2     Cognitive and Neurological  3     Physical/Motor  ...
Why Be Accessible?
Why Web Accessibility Makes Sense                            More            Be             People          Awesome       ...
Why Be Accessible?
Why Have a Website?
To Connect With People
User Experience
Accessibility Experience
People Have Experiences        Checklists Don’t
Web Accessibility   Principles
The Only One That Matters       People        First
AODAPrinciples of Accessibility     Independence     Dignity     Integration     Equality of opportunity
W3CPrinciples of Accessibility     Perceivable     Operable     Understandable     Robust
UnderstadingWeb Accessibility  For Managers & Developers
Accessibility is SimpleAutomated Tools and Best Practices       • Lots of great, free tools to measure accessibility      ...
Accessibility is ComplicatedNo Single Path       • How to measure accessibility?       • Automated testing needs user test...
Accessibility is CheapThe Best Stuff is Open & Free       • Being accessible improves search rankings       • Google is a ...
Accessibility is ExpensiveYou’re only as Accessible as your last a11y bug…       • Passing a checklist doesn’t make a site...
Accessibility is Cheap & Simple…
…When Finding Problems
Accessibility is Complicated and Expensive…
…When Fixing Accessibility Problems
Accessibility for Management
Plan for Accessibility From the          Beginning
Most errors are introduced during requirements analysis anddesign. The later they are removed, the most expensive it is to...
Accessibility is not an option.An inaccessible website is incomplete.
A vendor claiming a product isaccessible does not make it accessible.
Avoid Assumptions About Your          Audience
Count on TextProvide Alternatives in Text
Don’t take control of your visitor’s           experience
Use Clear Language
Testing Is Hard       Real People     Different Needs   Assistive Technology
Using WAVE
w3.org/WAI/demos/bad/
wave.webaim.org/
WAVE BasicsTesting Web Accessibility   Tool to identify a11y issues   Cannot validate as “accessible”   Adds colour cod...
WAVE ReportsErrors, Features & Alerts Default View Presents your page with the  embedded accessibility icons and  indica...
WAVE ReportsStructure/Order View Displays icons and indicators for  overall structure of the page. Number indicators sho...
WAVE ReportsText-Only View Displays only the underlying text of the  page. Information that is commonly read by  screen ...
WAVE ReportsOutline View Displays only the headers that are within  your page. Ensure that your page contains headers  w...
WAVE ToolbarIntegrating with Firefox Displays content as it appears within your web  browser. Allows evaluation of priva...
Let’s Get Our Hands Dirty!   w3.org/WAI/demos/bad/
Wave training
Upcoming SlideShare
Loading in …5
×

Wave training

722
-1

Published on

In introduction to Web Accessibility and

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

No Downloads
Views
Total Views
722
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • http://en.wikipedia.org/wiki/Web_accessibility
  • http://en.wikipedia.org/wiki/Web_accessibility
  • http://www.w3.org/WAI/intro/people-use-web/diversity
  • http://accessites.org/why/http://www.webaim.org/intro/
  • Makingaccessibile websites can be challenging – and we’ll all make mistakesChecklists are not a bad thing – they can be a useful toolHowever, if you rely solely on checklists – you will generate false positive reports that a site is accessibleChecklists are about as smart as a spellchecker – try and keep that in mind
  • http://en.wikipedia.org/wiki/Web_accessibility
  • Perceivable - Information and interface must be presentable to users in ways they can perceive.This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)Operable - User interface components and navigation must be operable.This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)Understandable - Information and the operation of user interface must be understandable.This 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)Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
  • Wave training

    1. 1. Getting Started withWeb Accessibility & WAVE @seanyo SeanYo.ca sean.yo@uoguelph.ca
    2. 2. What is Web Accessibility? Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed developed and edited all users can have equal access to information and functionality. http://en.wikipedia.org/wiki/Web_accessibility
    3. 3. What is WAVE? Web-based tool Helps make web content more accessible Not a substitute for humans Reports a11y errors, possible errors, and other crisis points
    4. 4. Web Accessibility
    5. 5. Diversity of AbilitiesWeb Accessibility Barriers 1 Auditory 2 Cognitive and Neurological 3 Physical/Motor 4 Speech 5 Visual
    6. 6. Why Be Accessible?
    7. 7. Why Web Accessibility Makes Sense More Be People Awesome on Your Website It’s the Be Better Awesome law or it Code will be More Do The Google Aging Right Will Visitors Thing Love You Easier to Maintain
    8. 8. Why Be Accessible?
    9. 9. Why Have a Website?
    10. 10. To Connect With People
    11. 11. User Experience
    12. 12. Accessibility Experience
    13. 13. People Have Experiences Checklists Don’t
    14. 14. Web Accessibility Principles
    15. 15. The Only One That Matters People First
    16. 16. AODAPrinciples of Accessibility Independence Dignity Integration Equality of opportunity
    17. 17. W3CPrinciples of Accessibility Perceivable Operable Understandable Robust
    18. 18. UnderstadingWeb Accessibility For Managers & Developers
    19. 19. Accessibility is SimpleAutomated Tools and Best Practices • Lots of great, free tools to measure accessibility • Lots of great, free info & recommendations • Using web standards is good for accessibility • Tools: WAVE, FAE, TAW, FANGS, NVDA • Info: WAI, WCAG, WebAIM, WaSP • Use valid, semantic code - Even better, use a CMS
    20. 20. Accessibility is ComplicatedNo Single Path • How to measure accessibility? • Automated testing needs user testing • Websites are not fire &forget – they are a process • Which Standard? WCAG, 508, AODA • Lots of platforms: IE, Gecko, Webkit + Mobile • Content will change & break accessibility
    21. 21. Accessibility is CheapThe Best Stuff is Open & Free • Being accessible improves search rankings • Google is a Screen Reader • CMS tools are a strong investment – Open & free • The best tools are Open & free • Development best practices are Open & free • CMS tools can automated compliance : alt tags
    22. 22. Accessibility is ExpensiveYou’re only as Accessible as your last a11y bug… • Passing a checklist doesn’t make a site accessible • Accessibility is challenging and doesn’t end • Leaving it to the end is costly – in time and money • Web development is a mature profession • Accessibility is a critical dimension of webdev • A11y is expensive to retrofit, like schemas & security
    23. 23. Accessibility is Cheap & Simple…
    24. 24. …When Finding Problems
    25. 25. Accessibility is Complicated and Expensive…
    26. 26. …When Fixing Accessibility Problems
    27. 27. Accessibility for Management
    28. 28. Plan for Accessibility From the Beginning
    29. 29. Most errors are introduced during requirements analysis anddesign. The later they are removed, the most expensive it is totake them out. Boehm et al (1975): “Some Experience with Automated Aids to the Design of Large-Scale Reliable Software.” Diagram Source: http://blogs.windriver.com/vxworks/device-management/
    30. 30. Accessibility is not an option.An inaccessible website is incomplete.
    31. 31. A vendor claiming a product isaccessible does not make it accessible.
    32. 32. Avoid Assumptions About Your Audience
    33. 33. Count on TextProvide Alternatives in Text
    34. 34. Don’t take control of your visitor’s experience
    35. 35. Use Clear Language
    36. 36. Testing Is Hard Real People Different Needs Assistive Technology
    37. 37. Using WAVE
    38. 38. w3.org/WAI/demos/bad/
    39. 39. wave.webaim.org/
    40. 40. WAVE BasicsTesting Web Accessibility Tool to identify a11y issues Cannot validate as “accessible” Adds colour coded comments Provides 4 types of reports  Errors, Features & Alerts  Structure/Order View  Text-Only View  Outline View
    41. 41. WAVE ReportsErrors, Features & Alerts Default View Presents your page with the embedded accessibility icons and indicators. If this view is too complicated you can “disable styles” Scripting is removed from this an all other WAVE reports
    42. 42. WAVE ReportsStructure/Order View Displays icons and indicators for overall structure of the page. Number indicators show the reading/navigation order of the page. Follow the numbers to determine if the reading and navigation order of the page makes sense and is logical.
    43. 43. WAVE ReportsText-Only View Displays only the underlying text of the page. Information that is commonly read by screen readers will be presented. The visual styling of the page is removed. This provides a visual view of what a screen reader would likely read.  Fangs Firefox Add-On
    44. 44. WAVE ReportsOutline View Displays only the headers that are within your page. Ensure that your page contains headers where appropriate Ensure structure of the page is logical and appropriate.
    45. 45. WAVE ToolbarIntegrating with Firefox Displays content as it appears within your web browser. Allows evaluation of private, intranet, password protected, dynamically generated, or scripted web content. All evaluation happens directly within your browser. The toolbar also evaluates content after scripting has been applied, whereas the server version of WAVE removes all scripting.
    46. 46. Let’s Get Our Hands Dirty! w3.org/WAI/demos/bad/
    1. A particular slide catching your eye?

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

    ×