DJ Quilter

Front-End Developer

Doing Accessible Websites: Part 1

I’ve spent the last couple of months working on sites that need to be accessible. I was concerned at first that this would be overly complicated, and that my lack of knowledge would show me up. How foolish I was; accessibility is not always easy, but there are certainly some simple things that you can do to satisfy accessibility requirements.

The two sites that I worked on both had reports from the Digital Accessibility Center which produces large documents covering a wide variety of accessibility needs.

The following post lays out the most basic things that you need to do. These are less development tasks, than considerations. You should be able to naturally add these into your development process. More than anything else, they are habits that you should form.

Keyboard Tabbing

Ensuring that keyboard tabbing is right is really easy to implement, because all you really need to do is make sure your content is in the correct order. It helps blind users (who are not able to use a mouse).

I’ve seen various instances where markup is output in a strange order because of development issues. This should be avoided if at all possible, as it will produce an illogical tabbing order.

Your content should generally be ordered top-to-bottom and left-to-right (assuming your website is not using a right-to-left language, such as Arabic or Hebrew). You should also avoid changing the tabindex attribute of elements, unless you’re using either of the ‘special’ tabindex values, which are ‘-1’ and ‘0’.

Giving a tabindex a value or ‘-1’ removes an element from the default navigation order, but still allows focus to be set via Javascript. The value of ‘0’ allows you to add an element that you would normally not be able to tab to into the normal navigation order.

Image Alts and Link Titles

Again useful for blind users, image alts and link titles are read out by screen readers (software used by visually-impaired users). An image should almost always have an alt attribute which describes the image. Links should have titles to describe where it will take the user and/or what will happen when the link is ‘clicked’.

As mentioned, there are circumstances where an image shouldn’t have an alt attribute. If the image has a caption, alt text is not needed. Similarly, if an image is the basis for a link, and the link has appropriate title text, an alt attribute is not needed.

In these cases, the image should just contain an empty attribute as opposed to removing it from the element:

<img src="someimg.png" alt="">

This is really easy to implement, but does require some habit-forming if you haven’t done this religiously in the past.

Changing Context

This is related to link titles, and the most obvious example is where content is opened in a new window. If a change of context is going to disorientate a user, you need to let them know. Whisking them off to a new page is a prime example of this! All you need to do is add that information into the title attribute:

<a href="somepage.html" target="_blank" title="Goes to some page - Opens in a new window">Some Page</a>

Other instances of this might be modal windows or other interactive functionality which might otherwise be unexpected. Again there’s nothing complicated here, it’s just about taking care of your user.

Summary

These three simple things go a long way towards making your site more accessible. In my next post, I’ll go a step further by adding markup to your page which will make it that much more accessible for disabled users.

In the meantime, if you’re interested in learning more (or have your own questions) about accessibility, I would suggest you visit the Web Accessibility In Mind website, which has been very helpful to me in finding my way around accessibility.