Responsive Design & Accessibility
What is responsive design?
A basic explanation of responsive design is that a website should look good and be readable on every screen size and screen orientation. Of course, there’s a lot more to it than that, but we won’t get into that right now. You’ve probably seen some examples of bad responsive design.
- When you load a website on your phone and everything is too small to read and they won’t let you zoom-in. It probably looks great on an 800×600 monitor!
- The website that detects you’re on a phone so they redirect you to something like m.domain.com and it’s a boring looking copy of their desktop website and probably has some missing information.
- The website that tells you to flip your phone because the site only works in one orientation. How dare you use landscape mode!
- When you decide to split screens on your laptop and suddenly the content you were reading disappears.
- You have a high resolution monitor, or are on a phone, and try to zoom in but content, design, and/or the menu changes.
Screenshots of a non-responsive website
Click on the photos to enlarge.
What WCAG says about responsive design
All users, no matter the screen size, should have access to the same information as other screen sizes. A user should never have both a horizontal and a vertical scrollbar.
- List item #1 breaks just about every rule in WCAG, so we can’t feasibly get into every detail on this one. A few examples are Criterion 1.4.4 Resize Text, Criterion 1.4.10 Reflow and probably a hundred other things. Chances are, this site was built a long time ago before accessibility was enforced.
- A website like List item #2 also breaks the reflow rule in the sense that it’s unlikely that the content will be the same. It’s also important to note that Google will ding websites that redirect to a separate mobile site, so the SEO will be bad too.
- List item #3 above is mentioned in WCAG Criterion 1.3.4 Orientation.
- List item #4 and #5 above also break the reflow rule. The same content needs to be accessible to everyone on any screen-size, which includes when a user zooms in.
Understanding users
Once you understand how people are using websites, you’ll be able to make better design decisions. A long time ago I used to be of the opinion that if a website didn’t have enough space on a landscape iPhone 5 then they should just turn their phone!
Years later I saw a video of someone who had no use of their arms or legs have a phone attached to their wheelchair. It was angled to be landscape. They were using a device on the arm of the chair to control the navigating on the phone. This person had no way to rotate the phone. Having that small piece of information drastically changed how I develop for mobile.
According to WCAG’s Criterion 1.4.10 for Reflow, the minimum scrolling height of a landscape phone should be 256px. As an example: Any website with a large sticky navigation will not provide enough space for users to see the content. So I starting implementing a navigation that faded up when the user scrolled down, and reappeared when they scrolled up.
Mobile first
The idea of mobile first is that a designer will design a website in a way that gives mobile users the best experience, then the designer will work up to desktop designs. What should happen is that the content should be the exact same, and in a natural order. If we happen to get a design that follows those rules, then as developers, we are happy to build the site.
From our experience this doesn’t happen. We often receive a file from the client that has a mobile and desktop design that are either wildly different from each other, or has the content re-ordered in such a way that would mean having to build out sections multiple times and hide/show on different screen sizes. Worse yet, the designs are more meant for print and not web, so they only look good on desktop and nothing else. Our in-house designers would instead design the Desktop version, because that’s our client’s main concern, and get approval. Once 100% approved we would build the site and use breakpoints to make sure the site always looks good. Then our designer would review and make any adjustments needed, without reordering the content.
Clients tend to only review mobile and desktop, but we have to consider every space in between or above. That means obscure devices or even large TV’s or projectors. Often times clients don’t like the way some text will wrap on their particular device. We could add <br> tags inline that are only visible on certain devices, or make other adjustments, but it’s better to try and explain the concept of responsive design.
Responsive design is great for user experience and SEO. But, hopefully you have a better understanding of why a responsive design is needed for accessibility too.