Genesis Accessible

About the accessibility of the Genesis framework for WordPress

Installation

So what do you need

  1. WordPress: First of all: have a recent version WordPress installed, preferably version 4.0 or higher. Also take a look at the requirements for WordPress.
  2. Genesis Framework: The Leiden child theme and the plugin Genesis Accessible are written for the Genesis framework version 2.0 or higher. This excellent framework is not free, but doesn’t cost much and is totally worth the money. You can buy and download it at studiopress.com, you only need the basic Genesis Framework
  3. The plugin Genesis Accessible

Installation

  1. Install WordPress
  2. Install and activate Genesis
  3. If your site is in another language than English: download the plugin Genesis Translations
  4. Install and activate the plugin Genesis Accessible
  5. Go in the Dashboard to Genesis → Accessibility Settings and select the options you want to add.  All settings are optional, so you can adjust the setting to your needs and child theme.

Genesis – Accessibility Settings

You can find the settings at: Dashboard  → Genesis → Accessibility Settings.

Skiplinks

Depending on the layout settings of the Genesis theme, Skiplinks add navigation quick links to the website, for screen reader and keyboard users.
These links are not visible, only on focus when accessed by the tabs keys. The included CSS is optional.
Some Javascript is added as a fix for IE and Chrome.
WCAG reference: Bypass Blocks: Understanding SC 2.4.1

Use a semantic heading stucture

This option fixes the semantics of order of the headings, so a screen reader user can make sense of the structure of a page.

Some archives and categories lack an H1. This option adds the H1 heading to those pages.
In the current version of Genesis it is possible to have an H1 and after that the H4 for the widgets, skipping the H2 and H3.
WCAG reference: G141: Organizing a page using headings

For this option you also need to change one Genesis SEO setting:
Dashboard -> Genesis -> SEO Settings -> disable “Use semantic HTML5 page and section headings throughout site?”

Developers note: If you use custom post types in your child theme: you can also define an H1 heading to custom post type archive:
add ‘genesis-cpt-archives-settings’ to the ‘support’ options of the post type arguments.
For more information read Custom post type archive settings with Genesis 2.0

SEO Note: The reason current heading structure of Genesis is chosen is to optimize your website for SEO. For example: use of H4 for widgets is to let Google know Widgets are less important. So here SEO and accessibility seems to have different goals.

Asking screen reader users, they all state that a semantic use of headings is very important for them. If you want to know more about this topic, please read Steve Faulkner on HTML5 semantics.

Add keyboard accessibility to the dropdown menu

You only have to check this option if you have a drop down menu as main or sub navigation.

This option adds a class and a bit of JavaScript to the menu, to make the sub-items keyboard accessible. The functionality of the plugin Genesis Accessible Dropdown Menu is fully included into Genesis Accessible. So you don’t need both plugins, only this one.
WCAG reference: Keyboard: Understanding SC 2.1.1

Remove less accessible Genesis widgets

These widgets have accessibility issues. Enabling this option removes them from your Widgets page so you won’t be tempted to use them:

  • Genesis Featured Page,
  • Genesis User Profile Widget and
  • Genesis Featured Post

Use Accessible 404 page

The page title of the 404 page is changed into Page not found and a sitemap is added.

Use an accessible sitemap

The heading structure of the sitemap is fixed.

Genesis 2.2

In Genesis 2.2 a lot of the accessibility functionality will be added into Genesis core. You can use this plugin to activate those features when version 2.2 is released. This plugin is already compatible with this new version.

After Genesis 2.2 comes out, this documentation will be updated.

WordPress – Accessibility Settings

Add page/post title to read more

Instead of just repeating the “Read more…” link anywhere you have an archive of posts, this option changes the link to say “Read more about [post title].” If you want to hide the post title in this link also need to check the option “Add CSS for screen readers (screen-reader-text) and skiplinks”.

WCAG reference: H30: Providing link text that describes the purpose of a link for anchor elements

Remove title attributes link site title

Title attributes are in dispute, it’s not against WCAG 2.0 rules to use them but we hate them anyway (well, at least screen reader users do). It’s up to you to leave them in or out.
WCAG reference: H33: Supplementing link text with the title attribute.

Remove H1 from the editor toolbar

The H1 tag should only be your site title on your home page and then your post/page title on all other pages. Using an H1 tag in any of your content is not semantically correct. It’s not good for accessibility AND it’s not good for Google!

Plugin WP-Accessibility

Joe Dolson wrote an excellent plugin to add a lot of accessibility features to WordPress.
Please read the documentation on how to use both plugins together.

Questions?

Take a look at the FAQ page or ask them at the plugin support forum at WordPress.org.

If you find bugs, please report them in the Genesis Accessible GitHub.