Genesis Accessible

About the accessibility of the Genesis framework for WordPress

Genesis 2.2, accessibility changes and features

by

Accessibility is coming to Genesis Framework version 2.2. How can you activate the options you need and what to look out for to keep your own Genesis child themes accessible.

How accessible will Genesis be?

That depends on you, the theme developer and on the content manager.
The Sample Child theme will be WCAG 2.0 AA out-of-the-box, so you can start your theme development with a solid base.

One of the goals of integrating accessibility in Genesis, was that existing themes would not break after updating. So you have to activate the accessibility options yourself.

Add Accessibility support

There are two different ways you can activate the accessibility options:

  1. Add the function add_theme_support for genesis-accessibility in your functions.php and add some extra CSS
  2. If you can’t change your child theme yourself, use the plugin Genesis Accessible, that will activate the options and also add the CSS for you. This plugin can be found in the WordPress plugin repository. You can read on this website with the installation information how to activate the accessibility options.

Note: All CSS mentioned here is also included into the Sample Child theme for Genesis 2.2.

1: add_theme_support in functions.php

Add to the functions.php of your child theme (or the file where you store your add_theme_support options) the code:

add_theme_support( 'genesis-accessibility', 
  array( 'headings', 'drop-down-menu', 'search-form', 'skip-links', 'rems' ) 
);

In the array there are several options. You don’t need to add them all, just the ones you need for your theme.

The options for genesis-accessibility

Default, always added with genesis-accessibility

Meaningful read more links

The title of the post or page is added to the read more (or continue reading) links in archive pages, like:

' <span class="screen-reader-text">' 
  . __( 'about ', 'genesis' ) . get_the_title() . '</span>';

Add .screen-reader-text to your style.css

To prevent that the visual layout of your page will break, the class=”screen-reader-text” is added these links. So if you activate ‘genesis-accessibility‘ you also have to add the following CSS to your style.css (or equivalent):

/* ## Screen reader text
--------------------------------------------- */

.screen-reader-text,
.screen-reader-text span,
.screen-reader-shortcut {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.screen-reader-text:focus,
.screen-reader-shortcut:focus,
.genesis-nav-menu .search input[type="submit"]:focus,
.widget_search input[type="submit"]:focus  {
	clip: auto !important;
	height: auto;
	width: auto;
	display: block;
	font-size: 1em;
	font-weight: bold;
	padding: 15px 23px 14px;
	color: #333;
	background: #fff;
	z-index: 100000; /* Above WP toolbar. */
	text-decoration: none;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
}

.more-link {
    position: relative;
}

You can copy this from the style.css of the sample theme or from the framework itself.
If you want to know more about the screen-reader-text class, read The screen-reader-text class, why and how?

Roles on ARIA landmarks

ARIA landmarks help screen reader users to understand the layout of a page, but as modern screen readers understand HTML5, landmarks become redundant for the obvious (same) elements. These double declaration also cause W3C validation errors.

So we removed:

  • role=banner on <header>
  • role=navigation on  <nav>
  • role=contentinfo on  <footer>

More information about this in Why does HTML footer take role=”contentinfo”? by Bruce Wilson.

ARIA labels on asides

ARIA roles give screen reader users information about layout, functionality. They can’t see the layout and have to listen to what is told by the screen-reader, so extra information about what’s going on is helpful.

An ARIA label is added to:

  • Genesis_Breadcrumb: breadcrumb separator
  • genesis_attributes_sidebar_primary: Primary sidebar
  • genesis_attributes_sidebar_secondary: Secondary sidebar
  • genesis_skiplinks_attr_nav_primary: Main navigation
  • genesis_numeric_posts_nav: Current page

Examples:

<aside class="sidebar sidebar-primary widget-area" 
  role="complementary" 
  aria-label="Primary Sidebar" 
  itemscope="itemscope" 
  itemtype="http://schema.org/WPSideBar" 
  id="genesis-sidebar-primary">
<div class="archive-pagination pagination">
  <ul>
    <li class="pagination-previous"><a href="your-url">« Previous Page</a></li>
    <li><a href="your-url"><span class="screen-reader-text">Page </span>1</a></li>
    <li class="active" aria-label="Current page"><a href="your-url"><span class="screen-reader-text">Page </span>2</a></li>
 </ul>
</div>

headings

For an accessible website you need a semantic heading structure. This means, the weight (number) of a heading has meaning, like in a book. One H1 per page, the site title for the homepage, the page title for a page, the archive title for an archive, the category title for a category, you get the idea. The H1 says: this is what the page is about.

So if you activate ‘headings’, the heading structure will be as follows:

  • H1: one representing the title for a page, single, archive, search, the 404
  • H2: skip links, main navigation, sidebars (and in the content)
  • H3: widget-titles (and in the content)
  • H4, H5, H6: only in the content

By “content” I mean: what the content manager enters in the Admin editor of a post/page.
Every sidebar will have a screen-reader-text class hidden H2, the widgets title will be an H3.

<h2 class="genesis-sidebar-title screen-reader-text">Primary Sidebar</h2>

Also the widget headings are now semantic, you can use all Genesis widgets from now for an accessible site. For more information about heading structure read HTML5 Headings in WordPress: A11y versus SEO?

page_archive.php and 404.php

The heading structure of the content of the templates page_archive.php and 404.php wil change too if you add ‘headings’ as option. The “sitemap” headings change from H4 to H2.

These 2 templates now call the same function to generate the sitemap:
genesis_sitemap( $heading );
$heading is a h2 or h4, depending if you activated ‘headings’ or not.

To make your own sitemap, genesis_sitemap has a filter  ‘genesis_sitemap_output’:

add_filter( 'genesis_sitemap_output', 'prefix_genesis_sitemap' );

drop-down-menu

To make a dropdown menu keyboard and touch device accessible, it needs some JavaScript. Otherwise the submenu’s don’t become visible while you tab through the items.

This is done by adding SuperFish, a jQuery plugin “keeping dropdown/flyout menus accessible across browsers great and small, in addition to adding support for newer touch devices (running Android, iOS, Windows, etc)“. Superfish adds a class .sfHover to a menu item on focus.

To make this work, you also need to add some CSS to your style.css

/* ## Accessible Menu
--------------------------------------------- */
.menu .menu-item:focus {
 position: static;
}
.menu .menu-item > a:focus + ul.sub-menu,
.menu .menu-item.sfHover > ul.sub-menu {
 left: auto;
 opacity: 1;
}

So: if your theme has a drop down menu for the primary or secondary menu, activate ‘drop-down-menu’. If not, leave it out, and save your theme some CSS and the JavaScript.

search-form

Every input field needs a label. Yes it does. And a placeholder is no label.

To add a label to the Genesis search form: add the option ‘search-form’. A label is added, hidden by the .screen-reader-text class.
On a web page, every id should be unique. So to the id=”searchform” a unique, random number is added. This number changes with every page load.

<form class="search-form" itemprop="potentialAction" itemscope="itemscope" itemtype="http://schema.org/SearchAction" method="get" action="your-url" role="search">
 <meta itemprop="target" content="your-url/?s={s}">
 <label class="search-form-label screen-reader-text" for="searchform-55b489431629d">Search this website</label>
 <input itemprop="query-input" type="search" name="s" id="searchform-55b489431629d" placeholder="Search this website …">
 <input type="submit" value="Search">
</form>

Now default, in the Genesis 2.2 CSS, the submit button is hidden by screen-reader-text. To comply with WCAG rules it must also be visually clear what this form is about. So: add a title to the search widget or don’t hide the submit button with CSS (remove the widget_search form the screen-reader-text class definitions). You can’t depend (yet) on only the placeholder’s info.
Don’t make a visitor guess what she needs to fill out here.

skip-links

Skip links are used by people who navigate a website without a mouse, with a keyboard only and by screen reader users. You can use a skip link to quickly jump to for example the main content or the footer. The links are hidden from sight, but when you tab though a page, they get focus and become visible.

The skip links are places above the <header> in a <section>. Depending on the page layout and your navigation the links are added.
Because you only can link to an ID, also ID’s are added to the elements to jump to.

So the skip links section looks like this (for example):

<section>
  <h2 class="screen-reader-text">Skip links</h2>
  <ul class="genesis-skip-link">
    <li><a href="#genesis-nav-primary" class="screen-reader-shortcut"> Skip to primary navigation</a></li>
    <li><a href="#genesis-content" class="screen-reader-shortcut"> Skip to content</a></li>
    <li><a href="#genesis-sidebar-primary" class="screen-reader-shortcut"> Skip to primary sidebar</a></li>
    <li><a href="#genesis-footer-widgets" class="screen-reader-shortcut"> Skip to footer</a></li>
  </ul>
</section>

And the ID is added to the element to jump to (for example):

<main class="content" id="genesis-content">

Skip-links needs this extra CSS in your style.css:

/* # Skip Links
---------------------------------------------------------------------------------------------------- */
.genesis-skip-link {
 margin: 0;
}
.genesis-skip-link li {
 height: 0;
 width: 0;
 list-style: none;
}
/* Display outline on focus */
:focus {
 color: #333;
 outline: #ccc solid 1px;
}

Besides some extra CSS (see the .screen-reader-text above) it also needs a few lines of JavaScript to make it work in web-kit browsers. If you activate this option, the file skip-links.js is automatically added.

To make your own skip links, genesis_skip_links has a filter  ‘genesis_skip_links_output’:

add_filter( 'genesis_skip_links_output', 'prefix_skip_links' );

rems

Add ‘rems’ if you use rem for font size in your style.css. This can be used by plugin developers, so they can add rem for font-size in their output. This was done on request of the author of the Design Palette Pro plugin. Rems are explained further in this post with the Sample Theme changes.

The Sample Child theme

What has been changed in the sample theme? And what do you need to keep in your own child theme?

Rems are back

The font sizes are declared double, in pixels and in rem. It’s up to you to leave the rem’s in or not. For WCAG 2.0 font sizes must be scalable. Although almost all browsers can scale pixels, for WCAG you still need to apply a relative font to be sure. So if your site officially needs to comply with WCAG, keep the rem’s in.

Colour contrast

The colour contrast has been improved to meet the WCAG 2.0 AA rule: the colour contrast ratio between text and background must be 1:4.5 or higher.
There are several tools to check this for your own theme, I like the Colour Contrast Tool by Jonathan Snook.

Underlined links

Yes, I know, it’s plain ugly.

But please keep in mind: the Sample Theme is a template, a starting point for your development.
If you have graphic design skills, you might come up with something beautiful. But please keep this rule in mind: Links must be distinguishable as links, also for people who are colour blind. So make them stand out, not by colour alone.

Focus with hover

In the CSS, with every :hover, a :focus was added. Now people who navigate with keyboard only can see where they are in a page, while tabbing through the links.

::-moz-selection removed

This CSS harms no one, but gives a W3C validation error.
Up to you to keep in or leave it out.

Changes in the Admin

Not only the front end has been improved, also the Admin.

Like:

  • selecting a (default) layout is now possible with keyboard only
  • the colour contrast of the layout images is better.
  • <b>’s are changed into <strong>
  • with messages a role=”alert” is added for screen reader users
  • a screen-reader-text “opens in a new window” is added for links that do so

Your own accessible Genesis child theme

So, how to start when you want an accessible child theme.

  • start with the Sample theme, it has all the necessary CSS and JavaScript
  • activate the theme support for ‘genesis-accessible’ with at least: ‘skip-links’ and ‘headings’
  • add ‘search-form’ if you have one in your theme
  • add ‘drop-down-menu’ if you have one in your theme
  • add ‘rems’ if you also use rems as font-size
  • keep the heading structure semantic in your custom code
  • make links distinguishable not by colour alone
  • check the colour contrast between text and background
  • and validate your code

There is much more to say about an accessible WordPress website, read for example about accessibility tools on Make WordPress Accessible.

Note: If you are using Genesis together with the plugin WP-Accessibility by Joe Dolson, please read this post by Carrie Dils first: Are you using the best tools for WordPress accessibility?

If you have questions and remarks: Post them in the comment section below, or ask away on the #accessibility channel in Genesis Slack.