• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

Genesis Accessible

About the accessibility of the Genesis framework for WordPress

  • Blog

Genesis 2.2, accessibility changes and features

28 July 2015 by Rian Rietveld

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.

What about the child theme Leiden?

From Genesis 2.2 on, the Sample theme is the same as Leiden (except for the logo)
If you are using Leiden for your site, please continue to do so, together with the plugin Genesis Accessible.

If you are developing a new theme: start with the new Sample theme.

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.

Filed Under: Blog

Genesis Accessible version 1.2 is out!

4 May 2015 by Rian Rietveld

You can download the new version of Genesis Accessible at the WordPress plugin repository.

What has changed?

  • Several bug fixes
  • The possibility to add your own 404 and page_archive templates
  • A check for the existence of a Category Archive title and intro to prevent a double heading in archive pages.

Genesis 2.2

The plugin is ready for Genesis 2.2. In the new version of Genesis almost all accessibility features of this plugin will be integrated into Genesis core. With this plugin you can activate them as soon as version 2.2 will be released.

Thank you #genesiswp community!

I’m very grateful for the help and contributions from: @GaryJ (Gary Jones), @littlerchicken (Robin Cornett), @cdils (Carrie Dils), @bramd (Bram Duvigneau), @purplebabyhippo (Angie Vale), @neilgee (Neil Gee) and the #genesiswp Slack community. Thank you!

Filed Under: Blog

Genesis Accessible 1.1: update for Genesis 2.1 plus bug fixes

8 August 2014 by Rian Rietveld

bug fixesDownload Genesis Accessible 1.1 from the WordPress Plugin Directory.

What’s new in this update  of Genesis Accessible?

Version 1.1 fixes the bugs in the skip links, has an improved HTML5 outline and has changes to comply with changes in Genesis version 2.1. Since the release there was a lot of feedback from users and developers. Gary Jones contributed with code, discussions and suggestions. Bram Duvigneau did screen reader testing. Genesis and WordPress have also been busy removing title attributes from links, so that’s a part of this plugin that’s getting almost redundant (yes!). Most important change: Add a H1 title to an archive can now be done via Dashboard  → Posts → Category → Category Archive Settings. [Read more…] about Genesis Accessible 1.1: update for Genesis 2.1 plus bug fixes

Filed Under: Blog

Get Genesis Accessible now from the WordPress plugin directory

17 May 2014 by Rian Rietveld

As from today Genesis Accessible is available at the WordPress plugin Directory.

The Genesis child theme Leiden will stay available only on the GitHub. Because Genesis is not a free framework, the child theme can’t be posted on WordPress.org.

After testing and feedback I made more settings optional and adjusted some CSS.

Please test it out and let me know what you think. If you like the plugin, please rate it in the plugins directory.

screen shot plugin directory

 

Filed Under: Blog

Announcing: Leiden and plugin Genesis Accessible

4 March 2014 by Rian Rietveld

On Twitter @WPAccessibility did the honors of announcing the Leiden accessible child theme for the Genesis Framework and the plugin Genesis Accessible. And I’m really proud of that (thanks Joseph).

And as from today the plugin and the child theme are available for review on the GitHub.

So, what’s this then? A theme and a plugin?

For my work as a WordPress programmer I use the Genesis FrameWork. I love it, but it has accessibility issues. With every new site the same code needs to be added while building an accessible child theme.
In an effort to standardize this I came up with a plugin (Genesis Accessible) that fixes the HTML/PHP and a child theme (Leiden) that fixes the CSS.

The idea is that you can use them together, as a out-of-the-box accessible website, or use only the plugin if you have a child theme of your own. A developer also can use Leiden as starting point for her own theme development.

The plugin Genesis Accessible still needs testing and debugging, if you want to help, please do. After testing, the plugin will be posted in the plugin repository on WordPress.org.

The Genesis child theme Leiden will stay available only on the GitHub. Because Genesis is not a free framework, the child theme can’t be posted on WordPress.org.

The theme and plugin are work in progress, if you find accessibility issues please let me know.

Filed Under: Blog

Primary Sidebar

Please note

The plugin Genesis Accessible is no longer maintained. Most accessibility improvements are included into Genesis core now.

You can activate them by adding to your theme’s function.php

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

You can find more info about activating the accessibility settings in the post Genesis 2.2, accessibility changes and features.

Copyright © 2018 · Leiden on Genesis Framework · WordPress · Log in