Global Accessibility Awareness Day

By Steve Barnett

Yesterday was Global Accessibility Awareness Day. Accessibility means making sure that people can get all of your content quickly and easily, regardless of the any disabilities they have, the device they’re using, or the type of connection they’re on. The Flow team took time out to do some of the participation activities (Go mouseless, enlarge your fonts, use a screen reader) that the GAAD site suggests. We came away with a renewed appreciation for making our work accessible. That means keeping this in mind from the Content Strategy phase all the way through to front-end development. Here are some more details of the things we found out.

Go mouseless for an hour

We put aside our mice and trackpads, and used only our keyboards to interact with our computers. Figuring out the basic ways to navigate was relatively easy, but time-consuming. For things that we couldn’t figure out, we found that we had to know the right technical terms when searching otherwise we wouldn’t find the search results you needed.

It can be very difficult to target a particular link. The tab order of links may take you all around the page, but you might never hit the link you actually want. Most pages have a lot of links, which only makes it worse. Google calendar was particularly guilty here: you can tab all around the calendar, but not individual entries. It seems like the only way to edit an entry directly is to search for it first. On top of that, quite a lot of sites don’t use :focus styles: you can’t see what you’ve got highlighted, so you don’t know what you’re clicking.

We use Trello for a lot of our projects, and it fares pretty well without using a mouse or trackpad. There’s a lot of functionality available via the keyboard: moving around and adding dates and labels, but a few thing like editing descriptions are either missing or hard to find.

Enlarge your fonts

We upped the font size on our browsers to 200%, and then went about our usual work. Composing emails in Gmail was easy enough, but the compose dialog blocked the rest of the page: you had to either finish or dismiss the new mail before you could do anything else. Calendar was again very difficult to use: the large text made it difficult to see what events were.

Across a couple of sites, we found that having very large text caused problems when you have multiple scrollable areas on a page: you end up scrolling sections that you didn’t mean to.

Surf the web with a screen reader for an hour

Internet users with poor or no sight use screen readers: they’re programs that speak the contents of the screen, so that you don’t have to see it to interact with it. Most of us in the office use Macs, so we tried VoiceOver, the screenreader included in OS X. The voice is a little weird, often pronounces things incorrectly, and isn’t always very clear. We were surprised by how much detail it goes into: there’s lots of status and location guidance. On the one hand that’s great because it gives you lots of information that’s otherwise only available visually. On the other hand, it can become overly long, and sometimes use technical terms, talking about “blocks of HTML content” for example, that could potentially be confusing.

Headings that used HTML heading tags (like <h1>) were very useful for moving around the content, and it was good to be reminded that they deserve special attention. We also had a very good reminder of the need for clear alternative text for images via the alt attribute. A lot of image alt text is something like product_name-230x640. This has its punctuation and numbers read out individually, and doesn’t do what it’s supposed to: be an alternative to the image, conveying the same information.

Lessons learned

  • Make sure you can navigate through your site using just the keyboard. It should be clear where you are on the page at all times. You can use :focus styles in CSS to do this.
  • Be wary of multiple scrolling areas on one page.
  • Link text should be descriptive and unique on a page.
  • Make sure headings are marked up appropriately: <h1> for the main heading, <h2> for the next level, and so on.
  • Add good alternative text to all your images: it should convey the content of the image.

Further reading