Caitlin de Rooij is a Web Accessibility Specialist. She works as an Accessibility Consultant for Level Level and provides training and workshops for enhancing digital accessibility. Caitlin’s expertise lies in ensuring that websites and digital content are designed and developed to be inclusive and usable for individuals with diverse abilities and disabilities.
Smartphones and tablets are great, but did you know that not everyone can use them as easily as you might think? That’s where mobile accessibility comes in – making sure apps and websites work great for everyone, no matter their abilities.
By making our apps and websites accessible, we’re not just ticking boxes – we’re opening doors for people who might otherwise struggle to use mobile technology. Plus, it’s the right thing to do, and in many places, it’s the law.
In this article, we’ll walk you through some practical ways to make the mobile experience more accessible. Let’s dive in!
Introduction to accessibility features: Apple vs. Android
- Screen readers: Apple has VoiceOver, and Android has TalkBack, making it possible for people who can’t see the screen to use their phones.
- Text and icon size adjustments: Both systems let users bump up the size of text and icons to make them easier to see.
- Touchscreen tweaks: For people who find touching the screen tricky, there are options to turn off the touch control and use other devices to control the phone instead.
- Voice control: Both Apple and Android let you open and use apps using just your voice.
- Screen contrast adjustments: This feature can make text pop out more by tweaking the colours on the screen.
Instead, you need to understand how different people use mobile devices and test every app thoroughly throughout development.
Mobile website vs. native apps
It’s important to understand the difference between creating a native app and making a mobile version of a specific website.
A mobile version of a website is a scaled-down, responsive design of a regular website that adapts to smaller screens and is accessed through a mobile browser. It therefore has the same codebase as the desktop version of that website. In contrast, a native app is a standalone application specifically developed for a particular mobile operating system (like iOS or Android), downloaded from an app store, and installed directly on the device.
A mobile website, just like a regular website, needs to comply with Web Content Accessibility Guidelines (WCAG), but a native app, depending on the OS, needs to follow additional accessibility guidelines on top of the WCAG. These include:
- Biometrics: users should be provided with an alternative to biometric authentication.
- User preferences: the preferences set in the user’s device should be considered (e.g., when font size is enlarged or they have it in a different language).
Best practices for mobile accessibility
If you’re familiar with web accessibility, you’ll find a lot of similarities here. The same principles apply, but we need to tweak them a bit for the mobile world. Let’s break it down:
Control mechanisms
Different people interact with mobile devices in various ways, and not all of them involve the actual touch screen. Some folks use their mobile devices with external keyboards or special pointing devices so you need to make sure your website is operable in every possible way.
For touch screen users, we recommend keeping gestures simple. Swiping and tapping are great, but complicated gestures like pinching or using multiple fingers can be tricky for some users. This is why the WCAG requires a single-point operation to be included as an alternative.
The same rules for simplicity apply to the different website elements, especially forms, which can be hard to fill for users with and without disabilities. You can make them easier by:
- Using checkboxes or radio buttons instead of text fields where possible.
- Offering autofill options. Who doesn’t love less typing?
- Making touch targets (like buttons) big enough and spaced out. The absolute minimum requirement is 24×24, but we recommend that you aim for at least 44×44 pixels. Your users’ fingers will thank you!
Finally, put those touch targets where they’re easy to reach. Think about how you hold your phone – the middle and bottom of the screen are usually the easiest to tap.
Consistent layouts
Having consistency in your mobile apps helps users get used to the layout, and navigation becomes second nature.
To achieve this, make sure to:
- Keep your navigation elements and buttons in the same place across different pages.
- Use standard icons for interactive elements. If it looks like a home icon, it should take you home!
- If you’re using dropdown menus, keep the items in the same order.
Consistent layouts are great for everyone, but they’re especially helpful for people with limited dexterity or cognitive disabilities. It means less thinking and more doing!
Responsive design
Now, let’s talk about making your app or website look good on all sorts of devices. This can be achieved in various ways:
- Making sure your fonts can scale up or down.
- Thinking about how your layout will look on different screen sizes. That three-column table might look great on a tablet, but on a narrow phone screen? Not so much.
- Paying attention to image sizes. Mobile devices often have high-resolution screens, so your images need to be sharp. But you don’t want them to be so big that they take forever to load. SVG (Scalable Vector Graphics) can be a great solution here – they stay sharp at any size and have small file sizes.
To make all this happen, you’ll want to get friendly with things like:
- Media queries: These allow you to apply different styles based on the device’s characteristics, like screen size or orientation.
- Viewport settings: This meta tag tells the browser how to adjust the page’s dimensions and scaling to suit the device.
- Flexbox: This CSS layout model makes it easy to design flexible, responsive layouts without using fixed sizes.
Sufficient colour contrast
Colour contrast is important for making sure everyone can read your content, especially on mobile devices that might be used in all sorts of lighting conditions.
- Aim for a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text. These are the minimum requirements set by the Web Content Accessibility Guidelines (WCAG).
- Remember, colour shouldn’t be the only way you’re conveying information. Use other visual cues too, like underlining, putting a border on links, and using icons.
Want to dive deeper into this topic? Check out our guide on colour blindness accessibility.
Text alternatives
Last but definitely not least, let’s talk about text alternatives. These are vital for making sure everyone can understand your content, even if they can’t see images or hear audio.
- Provide alt text for all your images. Think of it as describing the image to a friend over the phone.
- Don’t forget about video and audio content, too. Captions and transcripts are your friends here.
- Text alternatives aren’t just for people with visual impairments. They’re also great for when images don’t load (hello, spotty mobile connections!) or when someone’s in a noisy place and can’t hear audio.
Want to learn more? Learn all about writing great alt text with our handy guide!
Remember, text alternatives are just one piece of the puzzle when it comes to making your content accessible to screen reader users. You’ll also want to think about things like ARIA labels, semantic HTML, heading structure, and link text.
Integrating accessibility into app development
We’ve covered several best practices for overall site accessibility and some mobile-specific queries. But how do we actually implement all this when developing our apps?
First things first: accessibility isn’t something you sprinkle on at the end like magic fairy dust. It needs to be baked into your development process from the very beginning.
Here are some tips to help you make accessibility a core part of your development process:
- Keep learning: The mobile world moves fast, and accessibility tech is always evolving. Stay up to date by checking out resources like this article, the accessibility docs for your platform (Android or iOS), and expert courses (like the ones we offer here at The A11Y Collective!).
- Test, test, and test again: Accessibility isn’t a one-and-done thing. You need to keep testing throughout your development process. Here’s how:
- Use accessibility testing tools: These are great for catching obvious issues quickly.
- Test with real users: Nothing beats getting feedback from people who actually use assistive technologies. They’ll catch things that automated tools might miss.
- Get a professional audit: Before you launch, consider getting a full accessibility audit to make sure you haven’t missed anything important.
- Test at every stage: Don’t wait until the end to start testing. Check for accessibility issues as you go along. It’s much easier to fix problems early on!
- Make it a team effort: Accessibility isn’t just the job of developers. Designers, content creators, project managers – everyone has a role to play. Make sure your whole team understands the importance of accessibility.
- Use accessibility-friendly frameworks: Many modern development frameworks have built-in accessibility features. Take advantage of these – they can make your job a lot easier!
- Document your process: Keep track of what works and what doesn’t. This will help you improve over time and make it easier to train new team members.
Remember, making your app accessible is about creating a better experience for all your users. And often, the changes you make for accessibility end up improving the app for everyone!
Take your mobile accessibility to the next level
We’ve covered a lot of ground, so let’s take a moment to recap what we’ve learned about mobile accessibility:
- We talked about the built-in accessibility features that come with Android and Apple devices. These are great, but they’re just the starting point.
- We dived into best practices for mobile accessibility, covering everything from control mechanisms to text alternatives.
- We discussed how to integrate accessibility testing into your development process, emphasising the importance of continuous testing and learning.
Remember, while Android and Apple provide some accessibility features, it’s up to us as developers to ensure our apps and websites are truly accessible to all mobile users. This way, we can continue following important guidelines and create experiences that everyone can enjoy, regardless of their abilities.
This guide has given you a solid foundation in mobile accessibility, but there’s always more to learn. Accessibility is an ongoing journey, not a destination. The mobile world is always changing, and so are the needs of users with disabilities.
So, what’s your next step? Why not dive deeper into accessibility with one of our courses at The A11Y Collective?
Remember, every step you take towards better accessibility makes the mobile world a little bit better for everyone. So keep learning, keep testing, and keep creating amazing, accessible mobile experiences!
