I'm using the Password Policy module to enforce strong passwords. When a user changes their password, the module displays a password strength indicator via Javascript. I'd like to add the ARIA live region role to the span that contains the strength indication and error message.
Hacking the Javascript is pretty simple. I'd like to consider the options for doing this the "best" way.
As I see it, I have two options. The first would be to redo a chunk of the module so that the strength indicator is generated in PHP and displayed dynamically by Javascript. Then the PHP code that creates the indicators would be made themeable. That would then allow me to create theme code that overrides the default span and create one that has the roles I need.
My second option would be to create some Javascript code in my own theme that runs after the code in Password Policy. This Javascript would add the roles I need dynamically. I don't know if JAWS or other screen readers would recognize the ARIA roles if they were added this way. Of course testing this is compounded by the variety of ways roles could be specified.
Any suggestions?
Comments
An Approach
I'm a PHP person, so I usually figure that this is the logical way to do things. Also, if a module is more themable it is pretty much always a good thing for everyone. So, outputting better indicators is definitely a good approach.
I'd also really like to see patches being written so that the default mode is for greater accessibility. Putting accessibility features like this into the theme doesn't push the Drupal community along into being more accessible for everyone.
Is there a graceful fallback for when a browser doesn't have Javascript enabled with this module?
I'd start by posting a feature request here:
http://drupal.org/project/issues/password_policy?states=all
I think it's also useful to look at how D6 & D7 display the password strength. Is there room for improvement in this piece of the interface?
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
Issue submitted
If Javascript is disabled then the user will be informed password policy violations after trying to submit the form.
I would also like for accessibility to move into modules & core rather than the theme layer but when it comes to ARIA there are several ways to do it and some involve markup that doesn't validate. I think ARIA needs to be supported in core before it moves into contrib modules.
I've submitted a feature request for the module as well. (I hesitate to submit issues when I haven't got time to come up with a solution.)
Having time to come up with solutions
It is certainly always best to put forward a solution to a problem that others can test.
However, simply reporting a problem and discussing options is useful too. Any thoughts on getting ARIA support in core?
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
ARIA in core
There must be a group that looks at Core output as XHTML/HTML/HTML5. I think they'd have the best insight into getting ARIA in core. Personally I think ARIA's not mature enough to push into a stable project right now. I'd start with building themes or modules that use ARIA and override many core functions. Once that's partly successful and the kinks are worked out then it'd be possible to move it into core - where plenty of site builders who've never heard of it will find new bugs for us to work out.
What about starting with Garland?
Be interested in your feedback here - http://drupal.org/node/414190
Think that this approach is good for a stable project? Considering Drupal7 isn't going to be on live sites really till the fall of 2010.. Don't think the role definitions are going to change for introducing basic elements.
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
And for those looking for more on ARIA
I don't think that there is another group out there that is looking at core output. Well, not in GDO anyways. There are certainly some validation issues piled up in the D7 issue queue.
Good intro to ARIA is:
http://en.wikipedia.org/wiki/WAI-ARIA
Best not to move anything into core until it is tested and stable.
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
Looking for feedback on ARIA Roles
I'm considering supporting ARIA Roles in one of my themes. I think JavaScript is the way to go for now (bc of the validation issues).
I knocked up a simple bit of jQuery which is pretty strait forward - this works as expected but what I am not clear on is where to impliment a particular role, or even if they can be nested (I assume they can).
This is for the Genesis theme (6.x-2.x only).
// Insert ARIA Rolesif (Drupal.jsEnabled) {
$(document).ready(function() {
$("#branding").attr("role","banner");
$("#main-content").attr("role","main");
$(".block, .sidebar, .region").attr("role","complementary");
$("#search, #block-search-0").attr("role","search");
$("#nav, #breadcrumb, .block-menu, #block-user-1, .block-book, .block-forum, .block-blog, .block-statistics-0, .block-aggregator").attr("role","navigation");
$("#footer-message").attr("role","contentinfo");
$(".node").attr("role","article");
$(".block-system").removeAttr("role","complementary");
});
}
I have attached screenshot showing the roles with various features and blocks enabled.
Stuff I am not sure about:
Great Job
This is the approach taken with the WP patch here:
http://www.standards-schmandards.com/2009/wai-aria-landmark-roles-in-cms...
I was associating it with the blocks, as there are blocks associated with modules that do have different roles you'd want to highlight. However, it would take a bit of time to identify which blocks you want to associate with what role. The JS approach does give you the flexibility to add it on top of other modules though without further module changes which is nice.
I'd stay with "navigation - The area that contains the navigation links for the document or web site." - http://www.webaim.org/techniques/aria/
The definition is pretty vague and doesn't give a lot of info there does it. Not sure that having these scattered about is really helping establish landmarks for understanding a document. Main navigation & main content & related content are probably better.
"Informational child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on."
Probably not actually. I had initially read this as the content footer (like email to a friend, print, and digg stuff, however that's not right).
Mike
OpenConcept | CLF 2.0 | Podcasting
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
Regarding blocks, I have
Regarding blocks, I have identified the main core "navigation" blocks - menu, user-1 etc, the search block and then everything else is complimentary.
I'm thinking node terms and links are navigation as well, and the pager? Maybe also, it is a list of links that are important.
You can see my implementation live on the starter themes demo sites http://adaptivethemes.com/starter-themes/?theme=genesis_SUBTHEME
This is the dev version of Genesis 6.x-2.x
ARIA in Genesis theme
I read that the Genesis theme has ARIA Roles built in. I can't find them. I looked for a javascript file and I looked in page.tpl and html.page.tpl. I downloaded the Genesis theme for Drupal 7. Is it in Core?
Thanks.
Alabina
ARIA in Genesis theme correction
I meant to say are ARIA themes missing from Genesis 7 because they are built into Core?
It is used in page.tpl.php
If you look in genesis/genesis/templates/page.tpl.php
<nav id="secondary-menu-wrapper" class="clearfix" role="nav"><header id="header" class="clearfix" role="banner">
<nav id="main-menu-wrapper" class="clearfix" role="nav">
<div id="main-content" role="main">
<footer id="footer" role="contentinfo">
There is a lot more than can be done with ARIA than landmark roles though.
--
OpenConcept | Twitter @mgifford | Drupal Security Guide