Key accessibility features for your app or website
Not designing with accessibility in mind means possibly alienating a ton of potential app or website users. Roughly 15% of the world’s population has some form of disability – which means you could be excluding over 1 billion people from using your app.
In May, we highlighted 7 tips for successful app design. One of the tips we got the most questions about was the importance of designing for accessibility. Here’s a quick excerpt from that post:
Designing an accessible interface means thinking about how people with vision loss, hearing loss, and other disabilities will use your app.
For example, don’t make red and green the only indicator of a successfully filled out form. Add an “x” next to incorrect fields and a check mark by correct fields to serve as additional visual indicator so that people with red/green color blindness can still easily and successfully use your app. Similarly, consider adding transcripts to video or sound clips to aid those with hearing loss.
That quick overview left us wanting to share more about accessible design. Accessibility features should address both permanent and temporary impairments by utilizing simple and intuitive designs that address a wide range of potential impairments. Inclusive design focuses on four main areas: cognitive, visual, hearing/aural, and physical/dysmotility.
There’s a lot of in-depth research available on how best to address the challenges each type of disability may face – but there’s a handful of simple things that any designer can do to increase the usability of their app.
Keyboard Control
Keep in mind that some users may only be interacting with your site or app through keyboard commands. You want to provide multiple ways to interact with controls. Providing keyboard shortcuts and letting users navigate your app with tab and arrow keys will allow those who are visually impaired to use your app. Once you’ve thoroughly tested the accessibility of the site or app, consider putting instructions or a video online showing people how best to navigate the site with keyboard commands only.
intuitive navigation
Intuitive navigation will make your UI better for every user, but is also incredibly helpful for those using screen readers or keyboard controls. To increase ease and speed of use, think about what people will need to access most easily and ensure that’s front and center.
high contrast colors
When using colors, make sure you stick to a high contrast color scheme. There should be clear contrast between background and foreground, and any text should have a sharp contrast with the background color. Don’t forget to take your phone for a spin in greyscale to see how everything looks!
Resolution Options
People with difficulty seeing may view your app at up to 200% zoom. Keep this in mind when you design and be sure to test your design out at multiple different zoom levels.
Limit needed gestures
People with limited physical mobility may have a hard time making complicated gestures. To ensure everyone can use your app, you’ll want to make sure that gestures and button sizes are configurable in your app.
“People that have physical motor limitations might encounter problems while navigating a mobile application. Tapping or other forms of gestures need to be configurable so that a user is not bound to a specific gesture. Also, a gesture should never be a mandatory event since physical motor limitations should not restrict the navigational behavior of an app. Both Android and iOS offer users the ability to configure shortcuts for frequently used phrases or words, as well as timing between presses on the screen. The size of buttons (or other touchable triggers in apps) are also configurable.” (Source)
Visual indication
Don’t rely on colors as the sole indicator on any element of your app. Your content should be perceivable in a variety of ways – for example, hyperlinks should be underlined as well as different a color. Checkmarks or “X”s should indicate if a form field has been accepted.
Alternate text or descriptions
For images or videos that don't contain information, provide alternative text that briefly describes the content. If the image contains data a user needs to know, include a brief description of the data, chart, or diagram.
Screen readers
Content can be optimized to enhance the experience of those who use screen readers or will be experiencing a text-only version of your app. Screen readers will verbalize both visible and hidden content and read it out loud to the user. It’s important to keep in mind that screen readers rely on the top-down structure of HTML.
Informative alt text
For more on how to properly write your alt text check out this guide.
Screen readers will also read the alt text of your images to help translate a visual experience into a text based one. Alt text is a short label (up to 125 characters) in the code that describes an image for users who are unable to see them. As a bonus, properly tagging and describing images in your alt text can also enhance your SEO!
Provide alternatives to sound
When it comes to critical audio elements, text alternatives should be provided. Video transcripts, video captioning or audio transcriptions should always be included with video or sound elements. In addition to supporting those with hearing loss, many prefer to view videos without sound or would prefer to quickly skim the content of the video.
Feel like your app is accessible to everyone? Don’t stop there! Be sure you do extensive user testing before hitting the market. And, even after your app is released ensure that users can easily provide feedback. Use customer feedback and analytics to continually analyze and improve your app.
Hue & Tone Creative
Not sure how to translate your brand into the perfect app or website? That’s what we’re here for. We’ll help you remove the guesswork from developing your brand — and everything you need to communicate it. Contact us today.