WordPress involvement: 0 to plaid in a month

Disclaimer: This post is a bit humble-braggy. You’ve been warned.

People that know me will know that I’m comfortable in my little shell that allows me to do my thing in the background. Like a Roadie (by Tenacious D).

Since finding and fixing my first WordPress bug (told you, humble-brag), I’ve been mainly lurking in Slack and not getting involved very much (mainly time related, to be fair).

Until, in early February, I noticed that the WordPress accessibility team was calling for testers. This has been a catalyst in getting involved more, especially since testing doesn’t need much more than experience with WordPress. Screen reader experience and experience navigating with the web with just a keyboard are nice to have and will allow you to test more. But really, accessibility is more than just that, being able to understand what’s going on and how to interact with WordPress functionality is also a very big part of it. If you’re at all interested in contributing, sign up to become an accessibility tester and get started today!

But I digress.

My testing contributions quickly put me in a place where I could help more, leading to getting more involved in the accessibility meetings, test results, ticket reporting, and ultimately get added to the Make Accessibility blog to help in posting test and meeting summaries.

None of this would have been possible were it not for the awesome Andrea Fercia and Rian Rietveld, who have both been really helpful.

In the mean time, Adam and I have geared up to start writing plugins in our spare time. We finalised the development and got our very first plugin ready for release this week. I’ve used it on my website, and I can obviously recommend it if you’re interested in having your post series organised. You can download it from the Our Post Series Manager plugin on WordPress Plugin Repository.

Where will this go from here? Who knows. More plugins, surely. Hopefully I will also be able to find more time to help Andrea with developing patches for the bugs we find.

But for now, #humblebrag over. Carry on.

Test for potential accessibility issues

Are you interested in improving your website’s accessibility, but not sure where to start? There’s tools out there that will help you get started!

The tool that we use for this very purpose is “WAVE”. You can use their online verification tool or download their toolbar for Chrome or Firefox.

This tool will not only check for errors like missing alt texts, missing labels for input fields, and empty headers or links. It will also show you structural elements and HTML5/ARIA features you’re using to promote screenreader compatibility.

Lastly, it will also show you whether there are issues with the colour contrast on parts of your page.

There is one thing to note: When using the toolbar, you will want to be on the lookout for errors and warnings caused by other extensions you have installed. Some extensions will inject HTML into the page you’re on, which then gets sent to the WAVE toolbar as part of your page. Unfortunately the toolbar doesn’t have that nifty codeview that will help you locate what part of your code needs fixing, so you will need to double check the web version to double check the results.

Using these tools should allow you to get a good idea of what you’re up against. If you got no errors, then good job! Overwhelmed by the errors and notices? Contact me and get some help!

Accessible content in WordPress

Accessibility is not just for developers. It is probably much more important when you’re a content manager/webmaster/marketing associate. You’re constantly writing content in WordPress long after a developer is done with the website and so it’s important to know how to make use some of the tips described here while you’re doing it.

So how would you go about this?

Get an “accessibility ready” theme, or have one built

All your efforts will go to waste if the theme that is installed on your website doesn’t do anything with the additional data you’re putting in. This goes specifically for what is being put in outside of the main content area or pages that are generated. For example, the featured image, the blog feed, or a predefined page template. Let alone if it doesn’t even have any :focus styles defined.

WordPress has a large repository of themes, but so far only a few have been tested and marked “accessibility ready” themes in the WordPress repository. This doesn’t mean that themes that don’t have this tag won’t be up for the task, but it does mean that there is a chance that it isn’t.

Can’t find anything you particularly like in the WordPress repository? Find a developer that will build one for you. You can email me if you’d like me to work with you to build an accessible theme with a stunning design.

Descriptive links

At the very least, try and make the text you’re turning into a link very clear. Click here is a very poor way to tell people what is going to happen when they actually do activate the link. If it’s impractical to describe your link in the link’s text, then make use of the title field to add that Rick Roll. See also the image below.

You will want to make an effort to make the link text as descriptive as possible. The title attribute isn’t exposed to users by most browsers, and screen reader users are very likely to have it disabled in their screen reader because of blatant abuse. If you really need your link text to be short (“Read More” links, or something else where the context is visually clear) you can use hidden “screen reader text”. This will require some basic HTML chops, however.

Read the official W3C HTML recommendation for the title attribute.

Describe your images

When adding an image to WordPress, it will add a title to the image but not much else. And more often than not, this title is pretty meaningless. If you’re adding images to your post, you will want to make sure to enter the “Alt Text” that describes your image to those that cannot see it.

Is the image not important enough for the context of your page? Consider adding a blank alt attribute, ie, alt="". WordPress will do this for you automatically if you leave the “Alt Text” and “Title” fields empty. It’s important to also remove whatever text is put in the “Title” field, because otherwise this will be used as the alt.

The fields to enter this information are on the right side of the media manager
The fields to enter this information, where applicable, are on the right side of the media library.

Provide text alternatives!

This is something specific for content management, though your developer can most likely assist you in tackling this. When you embed audio or video, you will want to make sure you have a transcription of the content available. For video you will want to ensure to provide captions when it’s important for someone to be able to see what’s going on in the video. For example, a clip from a TV show or a play.

There’s a few ways to provide these transcriptions. If it’s part of a larger post and the clip is short, or if it’s the main content for the post, you can generally provide the transcript in line with the rest of the text. If it’s not, you may want to consider moving the transcript to a separate page and link to it.

Write readable content

I can’t tell you how to do your job. If anything, I could probably use some writing classes myself. I do, however, want to underline the importance of writing readable content. People with dyslexia will thank you for keeping your sentences simple.

Besides that, don’t overload your pages with images, or use an intense variety of styles, colours, and fonts. This will ensure your page looks clean and inviting to read.

Still need help?

Let me know! If there is something in this post you don’t fully understand, I probably did not do a good enough job explaining it. Feel free to leave feedback with this form, or hit me up on Twitter.

Some Accessibility Basics

Update August 21st 2014: I’ve updated the skip-links section to add a fix for an issue in Internet Explorer and Chrome. This fix has been described in this “Fixing Skip to Content Links” article by Nicholas C. Zakas and so is not mine. Credit where credit is due :).

For my job at Highforge I regularly look at WordPress themes and other websites. More often than not I end up disappointed by the amount of themes that simply will not work properly when JavaScript is disabled, or don’t have a visual indicator for the :focus state.

On the subject of JavaScript

The odds of a significant user-base with JavaScript disabled are currently pretty low, with even 97.6% of screenreader users (read more about this study, opens in a new window) reporting it enabled in a recent WebAIM survey (January 2014).

This, however, does not mean that the ideas behind Progressive Enhancement can be thrown out the window. JS can still fail for whatever reason. Maybe the CDN you’re using is having a stroke and you have no local fallback, maybe your visitor is behind a restrictive company or ISP proxy that mangles your lovingly crafted scripts, maybe (s)he is actually one of those people with it disabled (through NoScript or otherwise).

By being prepared for it, you can guarantee all your visitors will be able to access all the information on your website. Regardless of their JavaScript support.

Disclaimer: There are situations in which providing a fallback is ludicrous. If you’re absolutely sure your site or app falls into this category, then by all means, rely on JavaScript.

The wonderful :focus state

In case you’re not familiar with the :focus, it’s a state that gets triggered when selecting a link by keyboard (using the tab key). Much like the :hover state, it can be styled with CSS just as well.

Now imagine hovering over a link with your mouse and nothing happens. The mouse cursor doesn’t change, the link’s text doesn’t change. For all intents and purposes, the link doesn’t actually look like a link or seems like it’s functioning. In fact, let’s say the mouse cursor is completely invisible. This is essentially the equivalent of trying to browse a website without a visible :focus state with a keyboard. Needlessly difficult.

A simple fix is to simply apply the :hover style to :focus as well and go from there. This is what I’ve done on this site as well (Go ahead, try it!). There’s two exceptions: the skip link, and the active menu item. Each of these have their own way of displaying they are, in fact, the link in focus.

title attribute

To put it brief, the title attribute is not meant to repeat whatever the anchor text is. This is something WordPress gets wrong too, because it’s a fairly simple way to do fill this attribute.

Ultimately, your goal is to make your links as descriptive as possible. Contrary to popular belief, the title attribute doesn’t get exposed to a majority of user agents and so you cannot rely on this to convey crucial information. If you really need to make a mostly non-descriptive link, make sure that it visually makes sense and use screen reader accessible text that’s visually hidden to further describe the link.

So what should you put in the title attribute? Here’s what the W3 has to say about this:

The title attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the title attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the title attribute.

alt attribute

The purpose of the alt attribute is to provide a textual alternative for visual content. When you put an image into your page with an img tag, screen readers will see this and read out whatever text is in the alt attribute. The appropriate content for this attribute describes the image in such a way that someone without vision can still imagine the essential details of the image.

If the image is simply for decorative purposes, you really should consider using CSS and background-image instead. This way, the flow of content isn’t interrupted by the irrelevance of a random image.

Skip links

Skip links are links all the way at the top of your markup. They are generally hidden, and will only be registered by screen readers. Their main purpose is to skip the droning of navigation while navigating through the website. Not giving your blind visitors the option to skip the navigation and go straight to the content will most likely make them leave your website, annoyed, because their screen reader just went through your navigation needlessly.

Adding one of these helpful functions is very simple. All you’ll need is an id on the content wrap so that you can link to it and then drop something like the following right after your body tag:

<a href="#content" title="Use this link to skip the header navigation">Skip to content</a>
As it turns out, some browsers (still) don’t handle this kind of link properly. IE9 and, surprisingly, Chrome don’t properly shift focus to the element you’re linking to and so you wouldn’t actually focus the first link in the content when you hit tab. This kind of makes the skip link a bit useless.

Unfortunately, we must use JavaScript to fix this properly. The fix is two-fold: We need to set focus on the element we’re linking to and we need to set a temporary tab-index on elements that normally aren’t focusable (ie. just about everything but links, buttons, and inputs).

We’re using the hashchange event so that our script triggers every time an in-page link is clicked.

window.addEventListener("hashchange", function(event) {

  var element = document.getElementById(location.hash.substring(1));

  if (element) {
    if (!/^(?:a|select|input|button|textarea)$/i.test(element.tagName)) {
      element.tabIndex = -1;
    }

    element.focus();
  }
}, false);

Final thoughts

The best way to find blatant flaws is to simply try it. Try navigating your website with just your keyboard and see where you get stuck. Try using a screen reader like ChromeVox, a screen reader extension for Chrome, close your eyes, and see what that’s like. I can guarantee that it will change the way you think about how you are building websites.

Do you have any other quick tips? Am I wrong on the internets somewhere? Let me know! Fill out my contact form.