Mobile accessibility is covered in existing W3C WAI accessibility standards/guidelines. There are not separate guidelines for mobile accessibility.
- Keep different screen sizes in mind
When designing any app, it’s important to remember that users will have different screen sizes. To accommodate those with smaller screens, you will need to keep information on each page to a minimum, adjust the position of form fields, and use a reasonable content size. - Pay attention to color contrast
Since many mobile apps will be used outdoors and by disabled users, color contrast is an essential accessibility consideration. Text should have a color contrast ratio of at least 4.5:1, while larger text should be at least 3:1. - Simplify hand gestures
Any gestures required to operate a mobile app should be kept as simple as possible to accommodate users with disabilities. Opt for tap or swipe gestures as opposed to more complex ones. - Adjust tap target sizes
If your app displays multiple elements at once, they should be large enough and spaced out so that app users can easily tap them. This includes elements such as buttons. - Make data entry easy
Since text entry can be a tricky and time-consuming task for many users, it’s essential to provide easy methods for data entry. For one, you can reduce the amount of text required by adding checkboxes and auto-filling information such as the date and time. Providing autofill and data sharing functionality is also recommended. - Keep layouts consistent
Any information that’s present across multiple screens on your app should be consistent. Even if you need to place your navigation in a hamburger menu on certain screens, make sure the menu items are in the same order.
Testing Methods
- Test on real mobile devices of different sizes
- Identify the devices for testing
- Use tests that incorporate assistive technologies and test for general accessibility and mobile specific accessibililty
- Test on responsive windows on a desktop device
- Test on a desktop device
Best Practices
- Make sure links work and when opened create a thematically coherent experience.
- Exploit device capabilities to enhance user experience
- Provide only minimal navigation at the top of the page.
- Avoid using too many links on a page.
- Provide consistent navigation mechanisms.
- Provide shortcuts to key links.
- Use clear, concise descriptive link text; identify the implications of following a link if the target is large.
- Use clear and simple language.
- Limit scrolling to one direction.
- Avoid large or high resolution images.
- Do not use tables or nested tables.
- Provide alt text for images.
- Specify the size of images in the markup if they have intrinsic size.
- Keep style sheets small.
- Ensure the content is encoded using a character encoding that is known to be supported by devices.
- Do no rely on support of font related styling.
- Provide pre-selected default values where possible.
- Specify default language.
- Label all controls and position so they lay out properly in relation to the form controls they refer to.
- Use cookies sparingly
- Use appropriate client-side storage technologies for local data
- Do not execute untrusted JSON data.
- Ensure the user is informed about use of personal device information.
- Enable automatic sign-in
- Avoid redirects
- Optimize network requests.
- Include background images inline in CSS styles
- Cache Ajax data
- Do not send cookie information
- Keep DOM size reasonable.
- Make telephone numbers click to call.
- Ensure consistency between devices.
- Consider use of canvas element or SVG for dynamic graphics.
Resources
W3C Mobile Web Best Practices 1.0