It’s not rocket science. You can already get good results and break barriers with just a few basics.

Birgit Samer

Aug 16, 2020·7 min read

There are 1.1 billion people with disabilities living on the planet. Before the lecture “Accessibility & Multi Screen Design” by Eric Eggert in my master’s program Content Strategy at the FH JOANNEUM I had no idea about this number. And: Accessibility of the web matters to all of us. Disabilities are as diverse as humans and range from blindness, low vision, learning disabilities to (temporal) physical disabilities after an accident. Every one of us may be affected by such a disability in his or her live — and we still want to be able to access the web as usual, don’t we?

For me as a journalist the Convention on the Rights of Persons with Disabilities (CRPD) further highlighted the importance of accessibility issues. Article 29 is about Participation in political and public life. It says that

“States Parties shall guarantee to persons with disabilities political rights and the opportunity to enjoy them on an equal basis with other”.

People must have access to information in order to be able to participate in political and public life. Journalists and news outlets have a clear and important responsibility here. We have to make our articles accessible to everyone.

Why mobile accessibility matters

Making the desktop version of your website accessible is fine and important — but not enough. We can’t carry our desktop screen in our pocket, do we? The journey leads to mobile paths: Already in 2015, the number of mobile-only internet users exceeded desktop-only in the U.S. as a study by comscore shows.

I recently viewed an interesting talk by Marcy Sutton about “How to Win at Mobile Accessibility”. Sutton is a Lead Software Engineer on the Developer Relations team at Gatsby, a remote startup creating accessible websites and webapps. Previously, she worked as a Developer Advocate on the axe-core team developing web accessibility testing tools, and as an accessibility engineer at Adobe.

Sutton named “lots of great accessibility features” on iOS, like voiceover, dictation, zoom, invert colours/grayscale and switch control. Android has a similar set of features. That’s great, but it’s not enough to rely on those accessibility features of Apple and Google. We need to set the necessary preconditions for our websites in terms of mobile accessibility.

Mobile barriers

And that’s not everywhere that easy as Sutton explains:

“Accessibility is easier to get right on native platforms”.

If you’re developing for iOS, tools around that are helping you to figure out when you’re doing wrong. In mobile webspace it’s “quite harder to get it right” as these tools aren’t available, Sutton points out.

However, it should be our target to make spaces for accessibility better in mobile web for everyone. Sutton lists a few barriers here right now:

• Locked-down zoom and hijacked scrolling: Both of these techniques make it really hard for a user to navigate a mobile website.
• Text is too small: Typography can be on mobile sites due to scaling down not so good as on the desktop version. And if zooming is locked-down, the user can’t zoom in to be able to read the text better. Yeah, the user could increase zoom on the operating system level but then he needs to go back to his settings. “You’re putting a burden on the user”, Sutton warns in her talk. And it makes sense — I mean, would you go back to a website which puts a burden on you if you don’t really have to? Suttons suggestion: “It would be better if text was bigger or if there was button where you could increase the text on a mobile device”.
• Visual clutter: We’ve all experienced at least one of those websites: They are so cluttered and overwhelming that you don’t know where to go. There is no visual hierarchy and no breathing room. Suttons advice: Minimize the cognitive load as the amount of stuff on a mobile website could make it hard for someone to focus and decide where to click on. “So, if we give things more breathing room and avoid the idea of visual clutter, that can minimize someone’s cognitive load and make it easier to navigate the website and then to other things, because you freed up brain power”, Sutton explains.

• Ambiguous visual icons: The floppy disc as icon for saving — makes sense to many of us. But, how can we be sure that everyone thinks the same way as we do? We can’t. “Icons might make perfect sense for designers, but some other people might not know what those icons mean”, Sutton explains. What would help? If you use visual icons, consider adding a text label underneath.
• Conflicting gestures: Sutton names a swipe interface as an example. A user can’t navigate this interface if he has a screen reader running. Her Recommendation: Add some other kind of affordance like a button or some other way for a screen reader user to be able to navigate the interface.
• Fragmentation: There are so many devices and different sizes. That can be quite overwhelming, but: “Part of the challenge is that we need to accept that things need to be more fluid and actually adapt to different device sizes”, Sutton points out.
• Spotty HTML5/ARIA Support: Support on mobile devices for that is less mature than for desktop. For Sutton “something we have to deal with, have to look for support and test it and then report back to these mobile browsers”.

How to win at mobile accessibility

Yeah, there seem quite many barriers — and so many things we can’t control like devices and user settings. Anyway, no need to get frustrated. According to Marcy Sutton there is still quite much we can do:

“We control the interfaces that we actually design and put out there in terms of how they look”.

And there’s definitely a big need to do something as we’re competing against the browser’s reading button. The “Reader view available” button is the most used button by a blind friend of Sutton as it strips out all the unnecessary links and content and then floods up just the text. So:

“Be aware that some accessibility users might skip your pixel perfect design and responsive design completely. Simplifying your web page and adding skip links and all of these accessibility features will keep somebody actually on your site and reading the content”.

So, how to keep the user on our site? UI patterns can make the difference as Sutton points out. Here are some quite easy to implement hints from the accessibility specialist:

• Use buttons: A div element is not sufficient here as a user relying on a screen reader won’t be able to use that button. Suttons advises to use a real button. A div element on the other hand is a generic HTML element that doesn’t have any semantics and isn’t reachable from a keyboard or screen reader.

• Label buttons: After you converted the tag from a div to a button, it needs a label. There are multiple ways to add labels. Sutton suggests to add the so-called Aria label and then the name of the button.

• Touch targets: Sutton defines them as “the actual space for users to actually tab on things on your mobile sites”. By adding a more generous padding and letting buttons take out more of the screen you make it easier to hit these targets. Especially on smaller, mobile screens users benefit from that.
• Craft source and tab order: For example, if you turn three columns to one, put the most important content at first. Your sidebar comes after your main content.
• Hidden links shouldn’t be reachable: Sutton often observes problems on screens that are not visible anymore, but haven’t actually hidden the content that’s off-screen. So, a screen reader user can still navigate through all of the off-screen content. Sutton uses two HTML attributes in order to hide it from a screen reader. So, she is able to control craft source and the tab order of the page.

After improving the mobile accessibility of your website with UI patterns, test it with real people. Because, as Sutton says:

“Optimize for humans”.

And: There are still not many testing tools for mobile accessibility than for desktop sides. Read here more about existing Free Mobile Accessibility Testing Tools. If you know some others tool or want to share your experience about testing mobile accessibility, I would be happy if you leave a comment underneath this article 😊.