What designers need to know about mobile accessibility
How to design for mobile accessibility based on 4 ability types
Mobile accessibility is more important than ever.
A recent U.S. Census Bureau report revealed that 27.2% of Americans — about 85.3 million people — had a disability in 2014.
According to Pew Research Center, 77% of Americans own a smartphone, and 20% of Americans are smartphone-dependent, meaning they rely solely on their mobile devices to access the Internet. If this number continues to grow, it’s imperative that we design mobile sites and applications with accessibility in mind.
If a site lacks accessibility, such as for people who are blind or low vision, it can be considered a form of discrimination. The argument is that a barrier exists which prevents certain groups of people from participating in society (e.g., applying for jobs, making reservations, and purchasing goods online). In this context, accessibility means providing equal access to information, regardless of a person’s ability.
And there are real-world consequences. In the first six months of 2018, nearly 5,000 lawsuits were filed in federal court for website violations under the Americans with Disabilities Act (ADA). Important rulings have come out of these lawsuits. In particular, a 2012 legal proceeding involving Netflix ruled that ADA laws which apply to public accommodations should also apply to online spaces.
So how can designers begin thinking about mobile accessibility?
One approach is to design for 4 ability types: mobility, hearing, sight, and the ways we learn & understand information. Below, I explore each one in detail, with reference to the Web Content Accessibility Guidelines (WCAG) 2.1 and its adaptation for mobile.
It’s important to keep in mind that the following is not a comprehensive guide to mobile accessibility.
1. Design for mobility
U.S. Census Bureau data shows that 20% of Americans 18 years and older — about 48.2 million people — had a functional limitation in 2014, including 1.7% — about 4.1 million people — who had “difficulty using a phone.” Functional limitations can interfere with the use of touchscreens, or hinder its use completely.
To optimize for touchscreen interactions, touch targets should be at least 9mm x 9mm and surrounded by a small amount of inactive space. To prevent accidental selection, actions should be carried out only when the finger is lifted off the screen, rather than when it makes initial contact with the screen.
To accommodate for a thumb’s range of motion, the most commonly-used elements should be placed within range, while keeping in mind that this differs for right- and left-handed users.
Finally, in the absence of dexterity, designers can provide alternative input methods. In the event that both hands are occupied, or if a functional impairment prevents the use of either or both hands, options like voice control, physical switches, and keyboards are crucial.
2. Design for hearing
U.S. Census Bureau data also reveals that 7.1% of Americans — about 17.1 million people — experienced a serious hearing difficult in 2014, including 1.4% — about 3.4 million people — who were deaf. Differences in hearing can significantly impact access to information, particularly when information is presented in audio or video format.
To accommodate access to audio content, the same content should be presented in text format (i.e., in the form of a transcript). To accommodate access to video content, the relevant content — including non-verbal elements — should be captioned and/or presented in a text transcript.
Not only do these accommodations benefit people who are deaf or hard of hearing, they can also benefit anyone who is accessing content in a loud bar, or in a quiet library with the volume off on their mobile devices.
3. Design for sight
U.S. Census Bureau data shows that 5.1% of Americans — about 12.3 million people — had serious difficulty seeing in 2014, including 0.7% — about 1.6 million people — who were blind. For people who are blind or low vision, it’s important for designers to pay attention to contrast and the underlying information architecture.
When designing for limited vision, it’s important to design for visual clarity and contrast. Colors should meet certain contrast criteria, and text should be readable with up to 200% magnification.
Many people who are blind or low vision rely on screen reader software to navigate their mobile devices. Screen readers work in a linear fashion, which means that interface elements should be labeled and structured for ease of navigation. For example, relevant images should be labeled with descriptive, alternative text. Screen reader users should be able to skip repetitive page elements and be able to navigate entire sites and applications without getting trapped on any interface element.
4. Design for the ways we learn & understand information
U.S. Census Bureau data also reveals that 9.7% of Americans — about 23.2 million people — had a condition that limited mental or cognitive functioning in 2014, including 3.5% — about 8.5 million — who had a learning disability. It’s important to structure mobile sites and applications in ways that are familiar and easy to use.
One way to design for ease of use is to present the most relevant information first (i.e., above the fold), making it possible to access high-priority content with minimal interaction. Similarly, consistency across screens and pages helps users manage their expectations while interacting with a site or application. The clarity of information benefits everyone, especially when people are multitasking, distracted, or simply tired at the end of the day.
Another way to design for familiarity and ease of use is through language. Designers 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 (i.e., around grades 5–7 in the U.S.). This can improve accessibility for everyone, such as those who are learning English as a second or third language.
Final thoughts
While attention is often focused on the absence of accessibility, another perspective to consider is: can a site or application be too accessible? WebAIM asked this question on Twitter and found that the answer is both yes and no. Yes, because a site or application can be overly accessible if it’s loaded with too much metadata (e.g., providing screen reader software with too much information). And no, because if we define accessibility as a quality or end experience, then one can argue that a site or application can never be too accessible (i.e., too equal).
