Last updated June 15, 2012. Created by Jeff Burnz on May 24, 2009.
Edited by LeeHunter, Tor Arne Thune, SLIU, mgifford. Log in to edit this page.
The WAI-ARIA specification defines a set of specialized “landmark” roles. These roles provide a method to programmatically identify commonly found sections of web page content in a consistent way. The roles can be used now and allow assistive technologies to provide users with features which they can use to identify and navigate to sections of page content. This is a vast improvement over the traditional "skip to content" type links.
Why use jQuery?
Currently it is problematic to add the role attribute in the markup because it will make pages invalid when using the W3C markup validation service. JavaScript gives us a method of inserting the roles that allows your pages to validate as per normal.
The following jQuery script inserts the role using the attribute function. It searches for matches on either a class or id name in the markup. You will probably need to modify the classes depending on your theme, in particular the banner and main roles.
Copy and past the following and save it as aria-roles.js
/**
* Insert WAI-ARIA Landmark Roles (Roles for Accessible Rich Internet Applications)
*
* http://www.w3.org/TR/2006/WD-aria-role-20060926/
*
* Due to validation errors with WAI-ARIA roles we use JavaScript to
* insert the roles. This is a stop-gap measure while the W3C sort
* out the validator.
*
* To unset comment out aria-roles.js in genesis.info
*/
if (Drupal.jsEnabled) {
$(document).ready(function() {
// Set role=banner on #branding wrapper div.
$("#logo-and-site-name").attr("role","banner");
// Set role=complementary on #main-content blocks, sidebars and regions.
$(".block").attr("role","complementary");
// Remove role=complementary from system blocks.
$(".block-system, td.block, tr.region, td.region").removeAttr("role","complementary");
// Set role=main on #main-content div.
$("#main-content").attr("role","main");
// Set role=search on search block and box.
$("#search-theme-form, #search-block-form, #search-form").attr("role","search");
// Set role=contentinfo on the footer message.
$("#footer-message").attr("role","contentinfo");
// Set role=article on nodes.
$(".node").attr("role","article");
// Set role=nav on navigation-like blocks.
$(".links, .admin-panel, #breadcrumb, .block-menu, #block-user-1, #block-user-3, .block-book, .block-forum, .block-blog, .block-comment, .block-statistics-0, .block-aggregator, ul.pager, .local-tasks").attr("role","navigation");
});
}You can include this in your theme by calling it from your themes .info file, such as:
; Insert WAI ARIA Landmark Roles.
scripts[] = js/aria-roles.js
Comments
Drupal.jsEnabled
Note that in D7, the variable Drupal.jsEnabled has been removed, so the check for it needs to be dropped if you want to use this approach in that context. Also needs to use something like the following syntax:
/** beginning of file **/
if (Drupal.jsEnabled) {
$(document).ready(function () {
/* aria role insertion magic from above */
});
})(jQuery);