Even today, users with disabilities often face barriers when trying to shop, research or complete tasks on mobile apps. Those with auditory impairments often require captions or transcripts of video. Those with visual impairments need web pages to be appropriately labeled and explained in order to properly navigate as they listen to the web page content using assistive technology. More often than not, these key accessibility options are not available or not properly implemented. Users with disabilities are frequently forced to abandon a site, app or task, or are charged with call center fees if an online property is inaccessible. In fact, in the UK alone, 86% of disabled users who use screen readers find the average website or app difficult to use with their software.
In part 1 of this blog series, we reviewed designing for small screen size and focusing on color contrast. In part 2, we walk-through two other fundamental techniques for mastering inclusive design for mobile apps: touch targets and mobile touchscreen gestures.
Get Touch Target Size and Placement Right
The high resolution of mobile devices means that many interactive elements can be shown together on a small screen. But these elements must be big enough and have enough distance from each other so that users can safely target them by touch.
Best practices for touch target size include the following:
- Ensuring that touch targets are at least 9 mm high by 9 mm wide.
- Ensuring that touch targets close to the minimum size are surrounded by a small amount of inactive space.
Note: This size is not dependent on the screen size, device or resolution. Screen magnification should not need to be used to obtain this size, because magnifying the screen often introduces the need to pan horizontally as well as vertically, which can decrease usability.
Since human fingers are a very imprecise pointing tool, tap targets within an app should be big enough to help people interact with precision and confidence, even when they have to perform tasks in a hurry.
See below for a visual example of what to do and what not to do when designing with a focus on touch target size:
Tips for touch target placement include the following:
Place buttons where they are easy to access. Mobile sites and applications should position interactive elements where they can be easily reached when the device is held in different positions.
When designing mobile web content and applications many developers attempt to optimize use with one hand. This can benefit people with disabilities who may only have one hand available. However, developers should also consider that an easy-to-use button placement for some users might cause difficulties for others (e.g. left- vs. right-handed use, assumptions about thumb range of motion). Therefore, flexible use should always be the goal.
See below for a visual example of what to do and what not to do when designing with a focus on touch target placement:
Different screen sizes require different handholds. Between phones and tablets the regions of the screen we can comfortably reach with our thumbs change enormously. The green thumb zone identifies the areas where our thumbs can perform accurate tapping. The red zones instead are those most difficult to reach, so touch targets placed within these areas should be much larger than usual.
MINIMIZE CUSTOM GESTURES AND SUPPORT them with visual feedback and instructions
Many mobile devices are designed to be primarily operated via gestures made on a touchscreen. These gestures can be simple (such as a tap with one finger), or very complex (involving multiple fingers, multiple taps and drawn shapes).
Some (but not all) mobile operating systems provide work-around features that let the user simulate complex gestures with simpler ones using an onscreen menu.
Some best practices when deciding on touchscreen gestures include the following:
- Gestures in apps should be as easy as possible to carry out. This is especially important for screen reader interaction modes that replace direct touch manipulation by a two-step process of focusing and activating elements. It is also a challenge for users with motor or dexterity impairments or people who rely on head pointers or a stylus where multi-touch gestures may be difficult or impossible to perform. Usually, design alternatives exist to allow changes to settings via simple tap or swipe gestures.
- Activating elements via the mouse-up or touch-end event. Using the mouse-up or touch-end event to trigger actions helps prevent unintentional actions during touch and mouse interaction. Mouse users clicking on actionable elements (links, buttons, submit inputs) should have the opportunity to move the cursor outside the element to prevent the event from being triggered. This allows users to change their minds without being forced to commit to an action. In the same way, elements accessed via touch interaction should generally trigger an event (e.g. navigation, submits) only when the touch-end event is fired (i.e. when all of the following are true: the user has lifted the finger off the screen, the last position of the finger is inside the actionable element, and the last position of the finger equals the position at touch-start).
See below for a visual example of options for how to design with mobile gestures in mind:
Customized gestures are sometimes used as an effective replacement for annoying confirmation dialogs. However, users with disabilities may still benefit from the latter, so app designers should implement them as an alternative feature.
UI elements supporting touchscreen gestures such as banner carousels or article sliders, should sport visual indicators for browsing feedback and changing content.
We have now covered ground on four of six major inclusive app design techniques. Stay tuned for the third and final piece in our blog series for tips on layout consistency and data entry.
For more, read our latest Digital Accessibility Initiative Checklist for a comprehensive guide with all the steps and best practices to consider when planning your digital accessibility strategy.