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.
Twitter: @AstroboySoup
Guide to Building
Accessible Websites
http://bit.ly/jbeat-a11ytesting
I’m Peter
I’m a Community
Leadership Team Member
I Podcast on Joomla Beat
&
Manage a team
of designers & developers
Joomla Yogis
Joomla World Conference 2014
What is accessibility?
#a11y
What is Accessibility?
• Web accessibility refers to the
inclusive practice of removing
barriers that prevent interaction
...
Why?
No one is the same
Diversity
We’re a mixed bunch of people from around the world, different languages,
different cultures. No one is the same...
The Case
http://www.w3.org/WAI/bcase/socog-case-study
Sydney Olympics
2000
“I am comfortably satisfied that his [the plaintiff]
limited access to the web site caused him
considerable feelings of hur...
It’s the law!
WCAG 2.0
High Court of Australia
First Federal Government Joomla Website to meet
WCAG 2.0 A
How Do You Make a
Website Accessible?
• Understanding WCAG 2.0 Success Criterion
• Proper coding practises, semantics, ari...
WCAG 2.0 Guidelines
• Perceivable
• Operable
• Understandable
• Robust
Perceivable
• 1.1 Text alternatives, readable
• 1.2 Text based alternatives for video and audio
• 1.3 Create content that ...
Operable
• 2.1 Keyboard functional
• 2.2 Time to read and use content.
• 2.3 Do not design content in a way that is known
...
Understandable
• 3.1 Make text content readable and
understandable.
• 3.2 Make Web pages appear and operate in
predictable...
Robustness
• Make sure it works on any user agent



Misconceptions
I want to change your
perspective on
accessibility.
Web accessibility is a
mindset not a checklist
http://www.accessiq.org/news/
commentary/2012/09/web-
accessibility-is-a-mindset-not-a-
checklist
It’s not hard to do
We should look at
accessibility as a part of the
process, not an after thought
Everything we design
and build can be
accessible.
It’s a matter of
understanding
Do you contribute back
to the Joomla Project?
Sign up on this website
and bookmark this
page…
Please go here:
https://github.com/
joomla/joomla-websites
We’re going to test the
new Joomla Showcase
website
This is how you can
contribute to Joomla!
https://joomla-
showcase.octopoos-
dev.com/
What Are We Testing?
• Perceivable
• Operable
• Understandable
• Robust
What Are We Testing Today?
• 1.1 Images and alternative text
• 1.4 Colour Contrast
• 2.1 Keyboard navigation
• 3.3 Labels,...
Joomla has WAI-ARIA landmarks
How Are We Testing?
• Screen readers, NVDA
• Page testing scripts
• Manual testing
http://www.nvaccess.org/
http://squizlabs.github.io/HTML_CodeSniffer/
Colour Contrast Analyser for Mac
Report It
• Got to Github and report what you find!



https://github.com/joomla/joomla-websites/



Lets make it happen!
How do we know how to
code things to make
them accessible?
http://a11yproject.com/
patterns/
Resources
• WCAG 2.0 Guidelines
• WCAG 2.0 Quick Reference
• WebAIM Checklist Summary
A Guide to Building Accessible Websites for Joomla
A Guide to Building Accessible Websites for Joomla
A Guide to Building Accessible Websites for Joomla
A Guide to Building Accessible Websites for Joomla
A Guide to Building Accessible Websites for Joomla
A Guide to Building Accessible Websites for Joomla
Upcoming SlideShare
Loading in …5
×

A Guide to Building Accessible Websites for Joomla

1,718 views

Published on

Presentation done at Joomla World Conference 2015 in regards to web accessibility, the standards, what you have to do in regards to creating accessible websites.

Published in: Design
  • Be the first to comment

A Guide to Building Accessible Websites for Joomla

  1. 1. Twitter: @AstroboySoup Guide to Building Accessible Websites http://bit.ly/jbeat-a11ytesting
  2. 2. I’m Peter I’m a Community Leadership Team Member I Podcast on Joomla Beat & Manage a team of designers & developers
  3. 3. Joomla Yogis Joomla World Conference 2014
  4. 4. What is accessibility? #a11y
  5. 5. What is Accessibility? • Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.
  6. 6. Why?
  7. 7. No one is the same
  8. 8. Diversity We’re a mixed bunch of people from around the world, different languages, different cultures. No one is the same. We are unique and beautiful.
  9. 9. The Case http://www.w3.org/WAI/bcase/socog-case-study
  10. 10. Sydney Olympics 2000
  11. 11. “I am comfortably satisfied that his [the plaintiff] limited access to the web site caused him considerable feelings of hurt, humiliation and rejection. One cannot overstate the consequential effect upon him of his having to cope with the persistent need to counter what he saw as a negative, unhelpful and dismissive attitude on the part of an organization charged with the presentation of the most notable sporting event in the history of this country.”
  12. 12. It’s the law! WCAG 2.0
  13. 13. High Court of Australia First Federal Government Joomla Website to meet WCAG 2.0 A
  14. 14. How Do You Make a Website Accessible? • Understanding WCAG 2.0 Success Criterion • Proper coding practises, semantics, aria tags • Accessible Design Patterns • Accessibility Testing
  15. 15. WCAG 2.0 Guidelines • Perceivable • Operable • Understandable • Robust
  16. 16. Perceivable • 1.1 Text alternatives, readable • 1.2 Text based alternatives for video and audio • 1.3 Create content that can be presented in different ways (simpler layout) without losing information or structure. • 1.4 See and hear content including 
 separating foreground from background.
  17. 17. Operable • 2.1 Keyboard functional • 2.2 Time to read and use content. • 2.3 Do not design content in a way that is known to cause seizures. • 2.4 Help users navigate, find content, 
 and determine where they are.
  18. 18. Understandable • 3.1 Make text content readable and understandable. • 3.2 Make Web pages appear and operate in predictable ways. • 3.3 Help users avoid and 
 correct mistakes.
  19. 19. Robustness • Make sure it works on any user agent
 

  20. 20. Misconceptions
  21. 21. I want to change your perspective on accessibility.
  22. 22. Web accessibility is a mindset not a checklist
  23. 23. http://www.accessiq.org/news/ commentary/2012/09/web- accessibility-is-a-mindset-not-a- checklist
  24. 24. It’s not hard to do
  25. 25. We should look at accessibility as a part of the process, not an after thought
  26. 26. Everything we design and build can be accessible.
  27. 27. It’s a matter of understanding
  28. 28. Do you contribute back to the Joomla Project?
  29. 29. Sign up on this website and bookmark this page…
  30. 30. Please go here: https://github.com/ joomla/joomla-websites
  31. 31. We’re going to test the new Joomla Showcase website
  32. 32. This is how you can contribute to Joomla!
  33. 33. https://joomla- showcase.octopoos- dev.com/
  34. 34. What Are We Testing? • Perceivable • Operable • Understandable • Robust
  35. 35. What Are We Testing Today? • 1.1 Images and alternative text • 1.4 Colour Contrast • 2.1 Keyboard navigation • 3.3 Labels, error handling • Semantics, H1, H2, H3 etc
  36. 36. Joomla has WAI-ARIA landmarks
  37. 37. How Are We Testing? • Screen readers, NVDA • Page testing scripts • Manual testing
  38. 38. http://www.nvaccess.org/
  39. 39. http://squizlabs.github.io/HTML_CodeSniffer/
  40. 40. Colour Contrast Analyser for Mac
  41. 41. Report It • Got to Github and report what you find!
 
 https://github.com/joomla/joomla-websites/
 

  42. 42. Lets make it happen!
  43. 43. How do we know how to code things to make them accessible?
  44. 44. http://a11yproject.com/ patterns/
  45. 45. Resources • WCAG 2.0 Guidelines • WCAG 2.0 Quick Reference • WebAIM Checklist Summary

×