Website Accessibility and WordPress

If you’re in the world of web design and development, you’re familiar with “responsive web design” (RWD), a phrase coined in 2010 by designer Ethan Marcotte. In its most basic understanding, RWD is an approach to building sites for optimal viewing, regardless of the screen size.

But responsive design is much more than just scaling a screen to fit different devices. Creating responsive websites is all about making your website accessible to more people, regardless of how they get to a site or consume its information.

I’ve had website accessibility on the brain lately.

• A couple of weeks ago we touched on it in an episode of OfficeHours.fm.
• Then I wrote a post about getting familiar with WordPress.org, where there’s an entire team dedicated to making WordPress more accessible.
• Following that, I stumbled on a Matt Report interview with Ethan Marcotte discussing RWD beyond just screen sizes.
• Then this weekend I attended WordCamp Austin, where Jen Mylo was on a hunt for new WordPress contributors and called out Pat Ramsey, a WordPress developer who’s worked with accessibility from the early days.

So, no kidding when I said it’s on the brain. Website accessibility (in the context of WordPress sites) is a subject I’m starting to explore. I have no authoritative knowledge, but wanted to discuss some very basic things you can do to make your site more accessible today.

If you’ve got smarts on the subject and see that I’ve misrepresented any facts below, please let me know. The goal is to get good information out there.

Three Quick Tips to Improve your Website Accessibility (and Your SEO)

The tips covered below are basic rules of good content organization; It’s nothing new or revolutionary, but it so happens that making your website accessible for humans makes it more accessible for Google, too.

This is only scratching the surface where accessibility is concerned, but it’s a great place to start thinking about how little habits in content production impact your website’s accessibility.

1. Use Semantic Headings

Headers are HTML tags used to mark up your content to show off a logical hierarchy of information. Remember high school English class when you’d have to submit an outline that looked something like this?

1. Intro
2. My First Major Point
   1. Supporting element 1
   2. Supporting element 2
   3. Supporting element 3
3. My Second Major Point
   1. Supporting element 1
   2. Supporting element 2
   3. Supporting element 3
4. My Third Major Point
   1. Supporting element 1
   2. Supporting element 2
   3. Supporting element 3
5. Conclusion

Your content should follow a similar ordering, reserving the H1 tag for your page title, H2 tags for your “major points”, and on it goes down the list. The purpose of heading tags is not to just randomly add big, bold sentences somewhere in your page (use CSS for that). The point is to create both a visual and logical hierarchy of information.

2. Use Image ALTs

We’re back to HTML 101 talking about the image ALT attribute, but it’s a powerhouse when it comes to making your website accessible and improving SEO.

Every time you drop an image in your site, give the image a meaningful alt attribute, like this:

<img src="dogs.jpg" alt="Sleeping Labrador puppies" />

If God’s blessed you with vision (and that was a real image),  the above HTML IMG tag would render a really cute picture of sleeping puppies. You would see that there’s a yellow one and a black one, spooning it up in a furry blanket and generally looking adorable. You would want to immediately go buy puppies.

But if you’re blind and using a screen reader (or you’re a search engine), all you would see is a reference to dogs.jpg. Could be Chihuahuas chasing a mailman. Might be a Beagle retrieving a dead duck. You don’t know. That’s why you need the image ALT tag.

3. Use Good Anchor Text

What we just talked about with the image alt tag? Ditto goes for anchor text (<a>the part that goes here</a>). Linking up the words CLICK HERE! is very 1998 and adds no meaningful information for folks using a screen reader. Imagine landing on a page and all you saw was a list of links that looked like this:

[read more…]

[read more…]

[read more…]

Would you click through any of those? I wouldn’t. Give your readers clear direction by using descriptive anchor text. As a reward, you’ll get some added SEO juice and possibly a lollypop.

4. (BONUS!) Keep Learning

There’s tons of great info available on web accessibility and WordPress. If you’re interested in learning more, here are some places to start:

• Making Accessible WordPress Themes – WordCamp Montreal 2013 presentation by Joseph Karr O’Connor
• WordPress development tools and accessibility plugins
• Web Content Accessibility Guidelines

You may wonder why I left out discussion of using the link title attribute (or you may be wondering what you’re going to eat for lunch). Either way, here’s an interesting discussion on how title text actually decreased accessibility. Hrm.

5. (BONUS!!) Series on Accessible Websites

You don’t even have to leave my site to learn more about web accessibility (and how you can be better at it). Check out this series:

• An Intro to Accessible WordPress Themes
• Part 1: How to check a website for accessibility
• Part 2: Where accessibility meets the law
• Part 3: How to add Skip Nav to your WordPress Theme
• part 4: The best tools for WordPress accessibility (themes & plugins)
• Part 5: Web Accessibility: Why it’s great for your bottom line

 

Before You Call Me Out

Don’t go rolling my site through an accessibility audit just to let me know how badly it sucks. I know I’ve got work to do around here. It’s a learning process and, as I learn more, I’ll begin to implement it both on my site and on sites I develop for others.

Side note: In WordPress, a big part of accessible design depends on the theme, where semantic markup and clean code is key. The Genesis Framework (yes, that’s an affiliate link) is a great start in this department. Word on the street (or at least in Genesis Office Hours chat rooms) is they’re working internally on making Genesis even better where accessibility is concerned.

* Thanks to accessibleicon.org for updating the iconic symbol for accessibility that I used in the featured image for this post. You can learn more about the the Accessible Icon Project here.