Defining WAI-ARIA Landmark Roles in Garland

mgifford - March 26, 2009 - 04:56
Project:Drupal
Version:7.x-dev
Component:Garland theme
Category:feature request
Priority:normal
Assigned:mgifford
Status:won't fix
Issue tags:accessibility, theme
Description

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.

AttachmentSizeStatusTest resultOperations
garland_wai.patch2.6 KBIgnoredNoneNone

#1

johnbarclay - March 26, 2009 - 13:13

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: ________________

#2

mgifford - March 31, 2009 - 13:17

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

#3

mgifford - April 29, 2009 - 16:18

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

Mike

#4

Arancaytar - April 29, 2009 - 21:39

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. ;)

#5

mgifford - April 30, 2009 - 03:10

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

to see some implementations in other CMS's - http://www.standards-schmandards.com/2009/wai-aria-landmark-roles-in-cms...

I do think it should work and agreed that the javascript is a hack. Hopefully one that won't be needed for long.

Mike

#6

Jeff Burnz - May 3, 2009 - 22:53

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

#7

Jeff Burnz - May 29, 2009 - 10:18

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.

#8

mgifford - June 5, 2009 - 04:40

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

#9

valeria78 - July 22, 2009 - 18:50

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!

#10

Everett Zufelt - July 24, 2009 - 18:55

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.

#11

Everett Zufelt - September 8, 2009 - 15:09

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.

#12

Jeff Burnz - September 8, 2009 - 17:37

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.

#13

mgifford - September 8, 2009 - 18:20

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.

#14

Everett Zufelt - September 8, 2009 - 18:21
Status:needs work» 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.

 
 

Drupal is a registered trademark of Dries Buytaert.