Category: Getting started

In the WordPress.org volunteers community, we use the term accessibility-ready to identify themes that follow a set of minimum requirements.

Users can select the Accessibility Ready feature in the filter when searching for themes on WordPress.org and on WordPress.com.

Developers can add this term as a tag to their themes in style.css

The WordPress Accessibility Team has written the requirements based on WCAG2 and all themes on WordPress.org and WordPress.com with the accessibility-ready tag are carefully reviewed and tested.

The requirements covers the following:

• Keyboard Navigation
  •  All controls and links must be reachable using the keyboard.
• Controls
  • All theme features that behave as buttons or links must use <button>, <input>, or <a> elements, to ensure native keyboard accessibility and interaction with screen reader accessibility APIs.
  • All controls must also have machine-readable text to indicate the nature of the control.
• Forms
  • Forms must have appropriate field labels and all content within form tags need to be explicitly associated to a form control.
• Headings
  • Theme templates should use a reasonable HTML heading structure — including the use of heading elements for page sub-sections.
  • Heading markup must not be used for presentational purposes.
  • Headings do not skip levels when descending. H1 cannot be followed by H3, etc.
• ARIA Landmark Roles
  • Assign landmark roles to the main content areas of your site. All content on your site must be wrapped in at least one landmark role.

Links and contrast

• Content Links
  • Links within content must be underlined.
• Repetitive Link Text
  • Links must avoid repetitive non-contextual text strings such as ‘read more…’ and should make sense if taken out of context.
• Contrasts
  • Theme authors must ensure that all background/foreground color contrasts for plain content text are within the level AA contrast ratio (4.5:1) specified in the Web Content Accessibility Guidelines (WCAG) 2.0 for color luminosity.

Media

• Images
  • Decorative images must be included using CSS.
  • Where theme authors add images to template markup or provide a method for end users to add images, theme authors MUST incorporate an appropriate alt attribute or the means for an end user to provide one.
• Media
  • Media resources must NOT auto start or change without user action as a default configuration. This includes resources such as audio, video, or image/content sliders and carousels.

Additional recommendations

Screen reader texts are recommended, and if added, they need to be added with a valid technique.

Additionally, there is a short list of things that are not allowed, including positive tabindex attributes and opening links in new windows without warning the user.

You can read the full requirements here.

-The accessibility-ready requirements are based on WCAG2, but it is important to be aware of the disclaimer that a theme alone cannot guarantee that your website will be compatible with WCAG2 or other guidelines. Your theme is only one part of your website. Your content must also be accessible.

Requirements for all new themes on WordPress.org

Since fall 2019, all new themes that are added to the official theme directory are required to support a skip link and keyboard navigation.

Existing themes that are updated must also follow these requirements.

Unfortunately, the volunteers do not have enough resources to request older themes to update This responsibility lies with the theme author.

I have previously written about why you should use an accessible theme. But how do you find an accessible WordPress theme?

When searching for a free WordPress theme I always recommend WordPress.org. This is because all the themes in the official theme directory are carefully reviewed for security issues and code errors.

All themes from WordPress.org that are labeled as accessibility-ready are also checked for a number of accessibility issues.

If you are using WordPress.com, they also have a small numer of themes that are accessible.

It is worth nothing that the official themes: Twenty Nineteen, Twenty Seventeen and Twenty Sixteen are accessibility ready. You can’t go wrong with choosing one of the default themes.

A possible downside to these free themes is that the support is sometimes limited. If you want to make sure that the theme provider is offering support and is available to answer your questions, considering buying a theme with a support package instead.

Accessible themes on WordPress.org

You can search for a new theme directly from the Add Themes screen in the admin area of your WordPress installation.

The search functionality is the same in the WordPress admin area and in the WordPress.org theme directory on https://wordpress.org/themes/.

In your admin area, go to Appearance > Themes, and select the Add New button:

On this page, select the Feature Filter button to show the lists of filterable features. The features are listed in 3 categories: Subject, Features, and Layout.

The Accessibility Ready feature is the first option in the second column, under Features:

To show all the accessible themes, check the box next to Accessibility Ready and then select the Apply Filters button.

Caveats and limitations of the WordPress.org theme search

You can combine filters to search for themes that better matches your criteria. But the more filters you add the fewer results will be generated.

For example, if you combine Entertainment with Accessibility Ready and Three Columns, only two themes will show up in the search result. My recommendation is to only use the Accessibility Ready filter.

The search only finds themes that have been updated within the last two years. This is a feature that is built into the search to prevent that themes that are older than two years are installed and breaks your site.

This is a good thing, but for the accessible themes unfortunately it means that fewer themes will be listed.

If you are a theme developer, please keep your theme updated. Even if you don’t need to make any changes to the theme, please keep it updated to assure that it shows up in the search results.

Finding accessible themes on WordPress.com

If you have a WordPress.com business plan, you can upload and install any theme that you want. I will be focusing on free themes that can be installed with or without a business plan.

Log in to your account, select your site and go to Personalize > Customize, and select the Themes button:

Select the Feature button to the left:

In my example, the form remembers my previous searches and the Accessibility Ready filter shows up as the first alternative.

If you can not find Accessibility Ready in the 5 selected filters, select Show all.

Optionally, write accessibility in the search form, after the word feature.

There are 33 accessible themes on WordPress.com but only ten of them are free. Besides the official themes, these free themes are:

• Intergalactic 2
• Libre 2
• Textbook
• Franklin
• Resonar

Finding accessible themes on ThemeForest

On the ThemeForest marketplace, they don’t use the feature filter in the same way. Unfortunately, after entering the site and selecting WordPress, you will not find accessibility in the list of categories or tags.

I wish that such a large marketplace would make accessibility one of their priorities, but it is not the case.

In fact, when a theme is submitted to be sold on ThemeForest, the staff does not confirm if the theme is accessible. Even if the theme author claims that it is. So in contrast to WordPress.org and WordPress.com, the accessibility is not tested.

It is completely up to the buyer to check if the theme is accessible or not.

To find an accessible theme on ThemeForest you can search for different terms such as accessibility (218 search results) and accessible (214 search results).

When searching for more specific terms like screen reader, or accessibility ready, the results become more inaccurate. The search uses individual words and not your entire phrase.

Conclusion

In this post I have written about how you can find an accessible theme on three marketplaces, free or payed. WordPress.org has a larger number of accessibility ready themes than WordPress.com. ThemeForest has the largest number of themes, but the ThemeForest staff does not test if the themes are accessible.

Therefor my recommendation is to search for a theme on WordPress.org.

So, if you already have a theme and you don’t want to change it, how do you check if it is accessible?

There are tools that can help with testing accessibility, but they are mostly useful if you know how to install them and you have the time to learn how they work.

There are tools that are fairly easy to use, and tools that are highly advanced. I will cover that in more detail in a different post later.

I made a short video of a recent review that I made, just so that you can get a better idea of how I do reviews.

This was the first time that I recorded a review, and I also missplaced my popfilter, so I’m sorry. 🙂

This review was requested by the theme author, and recorded before they made any necessary changes. So please don’t hold it against them <3 .

How you can do a basic review without tools

You can do a basic check yourself without having to install a screen reader, WordPress plugins or browser addons.

-Even this quick check, -and of course; fixing any problems you might find, can improve the experience for you and your visitors.

The first thing you can do to check if your theme and your website is accessible is to look at the colors:

• If there are any text colors on your website that you find too bright and a little more difficult to read than the rest, –then you are probably right, and other visitors will experience it too.
• If there is text that uses red or green, consider changing this to a different color. Red and green can be difficult to read for color blind visitors.

Check if all your links are clearly visible. Make sure that you can see the difference between regular text and links. The easiest way to make links visible, is to add an underline.

You can use the Tab key to test if links and menus are working for screen readers and sighted users who navigate the web without using a mouse.

In this animation I place my mouse pointer in the browser adress bar, and press the tab key. When I press the tab key, the link with the text “More information…” is selected and a blue border is added to the link.

This is important because it means that the link can be focused on, and I can tell where I am on the page.

To repeat this test on your own website:

1. Place your mouse pointer in your browsers adress bar, then press the Tab key.
2. The first link on your page should now be selected. If this link says “Skip to…” then your theme also uses a skip link, which is great. Press Tab again and find the next link. It should have a blue border around it (depending on your browser).
3. Press the tab key until you reach your menu. Now test if the menu works with they keyboard only. All sub menu items should show when you navigate with the tab key.

Next, check your images and videos.

• Would your website content be readable and understandable if images and videos were removed?
• Have you used alternative texts for all non decorative images?

When you add images to your content in WordPress, you have an optional field to add an alt text and a title.

In case you need to add alt texts to images that you have already added, select the image in the media library or the editor.

To test your forms, you want to look for visible labels. Open a page with a comment- or contact form, if you have one.

• There should be enough information and instructions so that visitors can fill out the form.
• Fields that are required needs to be obvious and marked with more than a color change.

Here is an example of an excellent form that has visible labels:

The form below is much more difficult to use. It is missing labels and is only using placeholder textd that is removed when the visitors select the field. The contrast is also too low -can you read the text on the submit button?

I hope these examples have been helpful.

The first form is from one of the official themes: Twenty Seventeen. And the second form is from a random theme (literally the first theme I clicked) on the market place ThemeForest.

There are accessible themes available on both market places and I will give you examples of how to find good themes in the next post.

I hope that I have been able to convince you that you can do these quick tests yourself and make a difference.

And don’t forget that the theme should also be easy for you to use. After all you are the person who will be using it the most.

My recommended reading list:

Karl Groves: The 6 Simplest Web Accessibility Tests Anyone Can Do