Website Accessibility and WordPress

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.

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)

Do it for Johnny and for SEOThe 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:

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:

 

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.

29 thoughts on “Website Accessibility and WordPress”

  1. Pingback: Round Up: SVG, ARIA, GAAD, WP, Ai Squared | Web Axe

  2. Thank you so much for this article! It’s definately helpful.
    I’m a total newbie to a lot of things and I’m still learning my way around the Genesis Framework. Although I will say I find it easier to learn how to develop using Genesis over any other company I’ve used in past (several).

    I was wondering if you could demonstrate how one would go about implementing the html in one of the Genesis child theme. I know this may sound like a dumb question, but when you’re learning sometimes the best way is to see visuals of examples applied. At least this is the case with me. Thanks for your great tips and tutorials, I appreciate it.

    Cheers!

  3. This is all so good to know.

    I used to work with a blind man who relied on JAWS for computer access. I remember hearing it read links and other content rather awkwardly and the confusion it created for him. This was maybe ten years ago, so I’m sure awareness on the developers’ end has considerably improved.

    As someone who loves drop caps, I’ve been concerned not just about browser compatibility, but also accessibility. P:first-child is handled well by readers and is recognized by most modern browsers, but falters with older ones. Span class is another option, and I used to use that quite a bit, until I learned it’s not accessibility friendly. The spanned letter is read as a standalone letter instead as part of the word it belongs to.

    Not quite knowing how to get p:first-child working properly in certain areas on a website I just made, I resorted to span classes. But this is just a placeholder while I get some help and figure it out.

    Thanks for this nice post, Carrie.

  4. Hi, I just started following your articles. I have a question about navigating through a site using a keyboard only. I know that the WP Accessibility plugin helps to add an outline to elements on keyboard focus. These are links or forms only though. Is it actually possible to go to each element on a website (headings, text and so on), using the keyboard?

    1. Using a screen reader, yes – because a screen reader is designed to navigate the entirety of the content of a site. But that navigation is a special feature of the screen reader. Standard keyboard navigation only navigates “focusable” elements of the page. “Focusable” elements of a page are any part of the page that you can actually interact with.

      There may be a tool that would allow you to navigate all elements using the keyboard without using a screen reader, but I’m not sure what purpose that would serve.

      1. Ok, that makes sense. Thank you for clarifying this!

        On a different note do you by any chance know a good WordPress plugin that allows for items in a drop down menu to be accessible with a keyboard? It seems to me that without a special plugin for this purpose, sub menu items are not accessible.
        Thanks again!

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.