NY Senate, Drupal, and Accessibility

I just noticed at Dries Buytaert's site that New York State Senate is using Drupal. It's now a very stylish looking Drupal site. Its' visual style is quite nice, but what lurks below the surface?

  • No skip links to bypass blocks of content for screen readers or keyboard-only users
  • Links not clearly identified
  • No hover or focus effects on links to assist in navigation and link identification
  • No level one header (h1) on home page to identify the page
  • Drop down navigation is useless for keyboard-only navigation. It leaves some content extremely difficult to reach, if not completely beyond reach.

Why the half measures? Making a site accessible is more work. Making a site this un-accessible takes an active effort. The default CSS property for a link is to have an outline. This site has a focus outline property of zero. It's turned off so that a link with focus is not visible. An active effort to remove one property that identified focus, without adding another in its place. The default link property has an underline text-decoration. This site uses links with no text-decoration. A property helpful for identifying links was actively removed without replacement. I'm happy to see a very good platform like Drupal being more widely used, and this site is a good place for it. Dynamic content, multiple RSS feeds, press releases and more. All features with which Drupal excels. Unfortunately this is a bad example of Drupal theming. A good layout, a good overall design, but no thought to accessibility. What could have been a beautiful site, unfinished.

Add comment

Comments

Douglas,
I have read that Drupal team put some accessibility issues on their discussion. Forgot the link, sorry.

And for your site:
1) With disable images, I can not see your list-style. 2) Your line-height is too close on my Firefox (Linux).
3) For the name-mail-website input label, is this the best practice to put label to the right? How is aural agent read it?

I haven't checked this in Linux, but the line height is reasonable on PC Firefox.

Best practice to have it on the right... Maybe not. The label should still be associated with the input box, but it might not be read as cleanly as it could be. I'll be testing and possible approving that.

Thanks for the warnings, I'll be checking all of these. This site unfortunately is a bit neglected. It's on my list of things to update, but I've been swamped. Soon.

FYI, on an outdated Fangs (fx extension), I found:

Heading level two Leave a comment Edit Name left paren required right paren Edit Mail left paren will not be published right paren left paren required right paren Edit Website Edit Submit Comment button Checkbox Not checked Notify me of followup comments via e dash mail

A complete redesign is on my to-do list, but I just haven't had time. This was built on a previous design, and inherited some code it likely shouldn't have. The next one will be redone from the ground up.

WCAG 2.0 recommendation said that label should be placed on the left/above immediately before the form input field. But most common WordPress theme put it on the right.

Hi,
I don't normally comment on blogs but your post was a real call to action. Thank you for a great read, I will be sure to bookmark your site and check in now and again.

Regards,
William.