Designing iDrop with accessibility at heart
More than 10,000,000 of people have any kind of disability, but you only have to take a quick look at Internet for realizing that companies don’t seem to care about accessibility.
A 98% of the webs aren’t operable for people with color blindness, poor vision, dyslexia, lack of mobility … Too much, people who find a barrier to accessing our digital products, and enjoy the experience we design for them.
Maybe, the cause of it, is the false perception that design thinking in accessibility is boring, cannot being beautiful. Or think that accessibility is an edge case or have to be expensive.
For iDrop, a health app for people with diabetes disease, I have designed the app thinking inclusive due to diabetes may cause view problems. A not attended of the illness affect to eyes and kidneys, and can even cause blindness. For that reason, I’ve designed an App who takes care about been universal, attending to the following assets to create a fresh and dynamic product (and for sure, no boring):
- Typography
- Color palette
- Hierarchy
Is highly important to meet the people, the problems and the different ways to consume our digital product, and Microsoft give us a tool for a first approach about inclusive design principles.
Typography
Typography is one of the main assets to enhance the legibility and readability of our content. I needed an eye-catching combination of fonts, that works in the principles of the accessibility for develop iDrop App.
Orbikular is a classic serif font designed for Cotype Foundry. This functional serif family is defined by a high x-height, ball terminals and high contrast.
Inclusive Sans is a type font designed by Australian designer Olivia King. It aims to incorporate key features to make it highly legible and ensure readability of all users (attended for people whom have learning disability or visual impairment)
These typographies have been chosen paying attention to these guidelines:
Open counters can make the glypho easily distinguishable from each other. More white space means increase letter recognition.
A typeface with x-height longer allows a clarity at smaller sizes.
Inclusive Sans avoiding letter mirroring by exaggerated descenders and asymmetrical spurs
Find a sans serif with no mirroring letter is a big deal. In the picture below, you can find my readability test for the main and most using typefaces of Google fonts.
These fonts have unique glyphs, and you can notice in imposter letters.
Ascenders raising above capital heights increase the recognition of the characters.
You can find further information about this topic in the interesting and useful article, written for Gareth Ford Williams (father of BBC Reight- consider as one of the most accessible typos)
Color palette
The color palette for the iDrop app should be defined according to the main principles:
- Inclusivity: The palette guarantees accessible contrast.
- Scalability: A versatile palette designed to be larger in the future.
- Memorable: Black, blue and orange are a functional, simple vibrant combination that define the brand.
For these reasons, I have created a palette using LCH color space, that represented the color naturally, similar as the human eye does.
In this article of Atmos blog, you can learn more of the color space:
LCH stands for Lightness, Chroma and Hue, and achieve the perceptual uniformity. Making this color space the most appropriate for UI.
As you can see in the image, the perceived luminosity is uniform in all the colors chosen.
I choose some colors from the palette to design the App. But keeping in mind, that there is a scalable system behind, in case we need to add another color in the future.
Contrast ratio for AAA levels
The contrast ratio measures the difference between the light of two color. Achieve higher contrast means an optimizes usability.
I have chosen a range of colors to meet AAA level standards.
I’ve used the Figma plugin Contrast grid to compare style colors in a massive way. That tool give us a guideline to ensure our color combination have a correct contrast ratio.
We pursue the AAA level with contrast ratio higher than 7.1:1 with regular text (smaller than 24px or 19px bold) and 4.5:1 with larger text.
For non-text elements, like icon button or graphic objects, not only use the contrast ratio, I keep the target size large (48x48 px) allowing accessibility for people with physical disabilities. It’s easier to interact with.
For the challenging disable button, I prefer to keep a higher contrast to optimise the usability. In my opinion, It’s a good practice to indicate to the user there’s an option no available.
In the follow article of the plugin Stark, you can find a useful guideline of the contrast ratio levels.
I’ve designed the focus button to maintain consistency in the visual development of components.
The focus button has a strong emphasis to effectively convey the navigation status when users use the keyboard or voice.
Link
The contrast ratio has to be measured with the background (higher than 4.5:1) and the regular text (3.1:1)
I ensure consistent identification in link elements with a visual element: underline. This allows for easy identification of links.
Not just the color
Color shouldn't be the only way to visually convey information. For that reason, I offer an alternative way.
In the example bellow, you can accept or deny the advice provided by iDrop app. I use a high stroke to identify the accepted ones and strike-through for the deny option.
Thanks to the Figma plugin Color Blind I can understand how colors will look from different color blindness. And check the color is not the only way to communicate info with the user.
Input
I’ve designed the forms element including each input has a label outside the input fields because a screen reader only recognizes fields in a form when label is included.
I’ve listed and documented the different input states: Default, active, focus and disable.
Error
It’s a good practice to think about error message in our prototype. For the input field in iDrop App there are a few parameters I’ve followed:
· Identify the error field
· Explain the mistake
· Don’t use the color as the only way to report the error
· Use visual clues to convey the error status. In this case, I complement error input with an icon.
Complex component interactions
For ensure the user can navigate and interact with the elements using different pointing and interaction device (it means to be able to use mouse, keyboard, voice command or a touch device), I offer an alternative to complex gestures.
In the following example, swipe right of the cards to discover the different topics could be a problem for people with motor disabilities. Therefore, I offer the user the alternative of using arrows to scroll over the content.
Orientation’s device
Landscape mode could be comfortable for users with disabilities, by designing the horizontal view I ensure the app is adaptable to users’ choice. Making iDrop more inclusive.
What did I learn?
There are myths, wrong assumptions about accessibility: it’s boring, ugly and complex. But thanks to iDrop project, and the application of practical techniques, I can say: accessibility rules.
Accessibility is much more than a contrast ratio. There are some parameters we have to think of out of color: gestures, typographies, sizes… But like a UX designer, it's necessary to know them and think inclusively. And get our products that avoid excluding a significant portion of potential users.
And it’s compatible for making a cheerful, vibrant and bright app.
Ensuring accessibility is the right thing to do and aligns with ethical principles of equality and fairness.
You can read the full process to design iDrop App in this article:
I’m learning about accessibility and make my digital product more inclusive, so feel free to comment, leave feedback or impressions.
Thanks!
You can meet me at my portfolio’s
