Designing for Users On-the-Go: How to Make Your Website Accessible on Mobile Devices

A woman in a coat and scarf walking in a city while holding a cup of coffee and reading her mobile phone.

This is Part 2 in our Accessibility Series. Read Part 1.

Accessibility is a critical part of website design. Prioritizing accessibility ensures that all visitors to your site have a productive and pleasant experience, regardless of their physical abilities or means of accessing the site.

Our last accessibility-related blog post covered the levels and principles of the W3C’s Web Content Accessibility Guidelines, or WCAG, which establish a single standard for web accessibility. While these guidelines are an excellent starting point for learning about how you can make your website more accessible, there is another essential dimension to accessible web design: the mobile experience.

There is no mobile-specific version of the WCAG, but there are certainly ways to consider your visitors’ mobile experience through the lens of WCAG principles. And with 53% of all web traffic coming from mobile devices, it is becoming increasingly important to create great mobile experiences for your website visitors.

In this article, we’ll walk through all the ways that your website experience on a mobile device is different from a desktop or laptop, as well as cover how you can use the principles of accessible web design to ensure that your users are able to effectively and efficiently navigate your site using their mobile devices.

How is the mobile experience different?

1. Screen Size

Screen size is perhaps the most apparent difference between navigating a website on a mobile device versus a more traditional desktop. Consider this article for instance. If you’re reading this on a laptop or desktop, you can likely see the title, several paragraphs, and more on your screen.

However, if you’re reading this on a mobile device (such as a smartphone), your view may be limited only to this paragraph. Though the total amount of content remains the same on both platforms, you can see less at a time on a mobile device, requiring more scrolling and a higher level of interaction with your device to finish the article.

Mobile visitors to your site will only be able to see small segments of your content at a time, and they will have to do more work to consume it in its entirety. Because of this reduced screen space on mobile devices, visitors may become disinterested or even fatigued more quickly, increasing their chances of leaving the site before finishing what they started out to do.

2. Context

Another aspect of the mobile experience that sets it apart is context. People carry their mobile devices with them everywhere and use them throughout the day. The same can’t be said for a laptop or desktop. Let’s use this article as an example once again.

If you’re reading this on a laptop or desktop, it’s likely that you have set aside some dedicated time to browse the internet, read, or research. You’ve likely planted yourself in one place with the intention to read this article in its entirety.

On the other hand, if you’re reading this on a mobile device like a smartphone, your situation is much more variable. Maybe you’re on a bus, in a coffee shop, or waiting in line at a store. You might need to put your phone away and come back to this article several times before you’re able to finish reading it in its entirety.

The mobile experience is subject to far more distraction. People using their mobile devices usually haven’t dedicated a specific block of time to perusing your site, meaning that other things are competing for their attention.

3. Device Capabilities

Ranging from smartphones, and tablets, to even wearables like smartwatches, there is a wide variety of types of mobile devices that people may use to access your website. Each of these devices has a different screen size, requires different gestures to navigate, and has a different operating system.

Another important aspect of mobile device capability is internet connectivity. Since desktops and laptops are usually anchored to a certain spot and are rarely used on the go, they have a more consistent connection to a network. In contrast, people use their mobile devices everywhere, whether at home, at work, in public, or in transit, making them more likely to experience connectivity problems.

Building for Mobile Accessibility

Now that we’ve covered all the possible pitfalls your users might encounter while exploring your website, you may be wondering what you can do to make their mobile experience better. While there are no separate accessibility guidelines for mobile devices, the four main principles of building for accessibility still apply.

(If you’d like a more thorough refresher on these principles, check out Why Accessibility Matters: Principles of WCAG Compliance.)

In this section, we’ll discuss how you can keep these principles in mind as you build your website for mobile users.

1. Perceivable

Perceivability means that users should be aware of all of the features and content on your website, with nothing hidden from them. This principle applies regardless of how users are accessing your website, meaning that a smartphone user should be able to consume the same content and use the same features as a user interacting with the site on a desktop or laptop.

To prioritize perceivability as you design for the mobile experience, account for the smaller screen size. What users can see on a smaller display will be different, meaning that it is very important to allow them to zoom in on text, photos, or any other media.

Consider text size as well. Users may have a more difficult time reading the same size font on a smaller screen, so it may be helpful to choose a different size for the mobile version of your site.

2. Operable

Operability means that users should be able to successfully navigate and interact with every element of your website with relative ease. This principle is especially important to consider in the context of mobile browsing since the gestures used are so different. While a desktop visitor to your site has access to a mouse or trackpad, keyboard, and scrolling wheel, a mobile visitor will (usually) be navigating the site entirely through touch.

It can be helpful to consider how you can make features of your website easier to navigate using touch on a mobile device. For example, consider the language you use on your site. While “Click Below” may make sense to a desktop visitor, “Tap Below” may be clearer to a mobile visitor. It is also essential to remember that some mobile users may have visual impairments or dexterity issues that may make it even more difficult for them to use a touch screen. Design with these individuals in mind, and your website will be more accessible to everyone.

3. Understandable

Understandability means that your site is designed to be audience-friendly, allowing them to get the full value out of their visit to your site. In the context of mobile usability, this means that users are able to easily navigate the site’s layout and access the content or features that they want to see.

Consider screen size and remember that mobile users can see less on the screen than desktop users, meaning that they will have to do more work to navigate the site. Make sure that menus, sidebars, and other features provide enough information to help users get to where they want to go. Keep content short for all users so that you can maintain their attention span and not overwhelm smaller screens.

4. Robust

Robustness simply means that the website should work for all people on all devices. While your website should obviously be compatible with all sorts of mobile devices, it is also important to consider how well a mobile user could interact with your site while using accessibility aids. For example, your website should work on a mobile device in conjunction with devices like external keyboards, screen readers, and other technologies that are helpful for those with disabilities.

Want more tips for website design?

Hopefully, this blog gives you and your team some insight into building for the mobile experience. If you’re looking for more guidance, we at PRI are here to help! Reach out to us today.