Accessible WordPress with Joe O’Connor

WordPress powers over 25 million sites with more than 14 billion pages viewed each month, making it one of the most popular web publishing platforms. Imagine if every one of those sites was accessible.

Joe O’Connor has been a leader in making that happen, through the WordPress accessibility team which works from the inside to make WordPress into a web publishing platform for everyone.

Transcript available.   Download file (mp3).   Duration: 21:09 (13.5MB)

Joe joins Whitney Quesenbery for this episode of A Podcast for Everyone to talk about what it takes to make an open source platform that can help authors make their sites accessible. They talked about:

• How can you make your WordPress accessible?
• What are the best accessible-ready WordPress themes?
• What tools can help you keep your content accessible for everyone?

Joseph Karr O’Connor lives in Santa Monica, California. When Section 508 came into effect in 1999 he began leading Accessible UX teams creating accessible web environments.  Joe has been using WordPress in support of non-profits, research, and university news since 2005. Now leading Cities, a world-wide effort to build free accessible WordPress themes, Joe also contributes to Make WordPress Accessible and asks you to get involved. He’s known on Twitter as AccessibleJoe.

Resources mentioned in this podcast

• WordPress Guidelines: Accessibility
• Accessibility-Ready WordPress Themes
• Making WordPress Accessible
• WP Accessibility plugin by Joe Dolson
• The Cities project 
• Accessibility checking tools

Accessible WordPress themes that Joe recommends:

• Blaskan
• Simone
• WordPress Twenty Fourteen
• WordPress Twenty Thirteen

A Podcast for Everyone is brought to you by UIE, Rosenfeld Media, The Paciello Group, and O’Reilly.

Subscribe on iTunes  –   Follow @awebforeveryone   –   Podcast RSS feed (xml)

Transcript

Whitney Quesenbery: Hi, I’m Whitney Quesenbery, I’m co-author with Sarah Horton of “A Web For Everyone.” Today, I’m talking to Joe O’Connor, known to his friends on Twitter as “accessible Joe.”

Joe’s been using WordPress for almost 10 years. That’s a really long time in Internet years. Hi, Joe. Thanks so much for joining us.

Joe O’Connor: Hi, Whitney. Thanks for having me.

Whitney: I’ve been thinking about WordPress a lot. You probably know this, but maybe everybody in the audience doesn’t, that WordPress is one of the largest web-publishing platforms in the world?

The stats I looked up said that there are over 25 million sites and more than 14 billion pages viewed each month. That’s gigantic.

These sites range from little, tiny personal blogs but also big, corporate sites, like CNN, UPS, CBS, TED. That, it seems to me, is a really large target for accessibility. That’s a really large target for accessibility.

Joe: Yes, some of the other stats that I’ve seen, say that WordPress runs about 20 percent of the Internet. When I found those statistics I was astounded, but indeed it makes it a really large target for accessibility.

Any change that we make in the admin, in the back-end, any seams that come out that are accessible, are used by millions of people, and so it’s an important segment of accessibility work.

Whitney: I’ve noticed that it’s still a little hard to figure out where to start. When we built the user experience magazine site, we knew we wanted it to be accessible, but we finally decided we had to start from an accessible theme, and it was hard to figure it out.

I noticed recently that 2014, the brand new default WordPress theme, is now tagged “accessibility ready.” Can you tell us what that means?

Joe: I’m the Accessibility Team Lead for WordPress, and on the team we have many, many talented people. We set out to make a tag for accessibility, and we thought things through, and concluded that though there are those things a theme developer can do to make sure a theme is accessible.

Unless the content people use accessible methods, it will no longer be an accessible site. I’ve personally had content authors steadfastly refuse to write alternative texts for graphics.

Claiming that their work road was already too much to handle. Did I mention that I spent many years in higher education?

[laughter]

Whitney: Yes, hard to get people to change, isn’t it?

Joe: After some deliberation, we acknowledged this fact with a tag that signals that this theme is accessibility-ready as in, ready to add accessible content.

Whitney: For someone like me, who’s in-between. I’m not really a developer, and I’m not just a content developer. That means that if I use that theme, and I don’t mess it up, and I then put my content in the Web with good accessibility principles, then I’m OK.

Joe: Yes. You still have to check your work, and I have some recommendations for tools to do that, which will appear on the page with this podcast, the links. Accessible themes are still very few. We’re reaching out to more developers than ever before.

It’s been a lot of action this year in WordPress accessibility. A lot of mainstream WordPress venues, like WP Bacon, and some other podcasting operations have done features on us.

And we’re awed by the response from the developer community. Nonetheless, there are still very few accessible themes.

Whitney: You find those themes by going to the WordPress.org site, and going to the themes, and searching for the tag “accessibility-ready”?

Joe: There’s a hitch with that! We recently negotiated our way through getting the “accessibility-ready” tag to stick. Some themes mention the word accessibility in their tags, and a few of them have used the “accessibility-ready” tag.

Until recently, we had no way of coming back to them and saying, “You’ve used accessibility-ready.” Did you mean this? Did you copy the tag from another theme? Do you mean it’s accessible because it’s accessible on the Web?

Whitney: Right, truth in advertising, and making sure that we really mean accessibility in the sense we’re using it.

Joe: We’re now able to come back to theme developers and say, “OK. You’ve used the accessibility-ready tag. We’re going to assess your theme for accessibility.

If it fails we will come back to you and tell you what failed, help you make some changes, If you fail to make those changes with 10 days, the tag will be removed.

Whitney: You’ve got some teeth in it, but you’re also helping people out?

Joe: Yes, we’re extending, scaffolding all the way to everyone. We tell everyone we talk to that we’re ready to help, we’re able to help, and we’d love to help.

Yet, there are still very few accessible themes. The accessible themes that I use or recommend, one of my blogs uses Blaskan, B-L-A-S-K-A-N. That’s by Per Sandstrom.

The link will be on the page with the podcast. There’s a new theme, Simone, by Morton Rand-Hendrickson. He works at lynda.com. He does the WordPress videos there, many of them, and he’s a really great guy. He’s stepped up with a team recently called Simone.

One of the themes that ships with WordPress, when you download WordPress and install it in a site, you’re going to get Twenty Fourteen. Twenty Fourteen is accessibility ready, and it has that tag because the accessibility team worked on Twenty Fourteen to help make it accessible.

It has skip links. It has a number of different things that make a theme accessible. If you’re building a theme, I suggest starting with underscores. That’s not spelled underscores, its _s. But we call it underscores, which has recently been accessibility enhanced by Morton Rand-Hendrickson.

“_s” is a blank theme that developers can use to quickly prototype and build themes. It has some accessibility enhancements now, which will go a long way to helping them.

Whitney: That’s great. Are there other tools that someone developing a site could use? Are there good plugins and things?

Joe: Well, there’s a plugin by Joe Dolson, who is a mainstay of the WordPress Accessibility Team. Joe has a plugin called WP Accessibility. It’s for everyone. It’s not so much to help developers. I’ll take that back. If developers would take a look at WP Accessibility, and look at what it does.

It will help you install skip links, for instance. All you have to do is click it, and it’ll go there. It’ll happen, and your site can have visible or invisible click links. A skip link becomes usable when the user tabs into the site.

There’s a menu, and it says “Skip to Content” and you can skip to content. The plugin uses a JavaScript to move both visual and keyboard focus at the same time.

Whitney: This is pretty interesting because it sounds to me like the accessibility team at WordPress has really built, let’s use the word “scaffolding,” and I really like that because you’ve got guidelines, you’ve got a tag so you have a way to check sites and help developers get there.

You’ve got some plugins to help them, but the thing that seems to be really revolutionary is that you’re working on the WordPress Team. You’re not just coming in afterwards and saying, “This works. This doesn’t work,”

But you’re building the tools to help people build accessible tools. That seems like a real shift in the emphasis from being outsiders asking for things to be made accessible to being insiders helping build the plumbing that makes it possible to have accessible sites.

Joe: The beauty of WordPress as with other open source projects is, indeed, that it’s open source, and everyone’s invited to work on it. Anyone can work on it, and are encouraged to work on it.

Some of the older members of the team have been working on it for years. We focus on core, that’s called trunk. We’re working on live code to remediate accessibility situations that come up when people who don’t use accessible routines, contribute to core.

Whitney: You’re working on the team that’s building the core code that underlies WordPress, is that what I’m hearing?

Joe: Yes.

Whitney: Very exciting. You had an example of how the team has worked to make sure that what goes out in WordPress is accessible.

Joe: For instance, right now, we’re working on focus indication in the left navigation bar. The left navigation bar has some focus indication right now. Dark grey turns to black when you select one of the main menu items.

Then, as you move over into the submenus, the titles of the submenus change from a light grey to a dark blue. For those of us in accessibility, we understand that you can’t have color as the only means of signaling something.

We’ve added a visual indicator by drawing a white or a black box around the selected item. There are eight different color schemes to admin, and so some of them do better with white, some of them do better with black.

The idea is to make a contrasting color box appear around the selected item so that now there are two visual focus indicators.

Whitney: Like choosing that you want to edit pages or you want to edit posts.

Joe: Right, so when you go to the post’s main heading, you’ll see that the focus indicator is dark grey turning to black, plus there’s a white box around it.

Whitney: You’re not talking about making the sites that are built with WordPress accessible. You’re talking about making WordPress itself accessible. So that someone who’s using assistive technology or who has low vision can use WordPress to write their own blogs and to develop their own blogs.

Joe: Right, accessibility is required on both ends.

Whitney: That’s pretty revolutionary. [laughs] I say that with complimentary aim. We do often focus on the end users and making sure that we can build something accessible.

But I know more and more people who are developers who are also assistive technology users, and it’s great to hear that WordPress is accessible to them as developers.

Joe: I’ve been doing accessible UX since 1999, and in 1999, we thought, “Wow, all the websites are going to be accessible,” so maybe not revolutionary, but evolutionary. We’re developing tickets. We’re helping people write solutions for the tickets.

Some of us can write code. Others can’t write code. Some of us are better at documentation. We’re doing everything we can to help the WordPress developers with the back end, with core.

Then we’re doing outreach at Word Camps and at meet-ups to theme developers, to help them understand that we have resources for them to use to make their themes accessible.

Whitney: Now let’s move forward to an actual blogger, someone who’s maybe developed their own site theme, maybe they had someone else develop it.

Now they’ve got their site set up and they’re adding new content all the time, new blog posts. What are the most important things that they should do to make sure that the content they add to their site is accessible?

Joe: At this year’s Access U in Austin, Texas, presented by Knowbility, I did a class about adding accessible content to WordPress sites. You can download the Word Doc on my site at AccessibleJoe.com/tools. The link will be on the list of resources on the podcast page.

In it, I do mention some of the ins and outs of WordPress itself, so how to use some of the dialog boxes and where you put the alt text for images and all that.

There are some things that anyone can pay attention to in any web page, such as adding alternative text descriptions to media, using headings and lists, use simple language, if you can. Certainly if it’s aimed at physicists, you’ll have to use your judgment.

Whitney: If you’re talking to physicists, talk in physics, but if you’re talking to everyone, the mythical everyone, speak a language they know.

Joe: Ensure that the link text makes sense out of context. Screen readers can separate out lists of things. They can separate out a list of links.

If you used the default in WordPress, which is read more, or read more of this story, what they’ll hear is a list of links that say read more, read more, read more, read more.

Which one would you choose? I don’t know. Make sure that the link text makes sense. The plugin WP Accessibility will change that for you and append the story name to read more and the story name. Your links can be expanded to make sense.

Use some extra text there. Don’t rely on visual or audio cues. Don’t say, “Below, I’ve posted this,” or, “In the green box, you’ll see this.” Use of contrasting colors is good. Make sure that your color contrast is sufficient to meet the thresholds.

Pay attention to complex tables. If you have to make a table, make it accessible. There are all sorts of resources on the web for making accessible tables. Also, pay attention to creating accessible documents.

Whitney: If you post a PDF file that people can download, make sure that’s accessible?

Joe: Yes.

Whitney: These all sound like really basic content tips, applied to WordPress, nothing particularly special here. In fact, I do authoring in WordPress, and I’m not a coder, and I’ve found it pretty easy to do everything except tables.

I have to say, the table editor doesn’t help me all that much, even with tables, at all. Certainly the alternative text is right there in the media files and headings and lists, all the themes that I’ve ever worked with come with heading and list code built into it.

And link text and language, of course, is your own writing. For me, the only thing that I still find hard to do is tables.

Joe: I’ve been around for a while, and the only thing we had was a text editor in the beginning.

Whitney: That’s right…. We do have to go into that text editor and edit and put the table heading codes in.

Joe: I code my own tables. I don’t rely on the wysiwyg editor Tiny MCE. Tiny MCE, by the way, has been upgraded and updated for accessibility greatly in the last iteration. In 3.9, there are more accessibility routines built into Tiny MCE.

Whitney: That’s the basic post-editor?

Joe: Yes, that’s the wysiwyg editor.

Whitney: If I could paraphrase what we’ve been talking about, it’s start with an accessible theme to build an accessible theme. Follow the basic rules for accessible content.

Make sure that anything you add, whether that’s a form, or a media, or a document, that you’re uploading is accessible. It doesn’t really sound that hard. Got any final words of advice?

Joe: It’s a matter of civil rights, and you’ll hear this from every accessibility person on earth. With the blind experiencing 70 percent unemployment, partly because of lack of access to information, with disabled people all over experiencing high levels of unemployment.

We owe it to our fellow human beings to make things accessible. Really, it is easy once you get the routines down. It’s like any other workflow item. Adding all texts does not take that much. I’ve been told otherwise, [laughs] simple routines can help a lot.

Whitney: Good advice. Thank you so much for joining us today, Joe. We’ve been talking to Joe O’Connor, known on Twitter as AccessibleJoe.

If you’re interested in learning more about how to make your WordPress site accessible, we’ll have a list of resources available up on the podcast page along with the transcript.

Thank you so much! Thanks to all of you for listening in, and a special thanks to our sponsors, UIE, Rosenfeld Media, The Paciello Group, and O’Reilly for making this series happen. Be sure to follow us at A Web for Everyone on Twitter for information about future podcasts.