Twitter: @AstroboySoup

Guide to Building Accessible Websites

http://bit.ly/jbeat-a11ytesting

I’m PeterI’m a Community

Leadership Team Member

I Podcast on Joomla Beat

&

Manage a team of designers & developers

Joomla YogisJoomla World Conference 2014

What is accessibility? #a11y

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.

Why?

No one is the same

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.

The Casehttp://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 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.”

It’s the law! WCAG 2.0

High Court of AustraliaFirst 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, aria tags

• Accessible Design Patterns

• Accessibility Testing

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 can be presented in different ways (simpler layout) without losing information or structure.

• 1.4 See and hear content including separating foreground from background.

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.

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.

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, error handling

• Semantics, H1, H2, H3 etc

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