The W3C wants to help developers understand how WCAG 2.0 applies on mobile devices. They recently issued the first working draft on the topic. The guidelines and principles of WCAG are explained using the POUR method: Perceivable, Operable, Understandable, Robust.
In this post I will distill the W3C information for the Perceivable principle.
Small Screen Size
- Use a responsive design and minimize the amount of information that is put on each page
- Use fewer images
- Focus on the features needed to operate in the mobile environment
- Use a “reasonable” default size for content and touch controls to reduce the need for zooming
- Make sure link text does not exceed the width of the device
- Put form fields below their labels
The suggestions include:
- The user should be able to zoom to 200%. Do not block this with the page’s viewport meta element.
- Support system fonts that follow platform level user preferences for text size
- Support options on the page to allow the user to change text size
Mobile device content is viewed on smaller screens and in different conditions so the allowable ratio for lessened contrast on larger text on desktop devices must be considered carefully for mobile apps. Therefore, the W3C suggestion at this point is that developers should strive to apply the lessened contrast ratio only when text is roughly equivalent to 1.2 times bold or 1.5 times (120% bold or 150%) that of the default platform size. Even then, the user must be able to zoom to magnify the text.
Mobile device image: William Hook