![Page 1: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/1.jpg)
Twitter: @AstroboySoup
Guide to Building Accessible Websites
http://bit.ly/jbeat-a11ytesting
![Page 2: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/2.jpg)
I’m PeterI’m a Community
Leadership Team Member
I Podcast on Joomla Beat
&
Manage a team of designers & developers
![Page 3: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/3.jpg)
Joomla YogisJoomla World Conference 2014
![Page 4: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/4.jpg)
What is accessibility? #a11y
![Page 5: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/5.jpg)
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.
![Page 6: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/6.jpg)
![Page 7: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/7.jpg)
Why?
![Page 8: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/8.jpg)
No one is the same
![Page 9: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/9.jpg)
DiversityWe’re a mixed bunch of people from around the world, different languages,
different cultures. No one is the same. We are unique and beautiful.
![Page 11: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/11.jpg)
Sydney Olympics 2000
![Page 12: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/12.jpg)
“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.”
![Page 13: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/13.jpg)
It’s the law! WCAG 2.0
![Page 14: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/14.jpg)
High Court of AustraliaFirst Federal Government Joomla Website to meet
WCAG 2.0 A
![Page 15: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/15.jpg)
How Do You Make a Website Accessible?
• Understanding WCAG 2.0 Success Criterion
• Proper coding practises, semantics, aria tags
• Accessible Design Patterns
• Accessibility Testing
![Page 16: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/16.jpg)
WCAG 2.0 Guidelines
• Perceivable
• Operable
• Understandable
• Robust
![Page 17: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/17.jpg)
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.
![Page 18: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/18.jpg)
![Page 19: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/19.jpg)
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.
![Page 20: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/20.jpg)
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.
![Page 21: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/21.jpg)
Robustness
• Make sure it works on any user agent
![Page 22: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/22.jpg)
Misconceptions
![Page 23: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/23.jpg)
I want to change your perspective on accessibility.
![Page 24: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/24.jpg)
Web accessibility is a mindset not a checklist
![Page 25: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/25.jpg)
http://www.accessiq.org/news/commentary/2012/09/web-
accessibility-is-a-mindset-not-a-checklist
![Page 26: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/26.jpg)
![Page 27: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/27.jpg)
![Page 28: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/28.jpg)
![Page 29: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/29.jpg)
![Page 30: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/30.jpg)
It’s not hard to do
![Page 31: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/31.jpg)
We should look at accessibility as a part of the process, not an after thought
![Page 32: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/32.jpg)
Everything we design and build can be
accessible.
![Page 33: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/33.jpg)
It’s a matter of understanding
![Page 34: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/34.jpg)
Do you contribute back to the Joomla Project?
![Page 35: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/35.jpg)
Sign up on this website and bookmark this
page…
![Page 36: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/36.jpg)
Please go here: https://github.com/
joomla/joomla-websites
![Page 37: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/37.jpg)
We’re going to test the new Joomla Showcase
website
![Page 38: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/38.jpg)
This is how you can contribute to Joomla!
![Page 40: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/40.jpg)
What Are We Testing?
• Perceivable
• Operable
• Understandable
• Robust
![Page 41: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/41.jpg)
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
![Page 42: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/42.jpg)
Joomla has WAI-ARIA landmarks
![Page 43: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/43.jpg)
How Are We Testing?
• Screen readers, NVDA
• Page testing scripts
• Manual testing
![Page 46: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/46.jpg)
Colour Contrast Analyser for Mac
![Page 47: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/47.jpg)
Report It
• Got to Github and report what you find! https://github.com/joomla/joomla-websites/
![Page 48: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/48.jpg)
Lets make it happen!
![Page 49: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/49.jpg)
How do we know how to code things to make
them accessible?
![Page 50: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/50.jpg)
http://a11yproject.com/patterns/
![Page 51: A Guide to Building Accessible Websites for Joomla](https://reader033.vdocuments.us/reader033/viewer/2022050614/588421631a28ab485c8b5a69/html5/thumbnails/51.jpg)
Resources
• WCAG 2.0 Guidelines
• WCAG 2.0 Quick Reference
• WebAIM Checklist Summary