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. Hi Carrie, thank you for this article. It was me that raised the question on your Genesis Office Hours the other week and the reason was because I am currently working on a site that needs to be accessible and I was surprised at how inaccessible WordPress & Genesis is. I have found 2 plugins that have helped me:

    http://genesis-accessible.org/ which I used to add skip-links, change widget headings from H4 to H2 and add the post title to ‘Read More’
    http://www.joedolson.com/articles/wp-accessibility/ which I used to add an accessibility toolbar

    Also the Fast Secure Contact Form Plugin is great as it adds form labels.
    Once my site is ready I will be posting some more detail about what I did so I will post you a link.

    1. Angie,
      Thank you for bringing the accessibility issue to light and sharing those links -great info! I look forward to hearing more about your project once it’s complete.

      Have you worked with Gravity Forms? They also use the label tag, if that’s what you’re referring to?

      Cheers,
      Carrie

    2. Hi all,

      Angie, thanks for mentioning my plugin Genesis Accessible.

      To add to the discussion:

      Joe Dolson gave accessibility advice to Copyblogger when they developed Genesis 2.0 and they made some adjustments to the framework. Joe is also in the Make WordPress Accessible team.
      But these changes where not enough to make the framework WCAG 2 accessible.
      I wonder if this ever will happen, because the H4 widget heading is hard to change without breaking the layout of older themes I guess. So therefore I wrote the plugin.

      As for the contact forms:

      Lately Contact Forms 7 has made some huge changes to improve it’s accessibility changes, like adding WAI-ARIA roles and adding accessible error messages. The writer of this plugin is open to all a11y suggestions.
      How to use this plugin for accessible forms is described here: http://blog.rrwd.nl/2014/03/01/how-to-set-up-an-accessible-form-using-contact-form-7-in-wordpress/
      Extra bonus: the backend/admin is also fully accessible.

      Gravity Forms has a label-input relationship, but not for all kind of input fields. The address, that contains several input fields, only has one label. And when adding more than amount field the input/label relationship is also a mess. But for simple accessible forms Gravity Forms is a good plugin.

      I tried Fast Secure Contact Form Plugin, but I don’t like the admin interface very much.
      For me Contact Forms 7 is a good choice.

      Carrie, thanks for digging into Genesis and accessibility. The more attention from Genesis developers the better.

      1. Hi Rian,
        Thanks for joining in the conversation. So glad to know your Genesis Accessible plugin exists! As for moving Genesis forward with accessibility, I know StudioPress (and WordPress) have always gone out of the way to be backward compatible, so I can see how certain structural changes would need to be implemented with great care. That’s where a plugin like yours makes a lot of sense.

        Thanks for chiming in on the contact forms. I’ve learned a lot more about accessibility just reading the conversations in the comments.

        Thank you!

        Carrie

  2. Hi Carrie! I took the plunge and opened an account with Bluehost, and bought a theme and the Genesis framework from Studiopress. Then I set up three (3) WordPress sites just to get my “feet wet”. Here’s the thing: most of the stuff on your blog is more advanced that I can understand. Can you recommend a good place to learn HTML 101? I read you blog and glean some nuggets of wisdom, but have a hard time trying to apply it because I don’t know where to find the code bits you talk about.
    Really, I wanted to let you know that I am moving forward inspired, in no small part, by your recommendation of starting with the Studiopress product line and…I think I got your link to work, not sure if you got affiliate credit or not, hope you did, you deserve it.

    1. Hey Phillip,
      Glad to hear you’re up and running with some WP sites! For learning basic HTML/PHP/CSS as it relates to working with WordPress, I can’t recommend Lynda.com enough. Morten Rand-Hendriksen teaches the WP classes and does a great job. There are also some intro HTML courses that you could dip into.

      I’m also working with Lynda to produce a couple of Genesis-specific courses that will (hopefully) be available late summer. 🙂

      I haven’t used Codeacademy.com, but it looks like a good free resource for learning HTML, among other things.

      Cheers,
      Carrie

  3. I’ve essentially followed most of these tips, mostly out of some unrelated sense of ‘that seems right’, but I was under the same bad assumption about link title attributes. This was also good to learn something about screenreaders. You almost need to consider them to be another browser to accommodate in design/build work. This is also something to pass on to clients to help themselves and to help others.

    Also important: Carrie fixed that Genesis Framework link. Go ahead. Click it. You know you want to.

  4. There is a problem with responsive design (or accessing your website through a smartphone, tablet, etc.) and buyer response (conversion rate). People are just not buying complex type of sales through their smartphone. This will change in the ‘near’ future as the smartphone basically is becoming your phone, computer plus credit/debit card.

    Hey Carrie, any plans on making your Genesis Office Hour available as a podcast version (MattReport) using Soundcloud?

    1. I’ve considered extracting the audio from GOH for a podcast, but frankly haven’t had the time. If anyone wants to volunteer (hint, hint), I’m open to the help!

      1. Open your video with Camtasia, there should be two layers/channels. One for video the other for audio. Then upload it to Soundcloud. I think that is the easiest way to do it. You will quickly need a premium Soundcloud account though. Free account is limited to 120 mins play time.

        1. Done and done. Each podcast/audio file (mp3) is around 45mb though. I’ll temporarily upload everything to Mediafire and send you the download address using your contact form in the next two days.

  5. Hi Carrie,
    Thanks for writing this post and drawing attention to accessibility within WordPress. Every Little bit helps. And thanks for the shoutout to the WordPress Accessibility Team. I am the co-lead of that team, and of course I love Genesis and design and develop with it exclusively with it now and have done so for the past year on my own and all my client sites. I would love to help make the Genesis framework itself more accessible, and am wondering if StudioPress is looking for help with this task, but I don’t know who to contact to ask about this. Do you have any ideas? I hate to take up your combox with this, so if you want you can ping me at the email address that comes packaged with this comment, or on Twitter at megarush1024.. Thanks, and I love your work. Oh, and I haven’t had a chance to catch Genesis Office Hours yet, but it’s on the list.
    Amanda

  6. LOVE, love, love seeing you talk about accessibility. I’m newer to Genesis and WP overall but with two legally blind guys in the house I’m always aware of it. One thing that most good business site owners don’t do anymore (but I still find) are the flashing links, images, or entire sections of a page – even a slideshow set on a fast transition can flicker excessively or a video with high contrast that auto plays, can prompt a seizure response in a photosensitive epileptic. While most business owners don’t want those flashing links, they don’t think about how fast the transition might be on a slideshow or some other site elements, causing the fast flicker.

    These don’t fall under traditional accessibility but I think for true accessibility all site owners should be aware of it!

    1. Jay Vandenberg

      I still sometimes find a website with a counter on it. To show how many people visited the website. Takes me back to the 90s…

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.