Design has come a long way since the bygone age of small-office tech companies bringing on a graphic designer to spice up their WordPress site with Photoshop mockups. It seems that every year or so, design makes a new leap of progress in the technology space; UI, UX design, UX, writing, UX research, and a whole slew of emerging design-adjacent fields have narrowed the bridge between user and device at a rapid pace.
One field that has received a lot of attention, to the point where it has become a staple in app design, is accessibility. Previously, the practice of using accessibility standards was criminally overlooked by designers, developers, and management alike. But recent years have seen greater awareness of the importance of designing for all users, including those with a disability or another barrier to app use. In this article, I’ll define accessibility and share 10 accessibility practices to keep in mind when designing your next app or website.
What is Accessibility?
App accessibility is all about making anything digital usable for everyone, no matter what. It’s about designing apps in a way that doesn’t leave anyone out, especially those with different abilities or disabilities. It means creating features and components that can be easily accessed, understood, and used by everyone. The idea is to ensure that your app provides a level playing field where everyone can join in.
As a designer, you need a firm understanding of your user base — not only your end users’ wants and “nice-to-haves,” but also their capabilities and constraints, because different user groups have different accessibility needs. For instance, individuals with visual impairments might rely on screen readers, which use text synthesizers to read text on screen. Conduct user research, engage with your audience, and consider diverse perspectives to gain insights that will inform your design decisions.
In particular, consider the following 10 accessibility issues in your design.
1. Clear and Consistent Navigation
Navigation is the backbone of any digital experience. Design navigation menus that are clear, consistent, and easy to understand. Make sure your headings have proper structures, use descriptive labels, and organize content logically. For instance, try to avoid using icons as buttons without any descriptive text accompanying them; this helps the user understand how the component behaves without forcing them to press it to find out.
2. Legible Typography
Choose fonts and font sizes that enhance readability. Sans-serif fonts, like Arial or Helvetica, are generally easier to read on screens. Ensure there’s enough contrast between text and background colors. (More on that in a moment.) Users with visual impairments or cognitive disabilities benefit from text that is not only legible but also presented in a clean and straightforward manner.
3. Responsive Design
In today’s multi-device society, ensuring that your design is responsive is essential. A responsive design adapts to different screen sizes and orientations, providing a seamless experience across devices. This benefits users with disabilities who may use various assistive technologies on different devices.
4. Form Design
Forms are a common interaction point on websites and apps. Design forms with accessibility in mind by providing clear labels, error messages, and instructions. Ensure that section headers have more weight than field labels to help the user understand the relationship between the two. Rather than just labeling mandatory fields in red text, try adding asterisks or another icon to convey a sense of emphasis; some colorblind users may not be able to distinguish the red coloring by itself.
5. Color Contrast
Consider color contrast in your design to accommodate users with visual impairments or color blindness. Ensure there is enough contrast between text and background colors to make content readable. Tools like the Web Content Accessibility Guidelines (WCAG) provide specific guidelines for color contrast ratios. There are also a slew of free contrast checkers online that allow designers to easily compare foreground and background colors and see whether they meet accessibility standards.
6. Testing with Assistive Technologies
Regularly test your designs with a variety of assistive technologies, such as screen readers, voice recognition software, and alternative input devices. Proactive approaches like this help identify potential barriers so you can address them.
7. Design for Scalability
As your content grows, be mindful of how you guide scaling. Consider how your design accommodates an increasing volume of content without compromising accessibility. This can be a difficult tightrope to walk, but sacrificing accessibility in exchange for new features will most likely do more harm than good for your established user base. In particular, robust navigation and search functionalities become even more critical as content expands.
8. Mindful User Training
Consider the learning curve for users, especially those who may face cognitive challenges. Keep your app interface intuitive and user friendly, minimizing the need for extensive training. If there is a key feature, navigation standard, or component in your app that users have grown accustomed to over time, avoid changing or removing it. If you are designing for mobile, leverage standard design patterns and behaviors so that users can rely on their existing knowledge of the platform. For example, iOS is one of the most widely used mobile operating systems, and Apple has spent years researching the best design practices. Take advantage of Apple’s Human Interface Guidelines when designing your iOS app. Users familiar with iOS products appreciate an experience that’s consistent with what they are already used to.
9. Accessible Iconography
Icons serve as the visual language of apps, providing quick cues for navigation and actions. However, for new users and users with visual impairments, relying solely on visual cues can be limiting. As mentioned earlier, use clear and concise labels with your icons so the user knows the functionality of each feature and doesn’t have to try to decrypt the symbols to figure out their functionality. If you are designing for iOS, utilize Apple’s system icons and symbols, which are designed with accessibility in mind, and ensure that each icon has descriptive text associated with it for VoiceOver users.
10. Adequate Finger-Press Space
Mobile devices are primarily touch-driven, so padding is important. Since most users rely on their fingers for interaction, it’s important to keep in mind during design that users won’t have the luxury of interacting with components with the accuracy of a cursor. Be sure to provide sufficient padding around interactive elements; this not only reduces the chance of accidental taps but also ensures that users can accurately press the intended target, resulting in less frustration. Apple recommends a minimum tappable area of 44 x 44 points for interactive elements, such as buttons.