Categories
Getting started

What does accessibility-ready mean?

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.

Categories
Themes

Featured theme: AeonBlog Plus

Aeonblog is one of the latest free accessibility-ready themes on WordPress.org.

It also quickly climbed on the list of popular themes. This shows that there is still a growing need for themes that are accessible, fast, beautiful yet easy to setup and customize.

This week, we are excited to release a premium version of the theme, AeonBlog Plus. The Plus version has additional features such as:

  • Left and right sidebars
  • More page and post templates
  • Social sharing
  • Footer widget areas
  • Personalized footer credit text
  • More options to hide post meta information
  • Custom blockstyle for galleries

On our website aeonwp.com you can see the different demos and even try the customizer options live.

As part of the development team at Aeon WP I plan to continue to improve the accessibility and quality of the themes.

If you have suggestions for improvements or if you encounter any problems please contact us. We provide support via WordPress.org for the free version, or via e-mail: support@aeonwp.com.

Categories
Getting started

How to find an accessible WordPress theme

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:

An image describing the Themes Add New screen, with the Add New Button, a search form, and two themes visible.

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:

An image describing the Add Themes page with the feature filter visible. It has  3 columns with a list of check boxes.

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:

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.