Skip to content

How to Improve Accessibility of Mobile Websites

Hashtags to Blog Post on Content Strategy

Most of us will be physically or mentally handicapped at some point in our lives. A broken arm. A tremoring hand. Bad eyesight. The aftermath of a burnout. You name it. And then, there are many of us who will be physically or mentally handicapped throughout their entire lifetime. These people face challenges in their everyday life that most able-bodied people can’t even think of. This, as well, applies to websites and web applications. Here’s how we can help everyone navigate the web.

What is mobile accessibility?

At “Beyond Tellerrand 2015”, Marcy Sutton, Accessibility Engineer at Adobe, speaks of the challenges disabled people face especially when using mobile devices. And to those in charge of creating content platforms, she gives advice on how to prevent these challenges.

But first things first. Accessibility, or “A11y” as people in that field call it (since there are 11 letters between the “A” and the “y” in “accessibility”), means helping people with physical or mental handicaps – or simply everyone – better use a piece of software. This can involve catering to screen readers, zooming possibilities, color contrast or tab navigation. Nevertheless, the need for assistance is as diverse as the barriers people experience in the web.

Barriers of using mobile websites

Marcy Sutton presents some of the most commonly found barriers of websites on mobile devices and how to tackle them as a website developer:

Barrier Solution
Text is too small for some to read
Display text in larger font or add button to enlarge text
Too much visual clutter / no visual hierarchy of website content
Minimize cognitive load by adding white space and less content
Ambiguous visual icons: the meaning of icons might be unknown to some
Add text label to icon describing what clicking the icon does
Conflicting gestures: e.g., swipe to next card doesn’t work with screen readers
Add another way to navigate, e.g., a button
Touch targets are too small, e.g., “X” of cookie banner
Make touch targets big enough to be able to hit with larger or trembling fingers, enlarge clickable part
Tab navigation doesn’t work properly on overlaying dialog windows
Disable elements in the background in HTML

What helps accessibility engineers?

Still, this is just a small part of what can be considered in terms of accessibility. In order to assist developers in taking care of those, a range of tools can be used, e.g., Accessibility Node Inspector, WebKIT, Firefox WebIDE or Chrome for Android.

Nevertheless, Marcy Sutton claims that by the time of her talk in 2015, the world needs more and better testing tools. She suggests that accessibility auditing tools should be improved in order to advise the developer on where he can still improve the site. Besides using the tools, getting direct (handicapped) user feedback is the best way to make the web more accessible on mobile devices.

Personal view on the talk about mobile accessibility

You don’t realize how privileged you are and how much you can do until someone points out what’s not a matter of course. Thus, Marcy Sutton pointing out a various range of barriers that especially occur when people with handicaps use websites on mobile devices really is eye-opening if you don’t deal with accessibility every day.

Her talk helps others to understand the way of thinking an accessibility engineer needs to perform. By presenting possible solutions in terms of mobile UI patterns, she also gives developers ideas at hand that they can directly start implementing. Small steps can already mean a lot for people with handicaps – this is her message that stuck with me.

What I’d be interested in checking out is if the tools she mentioned have improved within the six years since she delivered her talk and what can be used as best practice nowadays. Another takeaway for me is the fact how many tools exist already, not only in terms of accessibility tools for developers but also for people with special needs. I wasn’t aware of Android and iOS natively providing that many assisting technologies by default which I think is great since this also supports accessibility on mobile devices.

So let’s spread the word about how easy developers can help everyone properly use their websites and that it really doesn’t take much – to say it in Marcy’s words – to win mobile accessibility!