Lessons from Building an Accessible WordPress Theme
Or How to be Approach Accessible Theming Like a Ninja
David A. Kennedy
Front End Developer/Accessibility Analyst | Rock Creek Strategic Marketing
Hello!
I'm Dave
I try to make the web a more accessible place.
- I like clean code, open source, CrossFit and peanut butter and jelly sandwiches.
- I worked as an Online Communications Manager for The Arc, a national nonprofit that serves people with disabilities.
- I use to be a journalist and still love writing.
Where We're Headed?
Obviously, we're going to talk a bit about ninjas...
- Social media ninjas
- JavaScript ninjas
- Not really...
Like a Ninja, People
- What is web accessibility?
- Why it's important?
- I built Accessible Zen
- Always remain strategic
- Good accessibility is undetectable.
- Know your weapons
- Stay centered in battle.
What is Web Accessibility?
Definitions vary
The practice of making websites and applications
usable by people of all abilities.
Why it's important?
Almost one in five Americans have a disability, according to the United States Census Bureau. Many of those disabilities, such as vision problems or mobility issues, can impact how people use the web.
Why it's important?
Accessibility can drive innovation. When you create accessible projects, they can impact other areas. An example: fonts in relative units.
Accessible Zen
1. Always Remain Strategic
My number one goal was to build a simple, accessible WordPress theme. That was hard. How did I not get distracted?
1. Always Remain Strategic
I kept accessibility as my sole focus. That meant I had to make some sacrifices.
2. Good Accessibility is Undetectable
I kept things modern, but still kept "accessible" as part of the name. Oh, and Accessible Zen isn't that much different from Underscores.
2. Good Accessibility is Undetectable
When I look at the final product, I can't see what makes it accessible on the surface.
3. Know Your Weapons
You don't have to do it all, but know your basic weapons.
3. Know Your Weapons
Color matters. High contrast helps everyone.
- Text and images of text have a contrast ratio of at least 4.5:1
- Large text (over 18 point or 14 point bold) has a contrast ratio of at least 3:1
Choose wisely:
3. Know Your Weapons
Skip nav links are awesome. I almost didn't put one in.
3. Know Your Weapons
Keep the underline on links and define focus styles. I went with a dotted border and a "depressed" effect on click to highlight links.
3. Know Your Weapons
I decided to display my titles with my "Read more" links.
4. Stay Centered in Battle
Break from all the coding, the buzz words and the requirements to remember why you're doing what you're doing.
5. Wait a Minute!
You didn't talk a lot about WordPress? We hear a lot about content management systems, frameworks, generators and the like...
Those don't matter. Accessibility transcends technology. It's about people. People use that technology and people make that technology accessible.
You're Awesome!
