Ultimate Guide To Accessible Responsive Web Design

Accessible websites are made to support all browser types and all users with disabilities. This is a big topic for the W3C and it’s growing in popularity each year.

Designing for accessibility is hard. There are lots of goals and requirements to consider. But even baby steps in the right direction can make a world of difference.

In this guide I want to consider the value of accessibility as it pertains to responsive design. Most web designers already go with responsive layouts, so if you can add accessibility into your workflow you’ll reach an even wider audience.

Principles of Responsive Design

The goal of a responsive layout is to function well on every single device. Regardless of screen size or resolution, your responsive designs should always be useable.

Focus on usability for every single aspect of your site. This may be easier starting with mobile-first because you’re designing for limited features, then moving up to desktop which supports a wider screen size.

During this process you’ll also be considering accessibility and how people might struggle to use your website on smaller screens. Should your mobile layout have increased text size? Should the buttons/links be larger and easier to tap?

There are certain topics you need to consider when designing a site that’s both responsive and accessible. Here are some major points to consider:

  • Typographic contrast
  • Providing enough white space
  • Columns and grids
  • Navigation behavior
  • Dynamic features(image sliders, videos, etc)

All of these features must be considered when creating a responsive and accessible site. The two subjects are not directly related, but when combined they create a harmonious UI that functions well for everyone.

Designing For Accessibility

There’s good reason to go through an accessibility checklist to consider how accessible your site should be. This could relate to basic features like alt tags on images for screen readers. It could also relate to color contrast for users with vision impairment.

Before designing anything you should first consider what type of accessibility problems you’re willing to support.

For example a common accessibility issue is users who do not browse the Internet with a mouse. In this case you might create keyboard shortcuts using attributes like tabindex. This way people without mice can browse the site with just their keyboard.

Now consider smartphone and tablet users who don’t have a mouse or keyboard. If your layout is responsive then it’ll fit onto these smaller touch screen devices. But is the layout useable?

Are all major elements tappable or swipeable? Are the tappable areas big enough for most users to have their tap registered in the right spot?

Certain areas of the page will need more attention than others. But if you’re willing to dip your toe into accessibility I recommend starting small and moving slowly. Do your best to support one feature at a time.

webaim accessibility website

I really like the WebAIM project because it has tools and resources that can help you find accessible interface elements. Also be sure to check out these related resources.

Navigation Structure

Whenever possible try to revert all navigation menus to be as simple as possible. It’s not always best to have multi-level dropdowns for responsive designs.

Some websites prefer breadcrumbs for multi-level page designs to make navigating the site a little easier. For example the NNGroup website has a top navigation for all major sections. But some sections like the Reports page includes a sidebar navigation for report categories.

nngroup layout neilsen layout

This gives users access to sub links when they’re needed, but hides them on pages where the links would be unrelated to the content.

Dropdown menus can work too. But you have to be more careful and considerate of users who may not be experts at browsing the Internet.

The sliding nav on Target’s website is a good example. On the desktop version of the site you get a large category dropdown menu.

But on smaller screens this menu converts into a single link labeled “browse by category”. When the user taps it’ll open a secondary menu with all the categories listed as links.

target shopping website navigation

This doesn’t work like a typical dropdown but instead converts into a side sliding menu. This effect works because each link has one large tappable area, rather than a small sub-menu icon added onto the main menu.

Walmart has a very similar accessible menu that moves through categories with a single tap.

If you’re building a navigation with keyboard accessibility then the navigation order is very important. This can be manipulated with CSS and there are plenty of guidelines to help with this task. The tabindex attribute is also very important for keyboard navigation.

Another technique is the skip to navigation link which many sites have for screen readers and browsers without CSS. This works best on smaller responsive layouts where the navigation tends to stay in one location(typically the header or footer).

In a similar vein you could add a scroll to top link that stays fixed at the bottom of the screen. This gives visitors a way back up to the top of the page wherever they are in the content.

If you’re looking for other navigation accessibility resources I highly recommend these related articles.

Touch Supported UI

Touch support is crucial for web accessibility. Some Internet users do not even have desktop computers, so their only way online is via touchscreen devices.

All elements on your site should be interactive by touch or swipe. Keyboard accessibility is just as crucial as touch support, although they target different audiences.

Many dynamic elements on a webpage require user interaction. Most of them have evolved from mouse clicks in a desktop/laptop environment.

If your layout is going to be responsive then your dynamic elements should be too. Here are some examples of dynamic elements that should support touch input.

  • Slideshows
  • Video players
  • Lightboxes/portfolios
  • Dropdown navigations

The hard part is gaining enough support across all touchscreen devices. The easy part is you can find tons of free resources that do this for you.

JavaScript has grown rapidly in recent years and many slideshow plugins come with touch support by default.

Swipeshow and Slides.js are two incredible options that are both free and supported by all major browsers.

swipeshow screen jquery layout

One thing to remember about smartphones is that they lack hover events. Tapping an element is generally considered an active event, so it’s important to handle the events accurately on touch devices.

Also think about how padding affects your navigation links. Extra padding on a link makes it easier for users to tap and navigate the site, but it also takes up more space. You should find that sweet spot for all your links where they’re big enough to tap, but not so big that they overtake the screen.

Content Rearrangement

Rearrange content so that it gives visitors a quick way to browse the site. Leave room for plenty of text with line height and big margins.

It’s also wise to think about contrast in your layout. Text should be very easy to read and easy to skim from a distance.

esquire magazine homepage design

The Esquire homepage is a decent example of high-contrast text with lots of padding. A screen reader could render this contrast moot, but the vast majority of users have CSS enabled.

Text contrast ratios are created by a fairly complicated formula vetted by the W3C. Instead of running this formula yourself just use a tool like the Snook Contrast Checker.

snook color contrast wcag checker

You simply enter the background and foreground colors into the fields to get ratio conversions. This will tell you if the color combo passes WCAG 2.0 compliance along with some metrics.

This is perhaps one of the easiest things you can test for your website. It’s super easy to check colors and it’s even easier to fix them for higher contrast. Just move the scrubber bars around to either darken the text or lighten the background(or vice-versa).

The last point I want to make about content is the organization of HTML. When CSS is disabled your users just get a raw HTML page. This may not be pretty but it’s often easier to consume from an accessibility standpoint.

How you write your HTML will affect how the layout appears when CSS is removed.

For example this Stack answer gives a solution with the sidebar appearing first in the HTML. This will look strange when CSS is removed. This solution is much better because the content HTML comes before the sidebar HTML.

It’s a very nuanced change and it might not affect the majority of people browsing your site. But it’s worth the effort for those few people who do benefit.

Moving Forward

The topic of responsive design is huge, and web accessibility is even larger. I’m hoping this guide covers the absolute necessities of both topics by explaining how they work together to improve usability.

Take it slow with these areas and be willing to branch out when required. But if you only follow the suggestions in this guide you’ll still have an incredible website that looks great and functions properly across the board.

And if you’re looking for more info about web usability you might like these related posts.

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.