What is responsive website design and how does it relate to accessibility?

Responsive design is about creating sites that change their layout according to the device they are being displayed on. for the most part, this means altering the layout to accommodate different screen sizes.

However, this doesn’t mean that responsive sites are automatically accessible. It doesn’t imply anything about the many requirements of making website accessible to people with different needs. For example images will need to have text labels for people who can’t see images, links will need to make sense when read out of context for people who use a keyboard to jump from link to link on the page. And for everyone – but critical for people with cognitive impairments – content needs to be well structured and easy to navigate.

In very (very) simple terms; a responsive website responds to screen size and an accessible website responds to a users’ access needs.

For example, in a responsive design, an image will resize itself to fit within the parameters of a smaller or larger screen; for accessibility the function of the image responds to the users’ needs by ensuring that function can be accessed in additional ways – other than just visually. For example, by having a text label attached to the image. So if the image is a search button; the text will say ‘Search’; if the images is a bar graph the information displayed in the bar graph will be available as text – perhaps via link to a different web page if a long explanation is needed.

Responsive design and usability

To be fair – for many developers – responsive design is about making a site ‘usable’ on different devices – not just viewable. So for example the site doesn’t just adjust to accommodate the smaller screen size of a tablet computer, it also modifies the navigation scheme to suit the needs of tablet users (this could mean for example, having navigation that can be accessed by the users’ thumbs while they hold the device).

From this point of view responsive design could have have something to offer for people using alternative devices to access web content; if the website itself is responsive to how the users’ access device works that is a good thing and helps accessibility in the wider sense of the word; for example, by automatically adding skip links to a page to help someone who is using a screen reader.

It’s about being flexible about how content is presented

Flexibility – is an important principle of accessible website design; content presentation should be flexible enough to accommodate the users’ needs; some of those needs are related to the device the person is using so a responsive website design is not the same as accessible website design, however, it can help make a site more accessible.Contact me if you need a responsive accessible website.

Get in touch if you would like a responsive, accessible website.

“…went above and beyond whilst working for me, as he often helped me with technical queries that I was unsure of or didn’t know how to do.” Nicola Beaumont

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course.