More than thirty years ago, Congress enacted the Americans with Disabilities Act (ADA). This law paved the way for changes designed to ensure that those with disabilities had the same rights as those without. However, the timing of the passage – at the dawn of mass adoption of the Internet – became problematic, with limited language on how ADA should be applied online.
In the ensuing years, efforts to retool the ADA with guidance for online communications have been met with resistance, even as lawsuits alleging discrimination have increased. In 2020, more than 10,000 lawsuits alleging online discrimination were filed, an uptick of more than 25%. Thus, businesses find themselves in the awkward position of having to guard against lawsuits, without clear guidance on how to do so.
Within this void, the Web Accessibility Initiative came to be, publishing a comprehensive set of guidelines. Today, the Web Content Accessibility Guidelines (WCAG) serve as the de-facto go-to for designers and developers intent on following best practices and avoiding litigation. These guidelines focus most closely on elements related to visual impairment and motor control; conditions relevant to those who consume information online.
Though the WCAG does not specifically address apps, many organizations concerned about compliance look to the guidelines to guard against litigation. And as more apps utilize hybrid technology, of course, the line between a “native” app and a responsive website continues to blur even more.
As such, the WCAG remains an excellent starting place for those looking to protect their interests. The following includes some best practices for those seeking to maximize accessibility compliance for their apps.
1. Compatibility Across Different Screen Sizes
Mobile devices come in a range of sizes and shapes, each offering different display resolutions. While the emergence of responsive design has helped, developers are encouraged to employ best practices to maximize compliance.
Beyond utilizing standard viewports, reasonable default sizes and touch control help ensure content will be readily viewable by all users.
In regard to forms, though, casual users often cite a preference for labels appearing inside of fields, such design often presents challenges for screen readers — devices commonly used by the visually impaired. As such, those concerned about compliance should opt to place labels outside of the actual fields.
2. Consistency in Navigation
Consistency allows for easier navigation and is another element of WCAG recommendations. Even in scenarios where text menus swap to icons, maintaining the order of elements in a logical manner is seen as best practice, particularly for those looking to maximize compliance.
3. Create Precise Touch Targets
Mobile devices with high-resolution screens allow for multiple activating elements to appear on a smaller screen. However, these elements must be properly sized and have sufficient distance between them so that users can confidently trigger them by touch, without accidentally triggering the wrong one.
Touch targets within an app should be large enough for people to activate with precision, even when they’re in a hurry. Touch targets should be easy to access, sized a minimum of 9mm high and wide, and should be easily reached, regardless of the type of device.
4. Create a Simple Gesture Controlled User Interface
In recent years, some apps have developed complex multi-touch interfaces. Though useful to power-users, for those with motor impairments, multi-touch interfaces can lead to challenges in navigation.
Instead, try to provide alternatives such as simple tap or swipe gestures; options that don’t require such levels of sophistication.
In addition to deploying simple gesture interfaces, mobile apps should be designed to allow users to easily undo unintentional actions such as accidental taps.
5. Provide Sufficient Color Contrast
WCAG recommends websites utilize specific contrast ratios. Contrast ratio refers to how different text on the screen is relative to the background color. Those with visual impairments can struggle if the contrast isn’t great enough.
WCAG provides three different standards. According to the AA standard (the middle of the three in terms of rigor), text should have a color contrast ratio of at least 4:5:1 (or 3:1 for larger text).
6. Do Not Use Color Alone to Differentiate Status or Convey Information
Color perception can be vastly different for people who are color blind. It is a best practice to use a symbol or text in addition to color to convey information. For example, a required field should not just appear in red – it can appear in red and also be marked with an asterisk.
7. Integrate Different Types of Data Entry
Mobile apps should allow users to enter information in a variety of ways, including the on-screen keyboard and voice commands. Using the on-screen keyboard is tedious for many users, but it can be made easier with the help of voice access. Other options such as autofill simplify user interaction for all users, including those with disabilities.
8. Alt-Text for Images
Though any user that has ever uploaded an image to a website is familiar with alt-text, some may not know that their proper utilization is required for WCAG compliance. Because many screen readers do not display images, the alt-text is used to provide the reader necessary context to know what was being displayed on the image. As such, having alt-text is critical, and have it accurately reflect what’s being presented is just as important.
In the case where the image is being used simply for decorative purposes, that information should be conveyed as well, lest the user is unable to determine what was being communicated.
App Accessibility is For Everyone
Though legal concerns have been sufficient for many developers to design products with app accessibility in mind, there is growing evidence that Google’s algorithm is paying attention as well. For instance, Google now provides accessibility scores via their Page Insights information. To many, this is a strong indication that app accessibility will become one of the search engine’s ranking signals in the near future.
Moreover, most UX professionals reading through the best practices described above would agree that designing for app accessibility includes many elements that should be utilized, regardless of the needs of the individual user. In essence, good accessible design is simply a representation of good design.
