Back to posts

June 04, 2014 Responsive web design and accessibility - A marriage made in heaven? Tracy Godding, Head of UX Research

Responsive web design and accessibility - A marriage made in heaven?

When we recently carried out an accessibility audit of our new responsive job board platform we were particularly keen to learn how the new platform design would perform compared to our previous version.

Accessibility is an important issue in web design. Every individual using the internet has the right to access same information on the web and to have a positive and equal experience. Accessible design is about enabling access for every user, regardless of disability and technology. In a similar way, responsive web design also aims to broaden access to information, shifting design focus beyond the ‘normal’ desktop experience to ensure availability across an ever expanding multitude of devices. Both accessible design and responsive design provide a flexibility that helps to make the web work for everyone.

Some responsive design techniques can introduce some barriers to accessibility. For example, a website using responsive techniques (such as a fluid grid, flexible images and media queries) built entirely using JavaScript would present a number of accessibility challenges. We built the new version of our job board with a fundamental adherence to progressive enhancement - a strategy for web design that emphasises accessibility.

It is important to be conscious that every design decision has the potential to include or exclude someone. Even something as small as deciding the colour of text has the potential to make that text difficult to read for a large group of users. Designers should think ‘inclusively’ and consider how a person with a disability would navigate and interact with a site’s content. Retro-fitting accessibility can be time consuming and costly, designing responsively and implementing progressive enhancement techniques can help to avoid this.

Responsive web design creates a consistent experience which is better for job seekers as many users carry out tasks across a number of different devices. With one, consistent user experience, information and navigation is easier to find, consistently placed and easier to learn. As web developers it also makes it easier for us to maintain a quality user experience, achieving the high standards of accessibility and usability we were aiming for.

The results of our accessibility audit found that using a combination of responsive design and progressive enhancement resulted in a much more accessible website. Content flows nicely over different screen sizes, text and page zoom work well across a range devices and overall readability is improved.

Our design team are very accessibility aware. Our first – and most important - design principle is to design products that are easy to use, relevant and accessible. We want our products to be inclusive, regardless of ability, technology or context.

There are steps that need to be taken to achieve a certain level of accessibility:

  • Think and design inclusively
  • Carry out regular accessibility audits
  • Use coding techniques such as progressive enhancement and ARIA
  • Carry out disability user testing (In our case we asked AbilityNet to run a review with a screenreader user)

Whatever design methods are used it is important to embrace accessibility and be inclusive in your design thinking right from the start. There will always be accessibility issues that require attention, such as colour contrast, visual hierarchy and readability but responsive design forces you to focus on the core foundations - content and hierarchy - and get that right. That in itself is a big step towards making an accessible site.

In Part 2, I’ll be talking about the issues that need special attention in a responsively designed website.

Suggested resources