Accessibility in LookUp

With the first version itself, LookUp has had an immense focus on accessibility, not only is it essential for a good user experience it’s also something that I deeply care about, and I wanted to start this design blog by highlighting some of the Accessibility enhancements made to LookUp.

Color Contrast

Colour is not the only means of differentiation in the UI, however the difference between the colours in the foreground and background are easily distinguishable.

Shown here are the different color contrast ratios for LookUp’s heading labels. I use Contraste by Laurent Baumann to check the ratio values for my apps. (Contraste’s cards are seen in this image, with the contrast ratio’s and their conformance to the WCAG’s guidelines)

The colour contrast for each of the headings and text elements in the app is at least 4.5:1, ensuring that the headings are at least comformant with the WCAG’s (Web Content Accessibility Guidelines) Level AA. And for longer text the contrast is greater than 7:1, making it conformant with the WCAG’s Level AAA.

Maintaining a high contrast ratio is is important for for readability.

Color Accommodations

In addition to having a minimum of Level AA conformance in the UI, each of LookUp also pays close attention to the Color Accommodations.

Showing a change of state is important and it shouldn’t just rely on a change of color. So, when a user taps to like a word, the heart gets a pink coloured fill. So, a change from a pink coloured stroke to a pink colour fill is visible even if I get rid of all the colour.

It’s important for us to show a change in the UI in such a way that people using their iOS device in any color setting can distinguish between different states of the app.

Tab Bars can be tricky sometimes, their selected states must fill or change their stroke width according to the glyph. Here, apart from the change in colour even be visible on grayscale interfaces, the selected state also shows the text in bold. Much of it is easily available when using iOS’ standard tab bar controller.

This is especially important for people who may have some form colour blindness. With enough contrast and visual difference, the experience for each user is just as good regardless of how they see the world.

Keyboard Support

Supporting Keyboard shortcuts and keyboard navigation is not only important to stay in lockstep with the platform when making an iOS App but it’s also an important accessibility feature that helps users with motor disabilities or visual imparements to use the app with ease.

With LookUp, every feature of the app is accessible through a keyboard shortcut or can be navigated through the arrow keys of a keyboard. This makes it easy for people using the iPad to write, who can then use LookUp to search for references without having to interact with the screen but it’s also very important from an accessibility point of view.

Voice Over Support

One of the most basic features for Accessibility support, LookUp has an enhanced VoiceOver support that lets users to navigate the app, just like they’d navigate a system app using the VoiceOver feature.

A recording of how LookUp’s VoiceOver support for Word of the Day Works

The left to right swipes and taps work just as intended, consistent with the rest of the platform. The buttons and UI elements also have clear labels, hints and actionable information.

But VoiceOver support doesn’t just end here. When a user taps on a Word of the Day, the VoiceOver clearly describes the word along with its meaning.

A look at Voice over from when the feature came out, earlier this year.

—
These are just a few enhancements made to LookUp in terms of accessibility. I would love to improve the app further and get more feedback on the app’s accessibility feature.

If you‘d like to provide feedback and test the app’s accessibility options, you can fill up a link here