Day 8: Mobile accessibility tips
Mobile accessibility, is about ensuring that your website or app is easy to use on smartphones and tablets. With more than half of web traffic coming from mobile devices, creating a mobile-friendly and accessible website benefits everyone.
Why mobile accessibility matters
Mobile devices present unique challenges for accessibility. Smaller screens, touch interactions, and variable connection speeds can make navigating websites difficult for users with disabilities. Improving mobile accessibility can help:
- people with visual impairments who need larger text or higher contrast.
- people with motor impairments who rely on easy-to-tap buttons and clear layouts.
- all users, by creating a better and more user-friendly experience.
Tips for mobile accessibility
Here are some practical tips for creating mobile-friendly, accessible content:
- make text readable, use a font size of at least 16px and ensure good contrast between text and background
- provide large touch targets like buttons and links and consider at least 48 x 48 pixels with enough space between them
- allow zooming, avoid disabling pinch-to-zoom, which is essential for users with low vision and make sure when zooming, the content displays or reflows correctly
- use simple layouts, clean, uncluttered designs make navigation easier for everyone and keep layouts consistent to make repetitive tasks easy
- try to keep operational gestures simple such as a tap or swipe gestures rather than more complex methods
- keep data entry easy and make use of checkboxes and autofilling of information
- make sure buttons, form fields and other interactive elements are labelled appropriately
Testing mobile accessibility
Testing on mobile devices is different to testing on a laptop or desktop computer. Although most modern smartphones and tablets now include assistive technology like screen readers and speech recognition. When testing mobile accessibility, you should:
- test on real devices.Check your site on different screen sizes and orientations to ensure usability
- check responsiveness by changing the orientation of the device from portrait to landscape and observing anything unexpected, for example content out of place or overlapping or additional scrollbars
- zoom in on content and check the content appears as expected, nothing overlaps or is missing
- connect an external keyboard and check that navigation and keys work as expected noting any issues
- test using device assistive technology like screen readers, speech recognition and high contrast modes
- test content with real users of assistive techology
Designing for mobile accessibility
Watch the video from the Interaction Design Foundation on mobile accessibility principles.