Mobile accessibility is more important than ever

Mobile accessibility is an important part of web accessibility, especially as more people are using mobile devices to consume and share content. 

Content creators and developers have an obligation to ensure that users of all abilities can access (and create) content, and this comes with some unique challenges for mobile devices.

So, let’s take a closer look at what mobile accessibility is, why it’s important, and what you can do about it.

What is mobile accessibility?

Mobile accessibility refers to the practice of making a website or app more accessible when it’s used on mobile phones or other mobile devices, like smartwatches, IoT devices, tablets, and dashboards. 

Why does it matter?

More people are using mobile phones to access and create content, including people with disabilities. One study from 2015-16 showed that 91% of people with disabilities use a smartphone or a tablet. So, mobile accessibility matters, whether you’re a content creator that wants to ensure people with disabilities can access your content, or you’re a developer that needs to make it possible for people of all abilities to create content.

We’ve talked a lot about web accessibility in previous articles, but mobile accessibility requires a unique approach to general web accessibility, because it has unique issues, like:

• Touchscreens
• Use in different settings (indoors vs outdoors)
• Different input methods (speech vs touch)
• Reduced screen size, compared to a PC or laptop

But I use responsive design

Responsive design is considered a best practice when creating content for multiple screen sizes. But it’s not enough on its own – some accessibility issues are better addressed by being responsive to user preferences and needs. We’ll get into some examples of these needs and what changes you may need to make, but first, let’s talk about how you can identify mobile accessibility issues.

How to diagnose any issues

Concerned your website or app isn’t up to scratch when it comes to mobile accessibility? The first thing you need to do is diagnose any issues that will need fixing.

Use a mobile screen reader to find out what it’s like to navigate your website or app and consume the content. It’s always better if you can test on real devices, but there are also some handy tools out there that can help shine the light on any issues. 

Check out more in our previous blog, 5 tools for checking mobile accessibility.

Common mobile accessibility issues and best practices

Developers should account for a range of disabilities, like impaired hearing, cognitive disabilities, blindness, and movement challenges (particularly in the arms and fingers) when accessing and publishing content on mobile devices. 

Here are some best practices to improve mobile accessibility:

Visibility

Small screen sizes can make it harder for some users (especially those with vision impairments or cognitive disabilities) to read your content. Some tweaks to make this easier, include:

• Using responsive design or a dedicated mobile version to reduce the volume of information on pages (for example, with the release of our improved mobile experience in TinyMCE 5.1, we introduced horizontal context menus and horizontal scrolling)
• Tailoring content to reduce the number of images on smaller devices
• Hiding menus on narrow screens so there’s more space to display the content
• Reducing the need for users to zoom in on content by setting default minimum sizes for buttons and text
• Allowing users to magnify the screen and resize the text (some websites and apps block this option)
• Using higher contrasts to make the font more readable (especially since some users may use their mobile device in bright, glary environments)
• Following web and accessibility standards so that assistive technologies can provide alternatives to visual cues, like verbal narratives

Operation

Challenges with movement and dexterity can make it harder to perform the small movements needed to operate a mobile device. Here are some ways to make your content and design easier to operate on mobile:

• Consider button sizes (for example, in TinyMCE we enlarged the chevrons on our split buttons to make them easier to open on mobile) and increase the size of interactive elements in general so they’re easier to select (aim for 9mm x 9mm minimum) 
• Increase the distance between these interactive elements so users don’t accidentally select the wrong item
• If you use gestures to operate your apps, keep them simple and consistent
• Sometimes you might need to implement new gestures and functionality to simplify the experience on mobile
• Offer ways to customize them in case the user can’t perform the default gesture (e.g. it might be difficult to use multiple fingers or draw a shape)
• Allow users to change their mind and navigate away from an action or event
• Don’t assume that users know or remember how to use gestures – if in doubt, add written, verbal, and visual instructions to show users how to interact with your content
• If physical movements (like tilting or shaking) are part of interacting with your app, offer alternatives so users can simulate this using an on-screen menu or keyboard control
• Make it easy to reach interactive elements and buttons, regardless of whether the user is holding the device in their right or left hand
• Don’t force users to switch to portrait/landscape mode as their device may be mounted with a fixed orientation

Understanding

Make it easier for users with learning disabilities and cognitive impairments to access and understand your content. Here are some best practices:

• Keep your layout and UI consistent across all pages to make navigation easier
• Use the inverted pyramid approach to content so that the most important information is visible at the top of the page without scrolling
• Group interactive elements that perform the same action (like a button, image, or link text) to increase the touch target size
• Make instructions for controls easily discoverable and accessible at any time (not just during onboarding)
• Make it easier for users to enter information using a range of methods, including touch, speech, external keyboards, and on-screen keyboards
• Minimize text entry by offering checkboxes and radio buttons, select menus, and automatic data entry for known information
• Make it obvious when elements are interactive or actionable by using multiple distinguishing features, like:
  • Shape – Button shape with arrow, rounded corners, drop shadow
  • Iconography – Home icon, floppy disk save icon, burger menu icon
  • Style – Background color, text color, underline
  • Positioning – Top-left for back button, left-aligned lists for navigation

You can find more specific tips on mobile accessibility measures on the W3C Mobile Accessibility document. 

Some things are the same for mobile and web

Although mobile devices come with some unique accessibility challenges, they also have a lot in common with laptop and desktop devices. Both have hyperlinks, buttons, pop-up menus, tables, and text, so you can follow the general accessibility guidelines for these elements. 

It’s always good practice to offer:

• Adjustable font sizes
• Image alt text
• Larger buttons
• Multimedia options (video, audio, text)
• Captions
• Clear and simple UI with consistent elements

W3C WAI Accessibility Standards cover general accessibility best practices that apply to both mobile and desktop devices. 

Mobile accessibility is good for everyone

As we’ve mentioned in previous blogs, when your website, app, or content is accessible for people with disabilities, it’s better for all your users. When you make your content clearer, your UI more intuitive, and provide users with more control over their journey, you’ll reduce friction and create a more enjoyable experience overall. 

How Tiny can help you improve your mobile accessibility

If you’re a developer or content creator and want to improve accessibility on mobile and desktop devices, Tiny can help.

We initially improved our accessibility for TinyMCE back in version 2, when we worked with the Adaptive Technology Resource Centre (ATRC) at the University of Toronto on a project called Culturall. The project's focus was to make Canadian cultural content accessible to everyone, including people with disabilities. The impact of this work has spread exponentially, with TinyMCE's accessibility features now available in many popular web authoring applications worldwide. Now TinyMCE is at version 5, and we’ve made countless incremental improvements to accessibility as well along the way.

In addition to an accessible authoring experience, our Accessibility Checker plugin is also available for content creators who want to make sure their content is accessible for their audience before they hit publish.

Read more about accessibility

In case you haven’t noticed, we’re pretty big on accessibility here at Tiny. So, if you’d like to do some more reading, we’ve got you covered with these blogs:

• Make your content accessible with TinyMCE
• Image alt text best practices for content creators
• How to write alt text for different image types {infographic}
• Leonardo Russo is enriching the lives of the blind
• Web accessibility for beginners: The power of community
• Top 12 tips to make your website accessible
• 9 things developers and small businesses can do to improve website accessibility
• LMS best practices: accessibility in learning management systems
• Why small businesses shouldn’t ignore website accessibility
• 6 reasons why website accessibility is hard for small businesses
• When we design for disability, we all benefit

Let us know if there’s anything else you’d like to know about mobile accessibility – or accessibility in general. Reach out @joinTiny and let us know how we can help or contact us to talk about how TinyMCE can help you deliver a more accessible experience to your users.