6 Easy Ways to Make Your UI More Accessible

There’s no doubt that digital products have revolutionized the world. In our lifetime we’ve come to see access to the internet declared a human right.

We are always just a few clicks away from seemingly endless information. We can do everything from paying our taxes and ordering groceries, to interacting with our governments and completing a degree online. Despite this, not all digital experiences are accessible.

While many consider people with disabilities to be a small subset of their users, this is a myth. Almost 1 in 5 Americans has a disability. 54% of Americans with disabilities go online. Thankfully, the world is starting to recognize that the web should be designed for everybody.

An accessible website is one that is designed and coded, people with disabilities can use them. It is important that designers think about accessibility when working to create intuitive user interfaces and experiences.

Currently, only public sector websites must comply with Web Content Accessibility Guidelines 2.0, which holds websites to accessibility standards that are similar to those set for the built environment. In the next year, and for years to come, we will see pressure put on the private sector to begin to comply.

The Interaction Design Foundation explains that 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 some things to make your website 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.

Make the search bar easy to locate & use

As we discussed in our 2019 trends presentation for the Beer and UX meetup, a prominent, easy to use search bar is something 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 alt text to every image

The benefits of alt tags extend beyond SEO. Alt text makes it easy for people with visual impairments to understand your images. This is especially important for images that aren’t purely decorative.

According to Moz, the alt text should be kept short. Because most screen readers cut off the text at about 125 characters, it’s advisable to keep it at or below that number. Instagram made headlines in 2018 when they finally introduced an alt text function on their platform. This move, among others, was an early signal that accessible UI isn’t a trend — it’s standard.

Use 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 are reading. In a WebAIM 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.

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 led 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.