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.

1. Twitter: @AstroboySoup
Guide to Building
Accessible Websites
http://bit.ly/jbeat-a11ytesting

2. I’m Peter
I’m a Community
Leadership Team Member
I Podcast on Joomla Beat
&
Manage a team
of designers & developers

3. Joomla Yogis
Joomla World Conference 2014

4. What is accessibility?
#a11y

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.

7. Why?

8. No one is the same

9. 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.

10. The Case
http://www.w3.org/WAI/bcase/socog-case-study

11. Sydney Olympics
2000

12. “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.”

13. It’s the law!
WCAG 2.0

14. High Court of Australia
First Federal Government Joomla Website to meet
WCAG 2.0 A

15. How Do You Make a
Website Accessible?
• Understanding WCAG 2.0 Success Criterion
• Proper coding practises, semantics, aria tags
• Accessible Design Patterns
• Accessibility Testing

16. WCAG 2.0 Guidelines
• Perceivable
• Operable
• Understandable
• Robust

17. 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.

19. 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.

20. 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.

21. Robustness
• Make sure it works on any user agent

22. Misconceptions

23. I want to change your
perspective on
accessibility.

24. Web accessibility is a
mindset not a checklist

25. http://www.accessiq.org/news/
commentary/2012/09/web-
accessibility-is-a-mindset-not-a-
checklist

30. It’s not hard to do

31. We should look at
accessibility as a part of the
process, not an after thought

32. Everything we design
and build can be
accessible.

33. It’s a matter of
understanding

34. Do you contribute back
to the Joomla Project?

35. Sign up on this website
and bookmark this
page…

36. Please go here:
https://github.com/
joomla/joomla-websites

37. We’re going to test the
new Joomla Showcase
website

38. This is how you can
contribute to Joomla!

39. https://joomla-
showcase.octopoos-
dev.com/

40. What Are We Testing?
• Perceivable
• Operable
• Understandable
• Robust

41. 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

42. Joomla has WAI-ARIA landmarks

43. How Are We Testing?
• Screen readers, NVDA
• Page testing scripts
• Manual testing

44. http://www.nvaccess.org/

45. http://squizlabs.github.io/HTML_CodeSniffer/

46. Colour Contrast Analyser for Mac

47. Report It
• Got to Github and report what you find!
https://github.com/joomla/joomla-websites/

48. Lets make it happen!

49. How do we know how to
code things to make
them accessible?

50. http://a11yproject.com/
patterns/

51. Resources
• WCAG 2.0 Guidelines
• WCAG 2.0 Quick Reference
• WebAIM Checklist Summary