Incremental Accessibility

You have a website. It looks good. You love it. Your friends love it. Your cat thinks its "just okay" but they're a cat, they don't care about the web.

But, it's completely inaccessible. The heavy page weight caused by all your funky animations mean it takes long to load on a mobile device. Your potential employer whose vision is poor can't make out the contrast between your background and your body text to read your CV. And myself; whose hands occasionally don't work well, can't navigate through your content using my wicked cool keyboard skills.

It can be overwhelming when you realise that a large percentage of the population may have a stressful experience with something you have built. You want to make it better but your line manager says its not the priority. Your client just doesn't have the budget and even if they did, you don't know where to start.

The first thing to realise is that it doesn't have to be done all at the same time. In fact, throwing a bunch of ARIA roles at your markup without thought may hurt rather than help.

Do it incrementally. Right now, you're inaccessible. Tomorrow, your images might have descriptive alt text. Next week, your design might have an improved contrast ratio. Next month your header navigation might have a more usable structure, with better headings and links with active and hover styles. With each iteration, more and more people could have an effortless experience each day.

Getting started with accessibility

Use your website with a screen reader

Listen to your website with VoiceOver (OSX) or another screen reading device like JAWS (Windows). Do it a few times, note down what doesn't sound right. Then close your eyes and listen again.

  • How is your content structured? Make sure each block of content has a descriptive header.
  • Do you have to wade through 27 navigational items before you get to the main content? Include a "skip to main content" link!

Accessibility compliance checkers

Use a command line tool like a11y or a script like tota11y to check whether your website complies with the basic accessibility tenets. Go through the accessibility checklist from the a11y project.

  • Do all your images have their appropriate alt tags, so someone can still understand what the image you've included is, even if they cant see it?
  • Do your form inputs have a label linked to it so I can tell which box takes my username and which takes my password?

Convince your boss

When it comes to accessibility, some people need a business case. This is not something this post will cover. The most I can say is that an accessible website means more people can have a positive experience with your website which can in turn lead to increased revenue.

Even if you do have the go ahead, where do you start in the code base? When I start working on a project that is already well into its existence, I set a rule of "if I touch the code, I can make it better". If you're adding things to your navigation, now is a good time to make it accessible. If you haven't been given the go ahead to start working on accessibility, this is an excellent way to sneak it in.

Thinking accessibly

No self-professed accessibility expert drank from a golden chalice and knew everything they needed to about accessibility. Like anything, these things take time.

Something I like to do is rate the experience I have on each new website I visit. Can I use it on my phone? How long did it take me to get the information I need? Is the content clearly labelled, is it easy to understand? You need to learn to train your brain to think about things from a different perspective.

By implementing carefully considered accessibility bit-by-bit, over time it will become second nature. Even better, you'll be able to build websites and applications from the ground up with an accessibility first approach. It's much easier to build something right from the beginning, instead of shoe-horning it in halfway through the process.

With each step, you'll be helping to make the web what it should be: accessible for everyone.