Is WordPress accessible? In several ways, it’s up to you.

Accessibility is baked in, according to the WordPress coding standards, since 2015:

These are standards that WordPress features should meet for accessibility in order to be merged into core. All new or updated code released in WordPress must conform with the WCAG 2.0 guidelines at level AA.

So that’s a good head start. But the themes and plugins you select for your site are created by members of the WordPress community, not core contributors, and their work may not meet WCAG 2.0 AA. The good news is we have some themes installed that pass the tests for WCAG 2.0 AA, as well as plugins that can bring other themes over the finish line.

Themes

The WordPress themes page has a “feature filter” you can use to find themes that work for you. One of the features you can look for is “accessibility ready.”

The WordPress themes feature filter.

If you see a theme here that you think would be helpful, just let us know. Usually we can install it right away. Here are some that show up in the search that we already have installed for you.

Period

The Period theme.

By Compete Themes.

“This theme passes WCAG 2.0 AA standards out-of-box. On wordpress.org, Period is given the ‘accessibility-ready’ tag. This is basically a reminder to users that while all design elements in Period pass accessibility standards, it’s up to the user to make sure their content is accessible too in order for their site to maintain its accessibility.”

We’ll talk more about accessible content below.

Twenty Something

An example of the Twenty Fourteen theme, as used for the Honors Program.

WordPress’ own series of “Twenty xxxx” themes are WCAG compliant and have been for many years now; they are also regularly updated to be compatible and stable with newer versions of WordPress. Twenty Thirteen, Twenty Fourteen, Twenty Fifteen, Twenty Sixteen and Twenty Seventeen all installed and available for you to use. In November, Twenty Nineteen will debut (there was no Twenty Eighteen). Somewhere around 250 blogs.shu.edu sites use one of these themes.

Twenty Sixteen is (as of press time) our default choice for new blogs.

Chosen

“Chosen,” as used in the Seton Hall Magazine site.

Another theme by Compete Themes, Chosen is flagged as accessible in the WordPress.org theme directory.

Improving Your Site With Plugins

We also have some plugins installed which, once activated, will help improve your site by giving you guidance on making your content more accessible.

WP Accessibility

This plugin adds accessibility-related toolbar items, but also controls a lot of the behind-the-scenes elements that help make a site accessible.

WP Accessibility Helper

Gives you — and your readers — a set of tools and settings to improve accessibility. Font sizes, color contrast and more can be configured as needed.

Accessible Poetry

This adds a floating bar allowing your readers to modify font sizes and colors, and gives you as the author a screen to help you add the necessary “alt” tags to your media.

Divi Accessibility

Created by Campus Press, this plugin addresses some of the issues specific to the Divi theme (the theme used here on blogs.shu.edu). I imagine it works with Elegant Themes’ Extra as well.

wa11y

This toolkit brings in resources from WPCampus, Khan Academy and others to help you evaluate your site, and visualize it under different conditions.

Thinking About Accessibility

Accessible content is content that follows a broad and detailed set of rules. There’s a good digest of them here. Many of them are common sense — if you put yourself in the shoes of someone who is visually impaired. Good contrast. Large enough fonts. Clear differentiation between text and links (links should be underlined.) But there’s a lot more that you wouldn’t think of. For example, is the page ordered in such a way that a screen reader would be able to parse it? Descriptions and “alt” tags for images all need to be done in an accessible way.

But no system is going to do that for you. When you add an image, there are spaces for you to add alt tags, descriptions and titles. Do it. You should also go back through older items in your media folder and bring them up to standard as well. Activating one of the accessibility plugins mentioned above will give you cues.

And while it’s possible to tweak your styles, in whatever theme, be careful. You could ruin the accessibility of your pages if you choose the wrong colors or get rid of underlining. Don’t do it.

Also consider the structure of your page. Headers are available as <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. They’re there for a reason, and it’s not to call attention to things or make something bigger. Take this page, for example. <h1> is something to use just once on a page — here, it’s the title “Accessible WordPress.” After that, a hierarchy of sections and subsections, in order. “Themes,” “Improving Your Site With Plugins,” “Thinking About Accessibility” and “Future Developments” are <h2> — the first sub-level. Beneath those are the second level of organization, the headers for each theme and plugin discussed, as <h3>.

Don’t rely on <b> or <strong> tags to make section headers, because someone using a screen reader won’t be able to find them. And if you use colors, remember that many people (8% of men!) have some form of color-blindness and might not be able to tell the difference.

Also lists. While it’s easy to copy-and-paste a bullet-pointed list into your page, use the semantic <ul> (bulleted) and <ol> (numbered) list styles, with each item below set off by an <li>…</li> tag. Otherwise a visually impaired person using a screen reader may not even be aware that you’re using a list at all! All of these codes are available in your edit bar. It takes a few extra clicks, but it’s the right thing to do.

Added Benefit

Doing these tasks is an important part of SEO. Search engine algorithms take all of this into account. Which means your site will score higher in Google search results!

Future Developments

WordPress 5.0, scheduled for mid-November, 2018, release, is expected to have the new “Gutenberg” editor installed by default. While the result for your audience should be fine, the WordPress accessibility community still has a lot of serious issues with Gutenberg because of its poor user experience on the back end. With that in mind, there’s a “classic editor” plugin in released (and  which we’ve installed) which will bring you back to your current experience. Just activate it from the Plugins tab your dashboard and you should be in good shape.

There’s a lot more to consider, but using some of the resources developed by experts can help.