So, one of the participants of the 2nd DrupalCon BoF on accessibility brought up WAI ARIA & jQuery. I just want to focus with this feature report on a basic implementation of WAI-ARIA. More needs to be done, specifically for core and contributed blocks and spaces with user interaction. Bleeding edge versions of IE 8, Firefox 3, Safari & Opera 10 are starting to recognize ARIA roles. By the fall of 2010 when D7 becomes a standard install there will be good support for this protocol in most new browsers. Certainly, there will be options for folks with disabilities to choose from that will be able to give them a better browsing experience.

So, let's bring in WAI-ARIA Landmark Roles into core. Please contribute suggestions.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

johnbarclay’s picture

This is good. With these aria roles I don't see any conflicts with existing content. When a block or region has additional aria roles, they will be tagged in the nested elements themselves so hard coding a landmark aria role in the theme seems like a perfect approach for banner, search, and any other content that is hard coded into the page or node .tpl (not part of the blocks and regions model).

With many types of drupal content, aria roles will need to be added by the modules that generate the content. But they also need to be a configurable option in the block elements. Perhaps a modification to the block module and a new field in the blocks table aria_roles. The options might look like this:

Aria Role for block
[] navigation
[] banner
[] ...
[x] let content add aria role
[] other: ________________

mgifford’s picture

Became aware that there is now a validation issue when adding roles to templates as I have. One approach suggested by Peter Krantz was using jQuery to insert the roles with something like:

(document).ready(function() {
$("#header").attr("role","banner");
$("#content").attr("role","main");
$("#searchform").attr("role","search");
$("#sidebar").attr("role","complementary");
$("#footer").attr("role","contentinfo");
$("#navigation").attr("role","navigation");
});

To do this though we'd need to insert id's into the template in order to do this with any control.

Mike

mgifford’s picture

There is another patch here that contains the javascript approach:
http://groups.drupal.org/node/19115#comment-75396

Mike

cburschka’s picture

Wait, why is there a validation issue? Shouldn't you be using an XML namespace for these attributes, if the validator doesn't accept them for normal XHTML?

Adding accessibility via Javascript is very hit-and-miss - besides, using Javascript to add non-standard things to a document doesn't make your document valid, it just means you have fooled the validator. ;)

mgifford’s picture

Unfortunately the W3C's validator - http://validator.w3.org - comes up with the following error:

Attribute "role" is not a valid attribute. Did you mean "frameborder" or "scrolling"?

to a role addition like

Jeff Burnz’s picture

As far as I understand this ARIA landmark roles are simply not XHTML so will never validate, at least not until a new doctype is developed. I have read that HTML5 will include roles.

@Arancaytar, any chance you could expand on this XML namespaces suggestion, and if that is even feasible in Drupal, is it supported, doable and a real solution?

I am using jQuery to do it at the moment (inserting roles), but if there is a valid and workable alternative that does not require major customisations then that would be most interesting.

My knowledge is pretty limited in this area, is this anything to do with what you are suggesting - http://juicystudio.com/article/wai-aria-in-html.php

Jeff Burnz’s picture

Personally I'm pretty cagey about something like this in core, while not entirely a hack its not exactly very elegant either. I'm thinking more along the lines of contrib module now, something configurable + uses jQuery to insert the roles. Its not going to be hard to build and could benefit a great many more sites/themes.

mgifford’s picture

Ok, that seems like a reasonable compromise. If we're not going to be able to bring it properly into core just yet, creating a module to help easily add the appropriate ARIA tags by inserting the right JavaScript seems like a good approach.

Just need someone to contribute the Drupal 6/7 module to add this.

Mike

scatteredbrainV’s picture

Last year I took a WAI-ARIA course given by the University of Illinois. They made us use JavaScript to insert WAI-ARIA and make the document validate. It's a hack we are forced to use until WAI-ARIA won't be officially released and a new doctype will be developed.
With the W3C choosing HTML5 instead of XHTML, I hope they'll consider and insert WAI-ARIA in the specification, so no such hack is ever needed again.

Thanks for all your work on this direction!

Everett Zufelt’s picture

I tried to add aria landmark roles to garland today.

1. I followed the example at http://drupal.org/node/471444

2. I added a themes/garland/js/aria-roles.js file

3. I added the line "scripts[] = js/aria-roles.js" to themes/garland/garland.info

I received the following error message when I visited example.com/admin

PDOException: in system_update_files_database() (line 1714 of /home/dm7/modules/system/system.module).

The website encountered an unexpected error. Please try again later.

Everett Zufelt’s picture

I have been giving this issue some thought. Even if we were to use a jQuery based solution to add aria landmarks to Garland once developers started enabling more modules with different block content those blocks would not necessarily have landmakr roles assigned. This could lead to inconsistent navigation and may not be to much of an improvement at all.

I think that this issue should be postponed until a more generalized approach to adding aria landmark roles to content can be implemented, requiring that we wait until ARIA attributes pass w3c validation.

Jeff Burnz’s picture

My feeling this is probably best served by contrib in a configurable module (that uses jQuery).

Feedback from the owners of sites I have built specifically for screen readers is that too many roles are confusing and they want some way of controlling which elements have a role applied. Most times we are stripping out landmarks and omitting most of the role types and only applying the most useful ones to a few page elements.

I have a jQuery script that we tweak depending on site owner requirements.

mgifford’s picture

Would be good to see that as a module within http://drupal.org/project/accessible

So far it's Drupal 6, but as of Nov 15th we're going to have to think about the stuff that's not getting into core.

Everett Zufelt’s picture

Status: Needs work » Closed (won't fix)

Setting this issue to won't fix. Not that it might not be useful sometime down the road, but timing is indefinite.

Would love to see an ARIA landmark contrib module.

alanburke’s picture

Version: 7.x-dev » 8.x-dev
Status: Closed (won't fix) » Postponed

Well if it might be useful, let's leave it as postponed.

Everett Zufelt’s picture

Everett Zufelt’s picture

Title: Defining WAI-ARIA Landmark Roles in Garland » Add WAI-ARIA landmark roles to Garland
Assigned: mgifford » Unassigned
Status: Closed (won't fix) » Postponed

Drupal 8 is going to be html5 compatible, therefore we can implement WAI-ARIA landmark roles without invalidating the page (WAI-ARIA is valid in html5).

In #966396: Decide how to include WAI-ARIA landmark roles we are discussing how to add WAI-ARIA landmark roles to themes. Once we have decided upon this we should add landmark roles to Garland.

mgifford’s picture

There's movement to remove Garland from core. That doesn't change that ARIA should be included in Garland, but it is worth noting.

mgifford’s picture

Issue tags: +aria

Adding tag for WAI-ARIA.

Garland is out of core now, but even still this should be included by the maintainers.

alanburke’s picture

Project: Drupal core » Garland
Version: 8.x-dev » 8.x-1.x-dev
Component: Garland theme » Code

Moving Project

RobLoach’s picture

bowersox’s picture

Edited: I agree with the comments above. It's fine for the Garland maintainers to be aware of this. But at this point, I believe it is more important to add ARIA landmark roles to the themes that ARE in Drupal 8 core and promote proper ARIA landmark use in contributed themes.