At the “Mobile Accessibility 101” webinar, Deque Systems Accessibilty Evangelist Paul Adam discussed mobile assistive technology, top mobile accessibility issues, shared tips on how to avoid creating accessibility barriers, and demonstrated how to test with VoiceOver (iOS) and TalkBack (Android) screen readers.
Here are some of my takeaways from the webinar.
Mobile Accessibility
With so many people relying on mobile devices to access the Internet, mobile is the first impression of your company.
You want your site to work for everyone, no matter their ability. If your site isn’t accessible, you may risk losing contracts or face litigation.
Mobile assistive technology includes, among other things, screen readers (VoiceOver and TalkBack) voice control (Siri), switch controls, vibration patterns, ability to modify contrast, and make text larger/bolder.
For people who are hard of hearing (HOH) or deaf, there are user-customizable closed captions options available in Android 4.4+ or iOS 7.0+.
Top 5 Mobile Accessibility Issues
- Pinch-to-zoom disabled. Some mobile applications disable the ability to size text. Allow the user to resize the text. (Here’s some background about pinch-to-zoom accessibility issues from Henny Swan)
- Inaccessible forms. Placeholders without labels are problematic. Labels typically appear above or to the left of the input. To save space, mobile developers have begun using placeholders in the input field. And when the user starts typing, the placeholder disappears, which is an issue for cognitive accessibility and general usability. What does the user type?
- Useless page titles. Single page applications (often created with angular JS) are one HTML file, with multiple pages with the same page title. The user doesn’t know where they are in the application.
- Fake
divbuttons. There’s no semantics for adivbutton. What is the role of the item? Use abutton. - Expanding/collapsing (hamburger) menus. When the menu slides in and out, screen readers may not hear the name of the menu. And don’t know if the menu is open or closed.
Modern Flat Design Affects Usability
Contrast is a major issue. As designers use lighter colors, often light gray text on a white background, it makes it more difficult to read the text. Use color contrast checkers/analyzers to check the colors used in your designs.
Allow users to resize text. Unlike desktop browsers where you can use CMD or CTRL ++ keys to increase the size of text, using pinch-to-zoom increases horizontal scrolling, making everything wider. Custom text buttons allow you to make the text bigger, rather than making it wider as well.
Allow captions to be be enlarged. With WebVTT (Web Video Text Tracks Format), the user can choose the size, font, and colors for captions.
Design for Fat Fingers
Create large tap-target areas for buttons. Make buttons as large as possible.
Labels increase tap areas on form fields. If you have radio buttons and check boxes without labels, the tap area will be small and hard for the user to access.
Testing on iOS and Android
For iOS, use the Reflection application to show your phone on your desktop screen or monitor.
For Android testing, use Firefox rather than Chrome. Firefox has better accessibility support and features than Chrome.
At the end of the webinar, Paul answered several questions, including one that came up recently in one of my web design groups: How do you fix hamburger menus so that it’s accessible?
Paul’s reply:
- Use a button element, not a
div - Give it an accessible name
- State if the button is expanded or collapsed
- Test it on the screen reader. Does it make sense to the user?
Resources
Paul referenced many Android and iOS tips and helpful guides, color contrast tools, form validation demos, and API documentation resources in his talk, which he graciously compiled on his website at Mobile Accessibility 101 Webinar Demos & Resources.
