On Tuesday, I’ll be speaking at WordPress DC, giving an encore of my WordCamp U.S. talk – Themes are for Users. You should come out if you’re in the area and want to learn more about WordPress and mingle with the local WordPress community. Plus, as a new wrinkle to my talk, I’ll dive into Components, a new project from the theme team at Automattic. Hope to see you there!
I recently gave a lightning talk at WordPress DC on Quick Wins for Accessible WordPress Themes. Yuri Victor, Director of User Experience at the Washington Post, stood in the back of the room and asked a handful of excellent questions of speakers. His question for me? To paraphrase:
Most of us struggle to create great experiences for 90 percent of our users. Why should we care about this 10 percent that’s in the minority?
My answer (again, paraphrasing):
When you make good decisions about accessibility, they cascade down to all of your users, not just those with disabilities. An example would be when you use relative font sizes, it allows users with vision problems to easily adjust the font size of a site. Those relative font sizes also come in handy when resizing fonts for a site that is responsive so it can better adjust to different screen sizes.
You may not know where to start when trying to create an accessible-ready WordPress theme. It’s easy to become overwhelmed at the thought of tackling accessibility, but it doesn’t have to be.
You can knock out several quick tips along the way, which will help your theme be more accessible.
What is Web Accessibility?
First, what is web accessibility? Definitions vary. I like:
The practice of making websites and applications
usable by people of all abilities.
Now that we have that out of the way, let’s get to the tips.
1. Start with Accessibility in Mind
Accessibility spans all the disciplines:
- Project management
- User Experience
You have to start with it as an objective in order to reach it.
2. Find a Good Base
You don’t have do do it all. Look here for help when beginning a theme:
- Starter theme: Underscores
- Default theme: Twenty Thirteen
- Child theme: Accessible Twenty Eleven
- Custom theme: Blaskan
- Custom theme: Accessible Zen
3. 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
4. Sweat the Small Stuff
Because it can make a big difference.
- Be mindful of your reading order
- Skip nav links = awesome
- Keep the underline on links and define focus styles
- Relative units on fonts = also awesome
- Keep titles with “Read more…” links
5. Wait a Minute!
I know what you’re thinking. I didn’t really talk too much about WordPress themes That’s true because accessibility is more about people than technology. When you’re building your themes, keep your users at the forefront, and know yourself and your team. That will help you more than anything.
Creating content often becomes an afterthought when planning a website. People want bells and whistles. Interactivity. Innovation. Well, none of that happens without good, solid content.
That was the framework for the lightning talk I gave at last week’s WordPress DC Meetup. If you power through the the quick slideshow I put together below, you’ll see a lot of what I outline is very basic, but embracing the basics first can help you reach beyond the basics. So much about creating content for websites and interactive projects means following a well defined process. Sometimes, that process is one someone else created, something you created or a hybrid of the two. Whichever it is for you, embrace that process and trust it.