An Accessibility Makeover: Bay Area Association of Disabled Sailors

The Bay Area Association of Disabled Sailors is a small, volunteer-run non-profit in San Francisco that provides sailing programs to people with a variety of disabilities. This video explains their impact better than I can, so go ahead and watch it. I’ll wait.

When I started volunteering with BAADS they had a web site, but it had several problems:

  • The site wasn’t accessible to members with certain disabilities.
  • They couldn’t update content themselves and had to pay the web designer to do it.
  • Because of the expense of updating they tended to wait until they had a batch of updates, so content was often out of date.
  • The visual style was heavy and cluttered, and not what they considered their best representation.

Screen shot of the old site -- outdated layout and style with noisy background, heavy drop shadows, cramped text, and Flash animations.

Through the 1:1:1 program at Salesforce, where 1% of each employee’s time can be taken as paid time off to volunteer, I built a new site for BAADS to help them serve their members better and showcase the great work they do.

Screen shot of the new site, featuring readable text, clear calls to action, and dramatic photography

Accessibility Issues

As is often the case, the accessibility issues weren’t obvious to a sighted mouse user. But listening to the site in a screen reader was another story. (Pro tip: listen to your web pages. It’s not enough to just proofread them.) Here’s what the old site sounded like to VoiceOver.

Why the gobbledygook?

  • HTML table-based layouts caused the screen reader to announce the columns and rows, and enforced a poorly structured content order.
  • Images used for text in the heading and menu items had no alt attribute specified, causing the screen reader to announce the file names.
  • The image for the Donate button had an alt attribute specified, but it didn’t say what the button said.

If that wasn’t confusing enough, none of the navigation menu “links” actually went anywhere: hovering over each item triggered a JavaScript-generated menu with the real navigation. But they were inaccessible by the keyboard, so screen reader users and sighted keyboard-only users couldn’t navigate past the first page.

There were also additional problems for screen reader users:

  • BAADS used Google Calendar, which doesn’t mark up content correctly for screen readers, for their event calendar.
  • The membership form did not mark up field labels correctly. (It also had an unintuitive workflow even for people who could see it.)
  • Many headings and other important landmarks for screen reader users weren’t semantically marked as such, which made it harder to understand the content.

The Redesigned Solution

BAADS needed a content management solution almost as badly as they needed an accessible web site. Both Drupal and WordPress have made good progress on accessible solutions; I went with WordPress because I was most familiar with the platform and because BAADS wanted a blog. I simplified the information architecture and redesigned the layout, adding a feature photo and clear calls to action on the front page. Graphic designer Grant Anderson provided the updated visual design, and I built an accessible WordPress theme with logical content order, semantic markup, and full keyboard accessibility.

Here’s what the new site sounds like.

Other features of note:

Implementation Challenges

WordPress does a good job of generating semantic markup, but it has a couple of default behaviors that are problematic for screen reader users. One is the automatic titling of menu links with the same label as the link. This causes screen readers to read the link value twice: for example, “Link: Home. Home.” The Remove Title Attributes plugin removes this audial clutter. The other issue is that the menu item for the current page (e.g. “Home” when you’re on the home page) is distinguished only through visual style, which has no announced equivalent. This can be confusing for screen reader users, who can’t tell if it’s a link to the current page or a different one — particularly if the page title doesn’t match the menu item label — and it also prevents the site from meeting WCAG 2.0. I don’t have a good solution for this yet.

It was alarmingly hard to find plugins for the event calendar and the membership form that generated accessible markup. This shows both the good and bad side of the WordPress plugin ecosystem. It’s so easy to write plugins that the barrier to entry is low, which is great if you don’t know how to code, because you can find a plugin to do almost anything. But the barrier to entry is so low that you can also write plugins if you don’t really know how to code, so there are many frequently downloaded, highly rated plugins available that generate terrible markup by default (I’m looking at you, Contact Form 7). Joe Dolson’s My Calendar event plugin stands out here as a shining example of the good. I gave up on using a plugin for forms and hand-coded the contact form instead.

Implementing the background also turned out to be a bit of a challenge. Some of the pages are very long, extending beyond the background image. The water gradient eventually reaches a solid color that is too dark to read the text against, so it couldn’t be the background color (in case images are turned off). The solution was to take advantage of CSS 3’s ability to use multiple background images: one with the water gradient, plus a single pixel image with the dark blue. Browsers that don’t support multiple background images and users with images turned off get a light blue background color with sufficient reading contrast.

Next Steps

So far feedback has been great: no members have reported problems accessing content. This is a big step up from before, when BAADS’ Commodore at the time had to ask whether something was on the web site because he couldn’t access the content with a screen reader. And several members have told me that they now feel good about referring people to the web site for more information.

BAADS has also taken advantage of the roles provided by WordPress to set up content managers for different areas of the site to make it more manageable. A drawback to this is that without understanding the need for semantic headings, lists and link text, it’s easy for content managers to create less accessible content. They don’t realize that selecting a sentence and setting it to bold doesn’t actually create a heading, or that “click here” isn’t useful link text. This is a training issue.

There are a couple of things I still want to fix, including implementing Terrill Thompson’s jQuery solution for skip links. [UPDATE: Did that, works great!] I’m always learning new ways to improve things. But even without any additional changes, I feel good about my work on the BAADS site and what it’s meant to them.

March 26, 2012 · Tags: , , ,


2 Comments »

  • Joe Dolson says:

    Hi, Shannon – Thanks for highlighting my “My Calendar” plug-in “as a shining example of the good” — that’s a comment I certainly appreciate.

    To be fair, the code still has a couple of warts that I need to resolve – but thank you, sincerely, for your appreciation!

  • Shannon Hale says:

    Hi Joe — Your plug-in was well above the others I looked at, warts and all. Thanks for all your hard work, and also for the tips you emailed later!

RSS feed for comments on this post. TrackBack URL

Leave a Reply