When testing apps for accessibility, we often find that important issues are overlooked during the development process, omitting a large portion of users from being able to use an app effectively. Most of these problems are simple to fix and can mean the difference between a friendly or frustrating user experience.
Here are five tips to ensure your app is accessible.
1. Label your components
While buttons, images and visual interface controls may be easily perceptible for people who can see your app, it’s common to find that plain text alternatives are not provided for non-sighted users, making it almost impossible for screen reader users to understand what purpose visual elements in your app serve. This is especially an issue when inaccessible buttons link to key features like the main menu, unidentifiable form fields are required for users to log in, or imperceptible images are used to provide important information like directions on a map.
Descriptive text labels can drastically improve the browsing experience for assistive technology users by providing a sense of context, purpose and location in your app. Without descriptive labels, it’s likely that a screen reader’s user experience will consist of “unrecognisable” and “unlabelled” components, which can quickly turn into a navigational nightmare. Labels are easy for developers to implement with huge benefits for accessibility.
2. Establish sufficient colour contrast
Adequate colour contrast between foreground and background elements is important to ensure people can effectively see components in your app without experiencing issues. Colour combinations like light grey text on a white background, or yellow icons on an orange background, can be difficult to perceive for users who are colour blind or visually impaired. Elements that use colour as a sole method of conveying information may not be perceived at all.
Minimum contrast ratios need to exist between foreground and background colours to meet accessibility compliance to WCAG 2.0 level AA or AAA. Providing additional design elements like drop shadows or bounding boxes can also help improve visual accessibility. If your app needs to have a certain look or style using colour, it helps to ensure that your default palette is accessible as early as possible during the design process.
3. Provide page titles
When there are lots of buttons, forms or links which take users to different parts of your app, missing page titles can create significant navigation and orientation problems. An easy way for users to determine where they are is by checking the title of the current page and using that information to plan their next action.
Page titles can add an extra layer of accessibility to your app by providing a sense of location and context for users, especially when combined with descriptive, plain-text component labels to guide screen reader users in the right direction. Having understandable and consistently identifiable page titles can help everyone navigate through your app with ease.
4. Ensure correct focus order
Default swiping and tapping gestures on a touchscreen might not be how all users interact with your app. Directional controllers, trackpads and native accessibility features like VoiceOver on iOS or TalkBack on Android rely on ‘focus navigation’, the order in which app components are highlighted sequentially. When a user expects to start browsing a menu from the top of the screen, but instead a button at the bottom receives focus, followed by text on the right, followed by an image in the middle, it becomes clear how inaccessible focus navigation can lead to a frustrating user experience.
Interface controls should be tested to verify that users can reach and activate important features of your app in sequential order without relying on default touchscreen gestures like tapping and swiping with one finger. Focus navigation that behaves in a predictable manner will ensure that all users are able to browse and use your app efficiently and effectively with different types of input controls.
5. Create a consistent experience
An unwelcome surprise for assistive technology users involves invisible components (artefacts) being picked up throughout apps that have not been built with accessibility in mind. Invisible artefacts will be highlighted with a visual bounding box, and will usually be announced by screen readers as “button” or “link” without performing any function when activated. This can lead to a confusing browsing experience for screen reader users.
Artefacts are often surprising to app developers themselves, as they are difficult to pinpoint without comprehensive accessibility testing. Disposing of artefacts ensures that the browsing experience between all users remains as consistent as possible, and removes any misleading and unintended elements in your app from being presented to users of assistive technology.
Conclusion
There are many accessibility issues to consider when building your app. You can perform some quick tests by enabling your device’s native screen reader and listening to how components are announced out loud, or by turning on accessibility features and trying out the different gesture controls available. Tips are available for Android and iOS developers to make apps accessible and designers can check colour contrast compliance using the Paciello Group’s Colour Contrast Analyser.
Media Access Australia offers a range of training, consulting and expert services to ensure your apps achieve full compliance. Call us on +61 2 9212 6242 or request a quote to find out where you stand with our Digital Accessibility Maturity Assessment (DAMA).