Featured Mobile, Web, Design

Better for All: Mobile Accessibility

Samsung Developer

Smartphones, wearables and other mobile devices have become an integral part of daily life. How we interact with websites and applications on these devices is an important consideration for developers and designers.

In this installment of our Better for All series, we're looking at how the practice of mobile accessibility helps ensure websites and applications on mobile devices can also be used by people living with disabilities. Here are some considerations to help you design for a range of mobile devices in a way that improves access to create an experience that is better for all.

Design for Mobility

Most mobile devices are operated through a touchscreen, where actions are initiated through finger gestures that range from simple to complicated. When designing for touchscreen interfaces, it’s important to remember that not everyone has the same dexterity or range of motion and that functional limitations can interfere with touchscreen use or hinder it completely.

To optimize touchscreen interactions, touch targets should be at least 9mm x 9mm and surrounded by a small amount of inactive space. In addition, actions should be carried out only when the finger is lifted off the screen, rather than when it makes initial contact, to prevent accidental selection.

The most commonly used elements should be placed within range to accommodate for a thumb’s range of motion, while keeping in mind that this differs for right and left-handed users. In the absence of dexterity, developers can provide alternative input methods. Options like voice control, physical switches, and alternative keyboards are crucial in the event that both hands are occupied or if a functional impairment prevents the use of hands.

Design for Sight

Focusing on visual clarity, contrast and the underlying information architecture can help improve readability on mobile devices, especially for those with limited vision. Colors should meet certain contrast criteria outlined by WCAG 2.0, and text should be readable with up to 200% magnification.

To accommodate those who are blind or have limited vision, your website or application should be designed to work with screen readers. Since screen readers work in a linear fashion, interface elements should be labeled and structured for ease of navigation. For example, relevant images should be labeled with descriptive, alternative text. Users should be able to skip repetitive page elements and navigate without getting trapped on any interface element.

Design for Comprehension

Clarity of information benefits everyone, especially when people are multitasking, distracted, or simply tired. Structure mobile sites and applications in ways that are familiar and easy-to-use to remove barriers for people living with a cognitive disability. One way to design for ease-of-use is to present important information above the fold, allowing high-priority content to be accessed with minimal interaction. Similarly, consistency across screens and pages helps users manage their expectations while interacting with a site or application.

Another way to design for familiarity and ease-of-use is through language. Developers should ensure content is easy to read and understandable within a mobile context. For English, a good rule of thumb is to use language that can be read at a lower secondary education level (that is, around grades 5–7 in the U.S.). This can improve accessibility for everyone, such as those who are learning English as a second language.

Design for Hearing

Differences in hearing can significantly impact access to information, especially when information is presented in audio or video format. To accommodate access to audio content, the same content should be presented as on-screen text, including non-verbal elements in videos.

Not only does on-screen text benefit people who are deaf or hard of hearing, it benefits anyone who is accessing content in a loud area or in a quiet location with the volume off on their mobile devices.

Design Considerations for Mobile Accessibility

While the W3C WAI and WCAG 2.0 don’t have fixed requirements around mobile accessibility, they do offer informative guidelines to help designers and developers create a more accessible experience on mobile devices. Here is a summary of key considerations from their guidelines:

  • Amount of Information: Small screen size limits how much information can be displayed. Minimize the amount of information on each page by providing a dedicated mobile version or a responsive design.
  • Readability: A variety of methods allow the user to control content size on mobile devices. Ensure that browser pinch zoom is not blocked, provide support for system fonts on platforms and on-page controls to change the text size.
  • Contrast: The importance of following contrast is heightened with mobile devices, since they are more likely to be used where lighting can’t be controlled and the glare can create challenges for users.
  • Keyboard Control: Use keyboard interfaces that allow mobile devices to be operated by external physical keyboards or alternative on-screen keyboards.
  • Touch Target: Interactive elements must be big enough and have enough distance from each other so that users can safely target them by touch.
  • Touchscreen Gestures: Many mobile devices are designed to be operated by gestures made with fingers on a screen. Add on-screen indicators that remind people how and when to use them, when possible.
  • Device Manipulation Gestures: These can be a challenge for people who have difficulty holding a mobile device. It’s a good idea to provide touch and keyboard operable alternative control options to device manipulation gestures.
  • Button Placement: Position interactive elements where they can be easily reached when the device is held in different positions. Remember, easy-to-use button placement for some users might cause difficulties for others. Flexible use should always be the goal.
  • Screen Orientation: Support both portrait and landscape orientations or ensure that it is easy for all users to change the orientation. Changes in orientation must be programmatically exposed to ensure detection by assistive technology.
  • Consistent Layout: Components that are repeated across multiple pages or navigational components should have consistent placement.

We hope you find the advice in this series beneficial in shaping your design-thinking, to help you create a more diverse, inclusive, and accessible world.

Want to read more from the Better for All series?

Here are the links to the other installments in this series.

Follow us on Twitter at @samsung_dev for more tips on designing and developing for Samsung.

Recent Posts