Some notes after an accessibility review on a site

Events happening in the community are now at Drupal community events on www.drupal.org.
hefox's picture

In random order, rough, wrote as making changes. Most interesting is the aria-required and adding the h2's to status messages, etc.

If using beauty tips, beware of using non-100% opacity due to those with visibility issues.

Add h2's around messages and role alert.

  <ul>
<li role="alert"><h2>
<span class="status-message-box status-status"> </span> Your password and further instructions have been sent to your e-mail address.
</h2></li>
</ul>

I had put an (invisible to all but screenreaders -- element-invisible from that drupal 7 patch) spam text "Site Breadcrumb" for the breadcrumb, needed to h2 it.

Add this button -- not accessbile.

Site ig logo on front page needs to be

<

h1> if no site name (zen does this; 960 1.x I don't think so. Tested if there was a $title and did an h1 when none.).

Logo img title was "Home," needed to site name instead

* Required Entry
Using an asterisk in the label text is an excepted method for indicating required entries. However, another way (which can be used in conjunction
with the asterisk) uses the new aria-required attribute:

<input id="userName" aria-required="true"/>

The problem with this approach is that it will not work on older versions of screen readers. However, going forward, it is the correct method to use
for indicating required fields. It is also the only way which works if an asterisk is somehow not appropriate (such as when a design calls for a
graphical element or some other indicator which cannot be part of the label element).

The login block did not have a block header, so was not easily findable. Did a element-invisible h2 to fix this (in form alter, could also have given the block title and used accessibility module to hide it, but that would have been a db change and this was quickest)

Altered local task menu to give element-invisiable text Primary Task and Secondary Tasks, needed to change those divs to h2's.

Comments

Thanks for the accessibility review!

mgifford's picture

These are good notes.

Regarding the status message, this is the approach we've taken in Drupal 7. Why did you need the ARIA role is also needed as well?

<div class="messages status">
<h2 class="element-invisible">Status message</h2>
Your password and further instructions have been sent to your e-mail address.</div>

Which "Add this button"? The submit button? What isn't accessible about it?

There were some formatting issues where the html got interpreted so some stuff is missing.

I don't understand "If no site name (zen does this; 960 1.x I don't think so. Tested if there was a $title and did an h1 when none.)."

You were working from the Zen theme & not Garland from the sound of it.

I've been wanting to use WAI-ARIA sparingly as it it is still draft. I like the idea behind adding the new aria-required="true". But yes it's a question of how many versions back would you want to support.

Think most of the rest of these have been addressed in D7.

Thanks for the list. Am certainly interested in hearing more.

input fields

mysticjeff's picture

I would recommend going a little further on the input fields...

This gives you both forward and backwards compatibility since most of the older screen readers either by default or can be setup to read the title attribute.

repost

mysticjeff's picture

Sorry, forgot the tag around the code... LOL

<input id="userName" aria-required="true" title="username (mandatory field)" />

Ah sorry for unclear

hefox's picture

Ah sorry for unclear notes

Add this is one of those "Share this so and so" on digg, facebook, etc. buttons that appear on websites. Their website is addthis.com I believe. It's has a drupal module that uses it (the addthis module I beleve), but it is mostly a external javascript with internal links. It renders it's html without alt tags and labels on a text field.

I'm not sure if I needed both h2 and alert, I think he wanted both but it may have been an either/or.

I was working with 960 sub theme. In zen they have it set that the site name turns into an h1 when the title variable is not supplied ($title); this was not the case of the sub theme I was using (It may be in core 960 and the themer got rid of it, but not sure.)

Thanks

mgifford's picture

Thanks for these additional details.

I've used Add This before through the Add This Drupal Module.

It's got some accessibility issues for sure.

Yeah, The module uses

hefox's picture

Yeah,

The module uses off-site javascript from addthis.com, and they're the ones not on the ball about this. Here's a topic in the addthis forum about it: http://www.addthis.com/forum/viewtopic.php?f=2&t=1632

The only way around it is, instead of using the off-site javascript, make it not off site and alter it that way. However, my guess is there may be some legal issues with that, especially if it was included with the module.

Accessibility

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: