Web AccessibilitYDevelopMent<br />WebDev A11y Tools In Action<br />@seanyo<br />seanyo.ca<br />sean.yo@uoguelph.ca<br />
When is Your Website Accessible?<br />
If a person encounters a barrier <br />to using your website, then <br />your website is not accessible<br />A high standa...
If a person encounters a barrier <br />to using your website, then <br />your website is not accessible<br />
If a person encounters a barrier <br />to using your website, then <br />your website is not accessible<br />
Web Accessibility is about People<br />
Web Accessibility is a Process<br />
Define Accessibility for your project<br />Be SMART Specific, Measurable, Attainable, Realistic, Timely <br />
Measuring Web Accessibility<br />
Tools<br />People<br />Expertise<br />
Tools<br />
wave.webaim.org<br />
WAVE toolbar<br />
Wave dreamweaver extension<br />
www.tawdis.net/ingles.html<br />“Web Accessibility Test”<br />
TAW CMS Integration<br />
Taw Standalone<br />
TAW Firefox add-on<br />
 FAE: Functional Accessibility Evaluator<br />http://fae.cita.uiuc.edu/<br />
Firefox accessibility extension<br />
Fangs firefox screen reader emulator<br />
Web Developer Toolbar<br />
NVDA Non-visual Desktop access<br />
Holmes.css<br />
Checkmycolours.com<br />
Readability calculator<br />
Resources<br />
www.w3.org/WAI<br />Web Accessibility Initiative <br />
Before and after demonstration<br />http://www.w3.org/WAI/demos/bad/<br />
webaim.org<br />
webstandardssherpa.com<br />
Books<br />
Connect<br />@seanyo<br />http://seanyo.ca<br />sean.yo@uoguelph.ca<br />Get in touch.<br />Srsly.<br />I’m very lonely.<b...
Upcoming SlideShare
Loading in …5
×

Web accessibility Development Tools In Action

1,748 views
1,675 views

Published on

1 Comment
0 Likes
Statistics
Notes
  • Nice intro to webdev a11y tools and quite frankly, the funniest contact slide I've seen in a while. Hoping to be there next year! :)

    @dboudreau
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
1,748
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
11
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • Ask Audience and guide them to the next slide
  • This isn’t meant to be discouraging, but highlight the gap between checklists and experience.
  • Most importantly, I want to acknowledge that a11y can be a hard problem to solve, because its centered people. Not a checklist, not success criteria, not even a browser or a screen reader. All those things are important and part of the equation.
  • The next thing I want to focus on is a person encountering a barrier – I just want to note that this is an active process. This is an experience the person has – one where they make decisions about how to engage our websites that we can’t always predict or anticipate.
  • At the heart of a11y is connecting people to information. People engaging our websites successfully – and unsuccessfully. When someone encounters a barrier to accessing one of our websites, that is a problem we need to hear about and then work to resolve. So the good news is that if your engaging your users, being authentic and you’re committed to removing barriers on your website then your being accessible.
  • Never forget we build websites for the people who use them, not the people who build them or even the people who pay for them. If you were a chef and made every recipe the way the owner wanted, but no one liked the food, you wouldn’t be successful.XKCD Comic: Venn Diagram of Things on the Front Page of A University Website and Things People Go To The Site Looking ForCampus Photo SlideshowAlumni In The NewsLetter From The PresidentVirtual TourParking InformationUsable Campus MapAcademic CalendarApplication FormsFull Name of School
  • We’re going to talk about a lot of tools today – please don’t forget that web a11y is a process – not a tool. Tools are finite…accessibiilty is an ongoing cycle of needs, content, standards and technology.
  • The any barrier encountered defn is a challengeWe can mitigate this challenge by not trying to use a cookie cutter, one size fits all idea of what it means to be accessible.
  • We can measure a11y with tools – which is what I’ll be talking about today. Tools are good for baselines and contextWe need to focus our work on people – which means when we’re having conversations with people about their experience with our websites is when we’re measuring a11yAnd in addition to measuring the accessibility experience our users have, we need to develop accessibility expertise in our developers. Think of a cabinet maker who can spot a corner that isn’t square at a glance – she can get a t-square and measure it and confirm the error, but a keen eye and practiced expertise is what is valuable.
  • Test wave on wavehttp://www.standards-schmandards.com/2009/pitfalls-of-web-accessibility-evaluation-tools/ Seanyo.caThen show hackguelph.ca
  • Hackguelph.caNote the tight coupling with W3C success criteriaExplicitly provides actions that are only possible by a humanSummary, Marked view, Details, Listing
  • A11ycamp.org
  • A11ycamp.org
  • A11ycamp.org
  • http://wptalk.org/holmes-css-checker/
  • A11ycamp.org
  • http://www.addedbytes.com/lab/readability-score/ Scene:  A cafe.  One table is occupied by a group of Vikings wearing horned helmets.  Whenever the word &quot;spam&quot; is repeated, they begin singing and/or chanting.  A man and his wife enter.  The man is played by Eric Idle, the wife is played by Graham Chapman (in drag), and the waitress is played by Terry Jones, also in drag.Man:You sit here, dear.Wife:Allright.Man:Morning!Waitress:Morning!Man:Well, what&apos;ve you got?Waitress:Well, there&apos;s egg and bacon; egg sausage and bacon; egg and spam; egg bacon and spam; egg bacon sausage and spam; spam bacon sausage and spam; spam egg spam spam bacon and spam; spam sausage spam spam bacon spam tomato and spam;Vikings:Spam spam spamspam...Waitress:...spam spamspam egg and spam; spam spamspamspamspamspam baked beans spam spamspam...Vikings:Spam! Lovely spam! Lovely spam!Waitress:...or Lobster Thermidor a Crevette with a mornay sauce served in a Provencale manner with shallots and aubergines garnished with truffle pate, brandy and with a fried egg on top and spam.Wife:Have you got anything without spam?Waitress:Well, there&apos;s spam egg sausage and spam, that&apos;s not got much spam in it.Wife:I don&apos;t want ANY spam!Man:Why can&apos;t she have egg bacon spam and sausage?Wife:THAT&apos;S got spam in it!Man:Hasn&apos;t got as much spam in it as spam egg sausage and spam, has it?Vikings:Spam spam spamspam... (Crescendo through next few lines...)Wife:Could you do the egg bacon spam and sausage without the spam then?Waitress:Urgghh!Wife:What do you mean &apos;Urgghh&apos;? I don&apos;t like spam!Vikings:Lovely spam! Wonderful spam!Waitress:Shutup!Vikings:Lovely spam! Wonderful spam!Waitress:Shut up! (Vikings stop) Bloody Vikings! You can&apos;t have egg bacon spam and sausage without the spam.Wife:I don&apos;t like spam!Man:Sshh, dear, don&apos;t cause a fuss. I&apos;ll have your spam. I love it. I&apos;m having spam spamspamspamspamspamspam beaked beans spam spamspam and spam!Vikings:Spam spam spamspam. Lovely spam! Wonderful spam!Waitress:Shut up!! Baked beans are off.Man:Well could I have her spam instead of the baked beans then?Waitress:You mean spam spamspamspamspamspam... (but it is too late and the Vikings drown her words)Vikings:(Singing elaborately...) Spam spamspamspam. Lovely spam! Wonderful spam! Spam spa-a-a-a-a-am spam spa-a-a-a-a-am spam. Lovely spam! Lovely spam! Lovely spam! Lovely spam! Lovely spam! Spam spamspamspam!
  • Web accessibility Development Tools In Action

    1. 1. Web AccessibilitYDevelopMent<br />WebDev A11y Tools In Action<br />@seanyo<br />seanyo.ca<br />sean.yo@uoguelph.ca<br />
    2. 2. When is Your Website Accessible?<br />
    3. 3. If a person encounters a barrier <br />to using your website, then <br />your website is not accessible<br />A high standard, but one worth striving for<br />
    4. 4. If a person encounters a barrier <br />to using your website, then <br />your website is not accessible<br />
    5. 5. If a person encounters a barrier <br />to using your website, then <br />your website is not accessible<br />
    6. 6. Web Accessibility is about People<br />
    7. 7.
    8. 8. Web Accessibility is a Process<br />
    9. 9. Define Accessibility for your project<br />Be SMART Specific, Measurable, Attainable, Realistic, Timely <br />
    10. 10. Measuring Web Accessibility<br />
    11. 11. Tools<br />People<br />Expertise<br />
    12. 12. Tools<br />
    13. 13. wave.webaim.org<br />
    14. 14. WAVE toolbar<br />
    15. 15. Wave dreamweaver extension<br />
    16. 16. www.tawdis.net/ingles.html<br />“Web Accessibility Test”<br />
    17. 17. TAW CMS Integration<br />
    18. 18. Taw Standalone<br />
    19. 19. TAW Firefox add-on<br />
    20. 20. FAE: Functional Accessibility Evaluator<br />http://fae.cita.uiuc.edu/<br />
    21. 21. Firefox accessibility extension<br />
    22. 22. Fangs firefox screen reader emulator<br />
    23. 23. Web Developer Toolbar<br />
    24. 24. NVDA Non-visual Desktop access<br />
    25. 25. Holmes.css<br />
    26. 26. Checkmycolours.com<br />
    27. 27. Readability calculator<br />
    28. 28. Resources<br />
    29. 29. www.w3.org/WAI<br />Web Accessibility Initiative <br />
    30. 30. Before and after demonstration<br />http://www.w3.org/WAI/demos/bad/<br />
    31. 31. webaim.org<br />
    32. 32. webstandardssherpa.com<br />
    33. 33. Books<br />
    34. 34.
    35. 35.
    36. 36.
    37. 37. Connect<br />@seanyo<br />http://seanyo.ca<br />sean.yo@uoguelph.ca<br />Get in touch.<br />Srsly.<br />I’m very lonely.<br />

    ×