How to Apply WCAG On Mobile: FAQ 

In our UX-focused webinar, Inclusive ADA Principles Applied to Mobile, Senior UI/UX Designer Luca Boskin took time to answer questions about how brands can best apply WCAG principles on mobile. The questions and answers were invaluable, so we wanted to share them with you. 

For more insights from Luca and our presenters from this webinar, Joseph DiNero of Helen Keller Services and Jason Taylor, Chief Innovation Strategist at UsableNet, register for our August 18th Webinar, Accessibility by Design - 101, a new, free webinar on key considerations to design your websites to be accessible, usable, and ADA compliant. 

Back to our FAQ, let's jump right in. 

Q: Does the use of accessibility tools through a mobile app actually consume power from the mobile device?

A: In general, if something is running on a mobile device (actively or in the background), that means it is definitely consuming the battery.

Q: When you say "tabbing through” in a mobile experience, how is this action being carried out?

A: That phrase refers to voiceover and Braille screen input. Check out Kristy Viers’ YouTube video that better details this answer. You can watch it here.

Q: For a native app providing a lot of information on a small screen, is the key takeaway to ensure that touch target size is good? 

A: It really comes down to understanding the key content of the view you're designing and making sure you're presenting it in the best way possible. If there's a CTA involved, then make sure it has an appropriate size for touch targets.

Q: Is swipe or tab navigation the navigation method of last resort? 

A: I wouldn't say swipe or tab-navigation is the nav method of last resort, but I'll suggest always base your initial design decisions and assumption on the fact that there are many different user groups out there, which may use and need alternative methods of interactions in order to complete a task.

Q: Can you share some general page or component layout principles that support Dynamic Type / accessible font sizes in native apps?

A: As a web designer and from a visual design perspective, some knowledge about flexible typesetting and variable fonts will definitely help you design better pages, components, and layouts that support dynamic types.

Q: WCAG doesn't seem to specify a minimum or maximum font size. What would you recommend?

A: For native apps, I would follow the typography recommendations from iOS and Android, which are both very detailed in terms of providing recommended font size for specific content purposes. 

Q: When a button is "greyed out" on a form, and is not active until the form is completed, does that button still follow the non-text contrast rule?

A: This technique is usually not accessible because it hides an element from the page structure which should be there instead, especially if a user is navigating the page with a keyboard or using a screen reader.

Q: How can you measure target size if you are a tester, rather than an app developer?

A: The easiest way would be with screenshots, then using a simple image previewer to measure the element size.

Q: When are these requirements expected to be implemented in mobile apps?

A: WCAG 3.0 will scope mobile apps more consistently.

Q: Any suggestions or tips on improving accessibility for data visualizations, such as graphs and charts that users can interact with to retrieve information?

A: Always combine color with shapes or patterns to represent data, honor the 3:1 minimum contrast ratio for visual elements, honor the 4.5:1 minimum contrast ratio for text labels, and provide a textual description of the visually represented data for users with visual, literacy, or cognitive impairments.

Q: Twitter has a setting to increase contrast, I’m assuming so that the default design contrast can be lower. It allows for the design to have a wider range of contrast and feel less “bold” by default. Is this considered an acceptable practice?

A: Twitter's primary blue color has insufficient contrast when paired with white, so I would rather assume the “increased contrast” setting represents a way of mitigating this accessibility issue without compromising the app branding.

Q: How do you deal with this tradeoff: allow dynamic text on a component vs. truncating text (in a situation where space is limited)?

A: Truncating text is sometimes useful to give users a preview of larger content, and is typically followed by a CTA to reveal or load the full text. In other circumstances, it’s a sign of poor content management, where the design is prioritized over the user. When that's the case, it's better to step back and consider different alternatives, like shortened content for mobile screens.

Q: What is your opinion of overlay services on websites? 

A: Overlays provide a poor user experience. We’ve covered this topic on our blog in the past. You can read it here.

Q: How is the “AIRA live” style alert message done within a native app? (i.e., How does the “snackbar” or “toast” announce to a screen reader user?)

A: It really depends on the technology you're using. Whether it is Swift or React Native, you should reference their official documentation.

Q: What are your opinions of situations where the content as represented by the screen reader differs from what is there, visually (for example, an invisible button that is accessible only via the screen reader)?

A: That's actually a pretty effective solution to simplify screen reader interactions, when it will otherwise be challenging to perform using other standard UI components, or when visual elements are cluttering the experience for screen reader users without adding value. 

Q: What do you think about link styling in native apps vs. web? 

A: Link styling should be always consistent and recognizable. (We recommend underlined and a different color than plain text). 

Q: The new WCAG 2.2 guidelines for Pointer Target Spacing will dictate 44px click target isolation. Is this regarded as sufficient for mobile users exploring via touch?

A: Not only WCAG, but also Windows, iOS, and Android consider 44px (7mm) the absolute minimum for touch targets. In terms of usability on phones, in particular, touch targets should be larger the farther they are from the thumb zone.

Q: How can I learn how to Apply the wcag principles (pour) to mobile? 

A. Download our whitepaper here. It's free and updated for WCAG 2.1.

Q: How do I get more insights and practical takeaways from these webinar presenters?

A: Join us on Aug 18th for a new, free webinar featuring Senior UI/UX Designer, Luca Boskin, and Joseph DiNero, Assistive Technology Specialist at Helen Keller Services for the Blind, and Jason Taylor, Chief Innovation Strategist here at UsableNet. 

Accessibility by Design 101 will cover the assistive technology considerations for blind users like Joe and other members of the disability community, discuss common accessibility design challenges, explore considerations for navigation and interactive design, and provide practical takeaways for your teams to implement. 

Thanks for reading the blog and we hope to see you at our next webinar!