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.
Comment | File | Size | Author |
---|---|---|---|
Patch to get wai-aria into core drupal theme | 2.6 KB | mgifford |
Comments
Comment #1
johnbarclay CreditAttribution: johnbarclay commentedThis 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: ________________
Comment #2
mgiffordBecame 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
Comment #3
mgiffordThere is another patch here that contains the javascript approach:
http://groups.drupal.org/node/19115#comment-75396
Mike
Comment #4
cburschkaWait, 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. ;)
Comment #5
mgiffordUnfortunately 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
Comment #6
Jeff Burnz CreditAttribution: Jeff Burnz commentedAs 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
Comment #7
Jeff Burnz CreditAttribution: Jeff Burnz commentedPersonally 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.
Comment #8
mgiffordOk, 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
Comment #9
scatteredbrainV CreditAttribution: scatteredbrainV commentedLast 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!
Comment #10
Everett Zufelt CreditAttribution: Everett Zufelt commentedI 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.
Comment #11
Everett Zufelt CreditAttribution: Everett Zufelt commentedI 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.
Comment #12
Jeff Burnz CreditAttribution: Jeff Burnz commentedMy 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.
Comment #13
mgiffordWould 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.
Comment #14
Everett Zufelt CreditAttribution: Everett Zufelt commentedSetting 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.
Comment #15
alanburke CreditAttribution: alanburke commentedWell if it might be useful, let's leave it as postponed.
Comment #16
Everett Zufelt CreditAttribution: Everett Zufelt commentedClosed, see:
#963760: Decide if ARIA will be permitted in markup
#966432: Allow blocks to specify WAI-ARIA landmark roles
#966396: Decide how to include WAI-ARIA landmark roles
Comment #17
Everett Zufelt CreditAttribution: Everett Zufelt commentedDrupal 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.
Comment #18
mgiffordThere's movement to remove Garland from core. That doesn't change that ARIA should be included in Garland, but it is worth noting.
Comment #19
mgiffordAdding tag for WAI-ARIA.
Garland is out of core now, but even still this should be included by the maintainers.
Comment #20
alanburke CreditAttribution: alanburke commentedMoving Project
Comment #21
RobLoachYeah, we should wait for #966432: Allow blocks to specify WAI-ARIA landmark roles
Comment #22
bowersox CreditAttribution: bowersox commentedEdited: 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.