Carrie Dils

WordPress Developer, Consultant, and Instructor

Web Accessibility

Below are a series of articles related to web accessibility, with a particular focus on WordPress sites. Learn best practices for writing content, developing themes, working with plugins, and more.

Where Accessibility Meets the Law

Noel has three kids in Seattle Public Schools. She wants to take part in her kids’ education like any parent would.

But she’s blind.

As it turns out, the school district’s website is incompatible with JAWS, one of the most popular screen readers. Ironically, the site worked fine with JAWS up until 2012 when “enhancements” were made to the site that tanked compatibility.

Noel’s not looking for special treatment – she just wants to help her kids submit a math assignment through the district website the same as another (sighted) parent could.

So here’s where an interesting question comes to light: Does the 1990 Americans with Disabilities Act extend to the internet? Is this the digital version of wheelchair access to a building?

Well, Noel and the National Federation of the Blind thought so, and brought a lawsuit against the Seattle Public School District (after repeated out of court requests for compliance).

What Does This Mean for You and Me?

In this series on web accessibility, we’ve talked a little about what accessibility is and how you can check your website for accessibility.

Today we’re crossing the bridge from where accessible websites are nice to have to the land where accessible websites are a legal requirement.

This isn’t about fear.

I think we live in a ridiculously litigious society. There’s an ad for a law firm I hear often on my local public radio station – the tagline is:

For when the results truly matter…

Every time I hear that I think why on earth would I engage in a lawsuit unless the results truly mattered?!

My rant is a bit of a digression, but it’s important for me to say that writing this article is not about bringing fear of a lawsuit to every website owner out there.

This is about education.

That said, web accessibility isn’t something we can shove under the rug. There’s a point coming in the not-too-distant future where law will dictate better compliance.

Web accessibility isn't something we can shove under the rug. Click To Tweet

In some cases, the law already does. Here’s a few American* examples:

* Some countries already have strict accessibility requirements in place. If you’re hired to make a website for someone in another country or you’re making a website for yourself, educate yourself on the laws of the country.

** Section 508 is not part of the ADA and applies to US Federal agencies.

Getting Back to WordPress

Most of the folks who read this blog are either creating and maintaining their own websites or work professionally creating sites for others.

I want to put web accessibility on your radar so that you are aware of it and can begin the process of shifting your web design and development habits.

If you already have a site built, check out these things you can do to make your website more accessible.

Of course, it’s easier to start with an “accessibility mindset” at the start of a web project versus retrofitting an existing site. If you’re starting from scratch, make your life easier and start the project with an accessible theme. Here’s a great free accessible WordPress theme, or if you’re working with the Genesis Framework, here’s an accessible Genesis theme.

To keep learning check out this article on Web Accessibility and WordPress. You might also enjoy this episode of my podcast where I chat with three WordPress accessibility pros.

* Featured image for this post derived from this photo, uploaded by user russavia.

How to Check a Website for Accessibility

In the introductory post to this Web Accessibility series we talked about what accessibility is and why it matters.

Armed with some basic information, I’d like to dive into what actually makes a website accessible and what some tools are that you can use to check the accessibility of your website. At the end of this post there’s a handy checklist you can use to check your site.

You ready to do this? Let’s go!

First, a bit of history.

Inigo Montoya quote from the Princess Bride - "Let me expalin. No, too much. Let me sum up."I know, I know. This section may be a snoozer, but I’ll sum up.

Accessibility isn’t just a willy nilly thing – there’s actually an official standard: Web Content Accessibility Guidelines (WCAG). The original version of WCAG (1.0) was established in 1999. Presently the 3.0 guidelines are under development, but for now the generally accepted legal standard is WCAG 2.0.

In addition to WGAC 2.0, WordPress has its own set of criteria used to deem a theme “accessibility ready” (those are the requirements that must be met to have your theme in the .org repository with the tag accessibility-ready).

Both sets of requirements are pretty similar, so, for our purposes, I’ll lump them together when discussing what falls under the umbrella of accessibility.

What Makes a Website Accessible?

Web accessibility is a big pot of soup, with layers of flavor and texture. There are some base ingredients that need to be present to be Web Accessibility Soup, but other ingredients are a little open to the interpretation of the chef and can be added incrementally.

I’m eating lunch as I write this – can you tell?

First, we’ll talk theory, then we’ll talk actual implementation.

The 4 Principles of Accessibility

  1. Perceivable – Make web content available for the senses: sight, sound, or touch (until Smell-o-vision and digital bonbons are widely available, we’ll have to stick to these three senses). The most practical way to achieve this is to provide text alternatives for any non-text content.
  2. Operable – Make interface elements operable (forms, control, navigation). The biggies here are making keyboard navigation available and giving users time to read or click through content (i.e. imagine a slider that rotates images faster than a user can process or click).
  3. Understandable – Make sure content and user interface are understandable. Now this is User Interface 101, accessibility or not. If somebody’s having to guess about where to click, then the design is a failure. Stick to layouts and interfaces that are predictable – if you get too clever with a design, people won’t intuit how to use it. Designers, don’t hate on this one. Accessible does not have to equal boring or ugly.
  4. Robust – Content can be used reliably by a variety of user agents, including assistive technologies The bottom line here? Always strive to conform with current web coding standards.

These principles may seem a little daunting — maybe you’re thinking I don’t like the way Web Accessibility Soup smells! But hang with me, and let’s look at some practical ways to address these principles.

Quick Accessibility Checklist

Here are some quick habits you can start with immediately that will move your website toward better accessibility. This list is far from comprehensive, but think of it as a practical starting point. I’ll address the principles above along with the action points you can take.

Here are 10 things you can do to make your website more accessible. Click To Tweet

Make Content Perceivable

  1. Remove titles from your links (this adds clutter for screen readers since the title is typically the same as the anchored text)
  2. Add meaningful “alt” text to images ( “img1249438743” – not meaningful; “smiling kid holding a red balloon” – meaningful)
  3. Make sure all your form elements are labeled (tip: you can hide this with CSS – just needs to be visible in the HTML output)
  4. Use good color contrast for text foreground/background (here’s a color contrast checker – shoot for Level AA)

Make the Interface Operable

  1. Make page navigation/links possible using only the keyboard (try starting with your cursor in the URL bar and then tabbing your way through – see if your tabs flow in order if you jump around the page)
  2. Prevent seizures! No page content flashes more than 3 times per second (really everyone should do this without even trying, unless you’re designing websites circa 1999)
  3. Make the purpose of each link obvious from the link text alone

Make it Understandable

  1. Clearly identify form errors (via text) and offer an easy way for users to fix and resubmit (if you’re using something like Ninja Forms or Gravity Forms, you’ll most likely be okay by default on this one)
  2. If you’ve got the same navigation links across multiple pages, don’t go switching up the order (that’s disorienting to anyone)

Make it Robust!

  1. Make sure your code doesn’t throw any significant validation errors (use the W3C validator)

How Can You Check the Accessibility of Your Site?

If you want a full overview of the current status of a live site, run it through the Web Accessibility Evaluation tool. It’ll highlight the good things you’re doing along with the bad to give you a better idea of where you can focus your accessibility efforts.

Accessibility doesn't have to be all or nothing. Start with small steps in the right direction. Click To Tweet

Okay, so the above are some quick-hit things you can do to improve your site’s accessibility (or begin the process of making Web Accessibility Soup, if you will). There’s something important I want to note here: Even though getting a site to fully meet WCAG 2.0 or WordPress “accessibility-ready” standards takes a lot of work, accessibility doesn’t have to be all or nothing. In other words, taking steps toward better accessibility (even if your site’s not fully accessible) is better than not making any effort at all!

Thanks for joining me and please enjoy the next post in this series: Accessibility & the Law.

An Intro to Accessible WordPress Themes

I’ve talked a lot about web accessibility lately, especially as it relates to WordPress Themes. The feedback I got from this podcast told me that web developers want to embrace better accessibility, but aren’t sure how.

Enter this 5-part series specifically dealing with accessibility-ready WordPress themes and small, tangible steps developers can take to make their websites a little friendlier for the masses.

Over this series we’ll discuss:

A Starting Point

If the idea of web accessibility (or even the term) is new to you, then you’re in the right place. For starters, let’s define the general idea of accessibility:

Web accessibility refers to the inclusive practice of removing barriers that prevent access to websites by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality. – Wikipedia entry for “Web Accessibility”

Why does accessibility matter (and why should you care)?

If you’re reading this site, chances are high you’re a WordPress user. Here’s a fun fact about the WordPress Foundation, the charitable organization behind WordPress. Their mission is: to democratize publishing through Open Source, GPL software. The mission of WordPress is to equalizing publishing for everyone.

(On a tangent, but still related, spend 5 minutes checking out Paul Clark’s lightening talk on How WordPress Saves Lives and Moves Governments)

If the purpose of WordPress is to make it possible for anyone to publish content, doesn’t it stand to reason that anyone should be able to consume that content? I won’t go into a long monologue about why making content accessible is just a good thing to do, but let’s just say it is.

And, if you’re not moved from the goodness of your heart (seriously, I rarely am), then consider this: Accessibility nets FANTASTIC results for business websites (that’s the topic of the last post in this series).

So, for now, just know that accessibility is a good thing with positive results for everyone.

Accessibility is a good thing, with positive results for everyone. #a11y Click To Tweet

How many accessible WordPress themes are there?

To be deemed “accessibility-ready” by WordPress (for some reason, I’m envisioning Patrick Stewart being Knighted), a certain set of standards must be met. You can view them here.

As of this writing, there are 3,007 themes in the WordPress theme repository. Thirty of them meet accessibility-ready requirements… less than 1%. Believe it or not, that’s a 100% increase in the number of accessibility-ready WordPress themes in the past 6 months.

As we say in the South, pickin’s are slim.

Even so, it’s encouraging to see such positive growth in a short period – that means developers like you are taking note and changing some habits.

How many accessible Genesis themes are there?

If you want to talk slim pickins, they get even slimmer when you niche down into accessible themes for the Genesis Framework. To my knowledge, there are two: Leiden (free theme based off of Genesis Sample theme) and Utility Pro (paid theme made by yours truly).

Note: If there are themes out there I’ve missed, please leave a comment as I’d love to include them here.

The bottom line? There’s a huge gap in the market for accessibility-ready themes, WordPress in general or Genesis specifically. If you’re a theme developer, there’s an opportunity for you in this arena. Please come over and play, I welcome competition (alternatives) in this space.

Stay With Me

I’d love for you to continue this series with me and learn more. I’ve found accessibility is not so much about willingness as it is about education.

Making the web accessible is not so much about willingness as it is about education. Click To Tweet

Check out the next post in this series: How to check a website for accessibility.

Setting a New Standard: Utility Pro

Utility Pro shown on different devicesUpdate: This theme is no longer available for sale. I’m leaving this announcement post here for posterity. 🙂

I’m thrilled (and slightly nervous) to announce that Utility Pro, a new theme for the Genesis Framework, is officially available for purchase.

Utility Pro is a follow-up to the Utility theme, originally released in late 2013. Even though it bears the name of its predecessor and shares the same basic layout components, Utility Pro is shiny and new in every other way.

Quick Facts:

  • Utility Pro is the first premium Genesis child theme that is both translation-ready and fully accessible
  • The theme ships with 10 language translation files (details below)
  • The theme performs beautifully with RTL languages
  • The theme is mobile-first, which means the extra CSS for big monitors isn’t loaded on tiny screens.
  • Theme support licenses are available at 3 price points
  • The “Developer Edition” of the theme comes with a DesktopServer blueprint so you can hit the ground running with Utility Pro (note: the blueprint doesn’t include the Genesis Framework). This edition also comes with the Grunt configuration files used in development, so that developers can take the theme and use it as a starting point for projects.

¡Translations Galore!

Now, you already knew the Genesis community was awesome, but did you know there were so many languages, countries, and cultures that work with Genesis themes?

The following folks helped translate the theme by creating localization files for the locales indicated with their name:

  • Santiago Barrionuevo (es_ES, es_AR)
  • Beth van Koetsveld (es_VE)
  • Rian Reitveld (nl_NL)
  • Vajrasar Goswami (hi_IN)
  • Rosie Rodrigues (pt_BR)
  • Luis Martins (pt_PT)
  • Nir Rosenbaum (he_IL)
  • Morten Rand-Hendriksen (nb_NO)
  • GrĂ©goire Noyelle (fr_FR)

If you’re interested in providing a translation not listed here, please contact me.

Three Cheers for Accessibility!

One of the early goals for this theme makeover was to follow accessibility standards, based on the concept that web content should be accessible to as many people and as many devices as possible.

I took Rian Rietveld‘s Leiden theme and Genesis Accessible plugin and borrowed from them where it made sense for Utility Pro. Rian was also kind enough to audit my theme early on and give feedback to make it even better. (If Rian lets me, I might contribute back some of my code back for her plugin)

To date, there are 28 accessibility-ready themes available at wordpress.org. There aren’t many more at the premium/paid level either. In short, developers and business owners don’t have many options when it comes to accessible themes. I’m excited to add one more option in the market with Utility Pro.

Many Helpers

For many months I’ve worked on this theme and brought it to about 90% completion. Then, I put it in the hands of Gary Jones, code auditor extraordinaire (seriously, hire him if you ever need a code audit). His insights and suggestions (and a few code re-writes) made this theme even better.

Not many things I’d put my name to that are other people’s, but this, I would.
– Gary Jones

In addition to Rian’s audit, Amanda Rush put Utility Pro through the paces with multiple screen readers, identified areas for improvement (I’m telling you – that responsive menu was a bugger!), and even chipped in a couple of code commits.

And then there’s Nir Rosenbaum, who I met through my podcast. Nir is an Israel-based Genesis developer who introduced me to the difficulties of working with themes that don’t account for RTL languages (and in a country that legally requires accessible sites for businesses!). Nir provided a Hebrew translation for the theme and tested it to ensure all elements looked good when flipped for RTL.

The contributions didn’t stop there. A major thanks to Ginger Coolidge and Robin Cornett for their efforts on user testing.

Add in the theme translators, and you’ve got a whole pile of people who helped push this theme out. A huge thank you to each person mentioned in this post.

More to Come

Utility Pro comes loaded with features. In the coming weeks I’ll talk more about the ways you can use Utility Pro. If you want to stay tuned via email, be sure to sign up for email updates before you go.

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.