Posted by tofumidget on April 20, 2011 at 6:46pm
Hi folks --
At Drupalcon I mentioned we are doing a full-scale usability and accessibility of our redesigned website (under development at http://www.drupal-dev.naric.com/drupal-7.0/) Attached is brief, preliminary review of our development site. The Paciello Group reviewed three templates and a handful of pages for us. I'm still going through and making changes based on their recommendations. Some are more challenging for me than others. CSS I can fix. PHP, not so much. For example:
-Accessibility of the Feedback module
-"more" link in the aggregator feed (needs context)
-fieldset in the advanced search form.
Have you addressed similar issues in your sites? Any words of wisdom?
Comments
I took a quick look at the
I took a quick look at the site and from an accessibility perspective it looks very good. I will just add a few comments. As mentioned, some of the links could use some additional context in the title tag so that the link's meaning stands on its own. JAWS does not seem to speak the label for radio buttons and list boxes. When tabbing to these elements, only the caption for the radio button or contents of the list box is spoken. A title tag could be added to include this for at least the first item. As a Best Practice, we like to move focus to the results of a Search function. So, for example, if a Search produces no results, it is difficult for the user who is blind to know what happened as the focus goes to the top of the page. The Feedback element seemed to gloat around in the Naric spotlight area.
For people who use voice recognition, many users like to voice directly what they see as a link. For example, they may say, "Naric" but the link has a title that starts with RehabWire. Again, if we add more context to the title, we like to at least start the title with the beginning of the screen text, so that the person who uses Dragon, for example, can directly voice what they see and say "Naric".
These are just a few suggestions and as a whole it does look very good. Headings make it very navigable. It would be interesting to see example of more form elements and error handling.
suggestion for adding context to the "more" link in aggregator
use WCAG 2.0 Technique C7 & @title to add context to "More..." hyperlinks:
WCAG 2.0 Technique C7 (Using CSS to hide a portion of the link text)
* http://www.w3.org/TR/WCAG20-TECHS/C7.html
1) add the following to the default CSS stylesheet:
span.context { height: 1px; width: 1px;position: absolute; overflow: hidden; top:-10px;}
2) use both @title and Technique C7 to add context:
<a href="foo.html" title="More information on Drupal Accessibility">More<span class="context"> information on Drupal Accessibility</span></a>
this bit of CSS overwrites the contextual information and the @title
ensures that the full hyperlink text is available to users via
multiple mechanisms
That's very helpful!
I'll try that! What about "more" links that are automatically generated like those from the aggregator feed?
Already Fixed?
The more link for the aggregator feed is currently using the title attribute. (View this feed's recent news.)
Doesn't this provide enough context?
@dcmouyard on Twitter
Links & HTML are more helpful
Ok, I think you're meaning the link to this location here:
http://www.drupal-dev.naric.com/drupal-7.0/?q=aggregator/sources/2
From the sidebar:
<a href="/drupal-7.0/?q=aggregator/sources/2" title="View this feed's recent news." class="active">More</a>And this block should use the invisible text like we do in the Read more links in the blogs, so that it looks like:
<a href="/drupal-7.0/?q=aggregator/sources/2" title="View this feed's recent news.">More<span class="element-invisible"> about the NARIC Spotlight</span></a>Note that this is a problem in the sidebar blocks to recent blog posts here too:
http://openconcept.ca/blog
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
Fixed in Core Now
Thought I'd post a link to this issue here https://drupal.org/node/49428
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
class="element-invisible"
For Drupal 7 the best way to implement the C7 Technique is using the class "element-invisible". No additional CSS classes need to be defined.
You can also copy this file into your theme & customize it:
modules/aggregator/aggregator-summary-items.tpl.php
Presently it contains:
<a href="<?php print $source_url; ?>"><?php print t('More'); ?></a>If you are only using this in one place then you may be able to just insert the additional text as specified, however, if you have a number of different aggregators you may want to give feed specific context.
Either way it is possible without much code.
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
attachment
Hi @tofumidget,
I didn't actually find the attachment here. Can you post that or give a link to it?
-Brandon
www.pixotech.com
Oops! Sorry about that!
Here 'tis http://www.drupal-dev.naric.com/drupal-7.0/?q=node/39