Last updated August 25, 2009. Created by Jeff Burnz on May 12, 2009.
Edited by bekasu. Log in to edit this page.

The Genesis starter theme includes a number of accessibility features such as WAI ARIA landmark roles, content source ordering, valid XHTML and a Skip to Main Content link by default.

WAI ARIA Landmark Roles

The roles are not hard coded into the templates—they are inserted into the markup using the jQuery attribute function. JavaScript is currently the preferable way to insert ARIA roles because they are not valid XHTML, therefore your site will not validate if they are hard coded into the mark-up.

ARIA roles are currently supported by Jaws 10 screen reader, however I envision that before long most of the major screen readers, both commercial and Open Source, will support Aria roles.

The jQuery used to inject the roles can be found in /genesis/genesis/js/aria-roles.js. By default this is enabled in Genesis. If for some reason you do not want to load the script you can comment it out in genesis.info.

At the end of this page I have included a screenshot showing the ARIA roles on a typical node with comments, primary and secondary navigation and a few blocks. The jQuery knows which blocks to mark as complimentary and which to mark as navigation, search and so on. It knows which is the main content column and that nodes are to be marked as article.

The script needs improvement and I would be open to feedback and input on the development of this script. Its something every theme could use with very little modification.

Learn more about WAI ARIA here - http://www.w3.org/WAI/intro/aria.php

Content Source Order

Genesis places both sidebars below the main content column. It does this no matter what layout you choose. Genesis is an "any order" column layout, which makes it extremely flexible with regards to layout options and source ordering.

Valid Code and Best Practice

Genesis validates against the following standards and/or validation services:

Skip to Main Content Link

Genesis includes a simple Skip to Main Content link in the top right hand corner. Unlike most themes I decided to not hide the link by default, but rather to show themers how they can hide it if they want to. In your subthemes page.css, around line 177 you will find instructions on how to hide the link and example of how to show the link when the user tabs the link into focus.

/**********************************************************
*                   Skip navigation
**********************************************************/
/**
* To hide the skip-nav you can use:
*
* height: 0;
* overflow: hidden;
*
* Do not use display:none as this hides it from screen readers!
*/
#skip-nav {
   text-align: right; /* LTR */
}
/* Override default pseudo class styles */
#skip-nav a:link    {}
#skip-nav a:visited {}
#skip-nav a:hover   {}
#skip-nav a:focus   {}
#skip-nav a:active  {}
/**
* An alternative method is to position the skip-nav link offscreen
* until the user tabs the link into focus. Uncomment the following to use.
*
* Adjust the style of the active/focused link to suit.
*/
/*
#skip-nav {
   text-align: left;
}
#skip-nav a:link,
#skip-nav a:hover,
#skip-nav a:visited {
  height: 1px;
  overflow: hidden;
  position: absolute;
  top: -999em;
}
#skip-nav a:active,
#skip-nav a:focus {
  background: #FFF;
  border: 1px solid #C00000;
  color: #C00000;
  height: 2em;
  overflow: visible;
  padding: 2em 0;
  position: fixed;
  text-align: center;
  top: 0;
  width: 978px;
  z-index: 1000;
}
*/

WAI ARIA Landmark Roles Screenshot

To highlight ARIA roles in your web pages download the Juicy Studio Accessibility Toolbar for Firefox.

This is a screenshot of a typical node in Genesis showing the ARIA roles using the Juicy Studio toolbar:

Only local images are allowed.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

This page describes a lot of desirable features, all good reasons to use this theme or a subtheme. Drupal 7 has some new themes featuring similar features and related recommendations for theme developers. How does Genesis compare to the recommendations in Drupal 7?

I'll need to do a comprehensive review of all the accessibility improvements in Drupal 7. I did work on quite a few of them, or was at least party to discussions so I have a fair idea. Certainly I can remove my implementation of the element-invisible concept from Genesis and use cores. In many ways core has either caught up or at least catching up to Genesis and Adaptivetheme also (both with heavy focus on accessibility) - e.g. Adaptivetheme has hidden H2 labels for many things, just like D7 has now.

I'll be working on Genesis 7 over the next month, so I'll see how things pan out and how I can push it harder also, since in contrib we can go beyond the restrictions of core.