Not everyone has the same abilities. The World Health Organization (WHO) identifies 4% of the global population as being visually impaired, 4% as having low vision and 0.6% as being blind. And those numbers don’t include those who have hearing impairments or motor impairments. A well-designed app or software product will be accessible to everyone, regardless of ability.
And good design doesn’t benefit only those with physical challenges. Accessible websites win higher positions in search results because they’re easier for everyone to use. In this post, we’ll explore seven ways to make your interfaces more accessible.
1. Simpler Is Always Better
This first principle benefits everyone regardless of ability. Whether you’re designing a piece of software or an app, keeping your product as simple as possible makes it more user-friendly. Navigation that includes descriptive text prompts takes the guesswork out of getting around your site. Additionally, providing a generous amount of white space around buttons and navigation items increase the likelihood they’ll end up in the right place and avoid accidentally selecting other navigation items close by. Also note that solid icons are more easily viewable than outlined icons since they provide more viewable space that makes them easier to pick out and select.
2. Use Contrast Strategically
People with low vision may struggle to read text on your app or software product if there’s not a high enough contrast with the background color. For standard texts, the W3C recommends the contrast ratio between text and background color be 4.5 to 1 or greater. If your text is larger than 18 pt or a bold 14 pt, you can drop the contrast down a bit to 3 to 1. Even for those who don’t have a visual impairment, greater color contrast makes text simpler to read.
3. Cues Beyond Colors
Strategic use of color can greatly improve navigability. Don’t rely on color alone to carry your app’s navigation markers, however. Those with color blindness will benefit from additional clues like symbols that signify an error or active state. Adding a sense of texture to your product by contrasting patterns can make using your product’s navigation more accessible too. If you have text links, underline so users can more easily recognize their purpose. If you’re struggling to imagine how a common visual impairment like color blindness may impact usability, Color Oracle is a free app that replicates their experience on your site.
4. Go Deeper Than The Alt Tag
When it comes to accessibility, well-used alt tags are a must. This tag is the tool developers use to create text descriptions for photos that aren’t viewable to some vision-impaired users. In addition to describing what the photo depicts, adding details about the function of image will provide users with more information. For example, if clicking on a photo is designed to take the user to another area on your app, add a note about where they’ll be headed if they click on the image.
5. Tag More Than Just Your Images
HTML5 allows you to tag video and audio files too. Take advantage of these tags in the same way you would when filling in an alt tag for a photo. Users who are accessing the web using accessibility software rely on information you provide in video and audio tags to gain an understanding of how to best navigate and consume the content your product provides.
6. Make Sure Your Form Fields Make Sense
Traditionally, form fields have been difficult to interpret for those with accessibility needs. Knowing what information needs to go where is often a challenge for those who can’t easily read labels next to blank form fields. Using the label tag allows you to bypass this potential pitfall by adding a text description of the information required for each field. HTML5 allows you to take things a step further by specifying the type of data that’s required too. By marking the data type, mobile browsers are clued into what type of input device it should display — like a number pad for a numeric response or a date picker for a calendar field.
7. Keyboard Controls
Users with visual and motor impairments often rely heavily on keyboard functions when navigating the web. Each part of your website should be reachable using the Tab key. If you have to use a mouse to access portions of your site, it’s not truly accessible. The easiest way to test this out is to try to navigate using only your keyboard. If you can’t do it, some recoding may be in order. WebAIM provides a solid resource for in-depth details on adding additional accessibility using keyboard-only commands.
While creating an accessible interface may require extra planning, it’s worth ensuring that people of all abilities can use your product. If you’re partnering with a development company to build your app or software, be sure to ask about their process for designing for accessibility.
Want to talk through your app or software development idea? Get in touch. We’ll share the process we’ve used to help hundreds of clients launch successfully and answer any questions you have.
