Accessibility: Five steps to start now

Thursday the 18th of May is Global Accessibility Awareness Day.

As part of our effort to promote this event, we’ve put together five steps that anyone involved in web development can take to make the internet a more inclusive environment for all. This guide is by no means exhaustive, but can be treated as a starting point for anyone wanting to learn more about the subject.


#1 Ensure your site has sufficient colour contrast

Ensure sufficient colour contrast

When designing a website there are plenty of tools available, such as http://webaim.org/resources/contrastchecker/, which can provide instant clarification as to whether your chosen colour scheme meets accessibility guidelines. Be warned that the font weighting can make a difference, so where possible avoid the use of narrow, italicised or cursive fonts.

Full documentation on sufficient colour contrasting can be found here

#2 Use alt text for your images

Use alt text for your images

Many people with visual impairments are reliant on screen readers when navigating web pages. If you’ve never used one, I’d urge you to give it a try (Command-F5 on a mac, and a guide if you need it, or via a download for Windows). I think it will give you a new appreciation of how frustrating the experience can be when accessibility hasn’t been considered as part of a site’s design.

One of the most common oversights I come across on websites is a lack of alt text added to images. It’s an easy mistake to make if you’re not aware of the impact of including this label. Screen readers rely on this to provide the user with context as to what an image conveys. Rather than reading out a nonsensical image location, or filename, a short description of what the image conveys can be read out to the user, which makes a big difference in understanding content. It also has no impact on the way the image will be rendered, and is good practice in general. Here’s an excellent article on the subject in more depth.

#3 Go easy on the graphics and transitions

Go easy on graphics and transitions

Sometimes simple is better. A well designed site shouldn’t resemble a high school Powerpoint presentation complete with slide in transitions. To an individual who has difficulty operating a mouse, a moving target can present an unnecessary challenge. Ask yourself whether an effect really adds value to your site, and whether the benefit outweighs the risk that you might be putting some users off using it.

#4 Hover/focus states for all clickable elements

Hover and focus states for all clickable elements

Another simple improvement to make is to ensure that all clickable elements on your site have a hover and focus state. A hover state provides a visually impaired user a clearer indication that they are interacting with the element that they intended to, and also makes it clear that clicking it is a call to action.

A focus state is a critical feature for keyboard users, who for any number of reasons cannot operate a mouse. When navigating a page via the keyboard it can be all too easy to lose where you are on the screen. For this reason it’s critical to test your application using only a keyboard, to ensure that all clickable elements can be navigated to, and that each has a focus state that is clear to a user.

A typical submit button in a standard, hover, and focus state, respectively

A typical submit button in a standard, hover, and focus state, respectively

For more information on effective focus indicator design, I recommend this blog as a starting point

#5 Test from different perspectives

Test from different perspectives

This one is less of a development technique and more of a mindset shift. By approaching design, UX, development and testing from a range of perspectives, the chances are, a more accessible site will organically evolve. I can’t recommend enough downloading a few free tools to help you with this. For me, the Chrome extension ‘Accessibility Developer Tools’ is a must-have in providing an insight into how user’s with a variety of impairments might find navigating your site. This will flag up any contrasting shortfalls, along with other accessibility violations like missing alt text (see above). There are other tools available such as the NoCoffee vision simulator, which is genuinely interesting to use, as filters are applied to your website to represent how someone with a wide range of visual impairments see your site.

 

If these five steps have given you a taste of how easy improving in this area can be, I would recommend checking out what other institutions have made publicly available in this space. The BBC, as an example, publicised their guidelines for anyone to reference, so feel free to borrow a few ideas and best practices from those leading in this area.

 

We’re always striving for improvement. So if you have anything in mind, or any ideas how to make our site more accessible we’re happy to hear your feedback. Let us know at hello@red-badger.com

Greg Dorward

TEST LEAD

More from Greg