Digital products have revolutionized the world, making information accessible more than ever before. But are the user experiences accessible for everyone? When designing, we know that UI should be intuitive, but it should also be accessible for every user, including those with disabilities.
According to the Interaction Design Foundation, there are five key usability areas to consider: visual, motor/ability, auditory, seizures, and learning. There are people of all backgrounds using your site or app who hope to find what they want as quickly and easily as anyone else would.
Here are five easy ways to make your UI more accessible:
Allow Users to Resize Pages & Content
Users are viewing your product from various screens on many different devices. We enjoy crafting experiences in which users can resize content to adjust to their needs. Imagine this scenario: A user inputs information into a field, and the page automatically zooms into the field. In this position, the user should have the ability to zoom out or in to assure the action they’re taking. Making this easily doable creates a seamless experience.
Add Alt Text to Every Image
This makes it easy for people with visual impairments to understand your images. According to Moz, one key to great alt text is to just keep it short. Because most screen readers cut off text at about 125 characters, it’s advisable to keep it at or below that number. Instagram made headlines late last year when they finally introduced an alt text function on their platform. This move, among others, means accessible UI isn’t a trend — it’s standard.
Make the Search Bar Easy to Locate & Use
As we discussed in our recent San Francisco UX meetup, this is a new trend large brands are putting to good use. A common goal of user experience is to minimize the effort necessary for the user to complete a task, such as limiting the amount of clicks required to enter information into a search bar. For example, on the Tidal streaming platform, one click on the search symbol not only leads you to the search page, but it also opens up the keyboard so you can type in your query. Instead of two clicks — click the search icon, click search bar — it anticipates you want to search for information and has the keyboard open automatically.
Add in Section Headings
Just like a book, or a street sign, digital products are expected to deliver information in a way that organizes, guides and moves the user to the next step. Section headings, like a subtitle in a blog, or at the top of a page, help users remember what they’re reading. In a survey, 67% of respondents said they preferred to navigate through the headings on the page. This finding ranked higher than using the “find” feature, navigating through the links of the page, and reading through the entire page.
Use Color Contrast
Perhaps an overlooked item, using the right color contrast to ensure maximum readability is key to making your UI more accessible. There are times where you’ll find that your text doesn’t have enough contrast with the background or your type size doesn’t compliment its contrast. When looking to make colors more accessible, use the following resources to know you’re doing it right. We love resources including Kevin Gutowski’s site, Web Aim, and Contrast app.
Bonus Content Tip:
Use Link Text on the Menu Navigation
This way considers users who have difficulty finding menu items: knowing what tab they are hovering over and understanding where they are on the site. A possible solution is when a user hovers over the menu item on a page, the screen reader reads aloud that particular button by reading the link text. Intuitively, the user clicks on this item and is lead to their page of choice. It is also recommended to provide generous sizes for clickable areas, no smaller than 44px by 44px. Menu navigation is one of the most important of any site, regardless of the use case. Similar to using alt text to include descriptions for images, link texts can help with items that pertain to the user’s navigation.
Tools we like:
Contrast — Color Accessibility
A contrast bar for the menu bar on your Mac. https://itunes.apple.com/us/app/contrast-color-accessibility/id1254981365?mt=12
WebAIM
Provides designers with easy to follow guidelines for contrast. https://webaim.org/resources/contrastchecker/
Funkify
Simulates the effects of cognitive disabilities on your screen, allowing designers to empathize with their users. www.funkify.org
Neuron can help you improve your user interface so it is accessible and user-friendly - contact us to get started.