jQuery 1.7 & WAI-ARIA

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
mjh2508's picture
Posted by mjh2508 on March 11, 2009 at 12:06am

Hi everybody,
As one of a BoF Accessibility participants on the last day of DrupalCon DC 2009, I decided to get involved and help out in what can be done to improve accessibility in Drupal. As a newbie, this is my very first post on this Accessibility Groups forum.

There are a couple of things (in order) that I'd like to share with you in what items can be implemented right away into Drupal. Right off the top of my head, of course.

  1. First, download Juicy Studio Accessibility Toolbar. This is a must-have Firefox extension that will allow developers and testers to test for WAI-ARIA live regions, roles and properties.
  2. Secondly, this is the simplest implementation to do. Adding ARIA document landmark roles - these are very easy to do and it's quite a painless process. Read Using WAI ARIA Landmark Roles and Examining WAI-ARIA Document Landmark Roles.
  3. Secondly, jQuery had released version 1.7 last week. The great thing about this new version is that they finally implemented WAI-ARIA enhancements in making their widgets more accessible. I did some testing on various jQuery widgets (tabs, accordion, calendar, etc.) this morning using the Juicy Studio Accessibility Toolbar to check for WAI-ARIA roles and properties. While I do not know how well it does with assistive technology, I have to say "awesome job to the jQuery team!".
  4. And finally, the last task would be to figure out how to make Drupal form pages accessible in implementing ARIA roles and properties such as alert, checkbox, radio, etc. I think this part will be a bit of a challenge to do because form page is always tricky.

A friendly reminder: only modern standard-compliant browsers that support WAI-ARIA will work.

In order to stay on top of WAI-ARIA and jQuery on accessibility, there are a couple of blogs and sites that are pretty up-to-date and current.

Let's help improve a11y for current and future Drupal versions to the best of our abilities.

Until then, Drupal Rocks!
Mike

P.S. - Please note that I am still learning Drupal and I am having a bit of trouble finding my way around the Drupal Groups forum.

Categories:

Comments

Testing WAI-ARIA

Posted by Mario Batusic on March 13, 2009 at 9:28am
Mario Batusic's picture

Hi Mike!

Thanks for comming to the Accessibility group :-) We need all people we can get.
I am ready to test WAI-ARIA with JAWS. Currently I am working with JAWS 9. Can you set up some tests - a little WAI-ARIA test suite, so concrete as possible. You should create a case and stepts from 1. to ... saying: go to the site X; activate the link/Button Y; write down what you hear/read in Braille; write down your focus position.
Try to make it so, that a blind user can execute the test without any help from a sighted person, that will make it easier to get more test persons.
Ciao
Mario

Mario Batusic - Linz, Austria

Not sure about JAWS 9 & ARIA

Posted by Brigadier on March 13, 2009 at 3:09pm
Brigadier's picture

I've heard that JAWS 10 was the first with ARIA support, at least for live regions. The JAWS 9 feature list doesn't mention ARIA by name. Since JAWS 9 has a large installed base it's still worth testing on, just don't know if you'll get any of the ARIA features.

So Where to Begin with Drupal Core?

Posted by mgifford on March 25, 2009 at 8:44pm
mgifford's picture

Thanks for this Mike. Was quite useful to see this and to get pointed to the Firefox Plugin.

So, think a lot can be done by editing Garland's page.tpl.php to add roles (like I've done here):

<div id="header" role="banner">

<?php if ($search_box): ?><div class="block block-theme" role="search"><?php print $search_box ?></div><?php endif; ?>

<div class="clearfix" role="main">

<?php if (!$left && $search_box): ?><div class="block block-theme"  role="search"><?php print $search_box ?></div><?php endif; ?>

and also the page.tpl.php:

       <div class="links" role="contentinfo">

Blocks are a lot trickier as one would need to allow a way to edit the block admin to choose a role for that block. I think that might need to be a separate module to begin with. Probably in http://drupal.org/project/accessible

Any thoughts on this? Should I roll it up into a patch?

Mike

OpenConcept | CLF 2.0 | Podcasting

--
OpenConcept | Twitter @mgifford | Drupal Security Guide

Patch would be great.

Posted by johnbarclay on March 25, 2009 at 9:13pm
johnbarclay's picture

Yeah. A patch would be great for both 6 and 7.

Here's how I think the accessible module for drupal 6 should work with aria landmark roles:

  • have a general configuration checkbox to add aria roles whenever possible that defaults to checked.
  • add aria roles in the sample theme template
  • allow author to select a role for a given block
  • allow author to type in a role for other types of roles besides landmarks (http://test.cita.uiuc.edu/aria/index.php)
  • determine default roles for blocks containing menus, searches, and other obvious blocks with obvious roles.

John

www.johnbarclay.com

got a patch for 7

Posted by mgifford on March 26, 2009 at 5:04am
mgifford's picture

Hi John,

I've got a issue/patch up here - http://drupal.org/node/414190

Not sure it's the best implementation, but hope it helps spark some discussion.

Mike

OpenConcept | CLF 2.0 | Podcasting

--
OpenConcept | Twitter @mgifford | Drupal Security Guide

Accessibility

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week

See all hot content.