Table of Contents
Welcome in part 4 of UI design – 10 steps for great user interfaces series! So far, in part 1 we discussed how to improve UI design by creating a story, in part 2 everything for streamlining the navigation and in part 3 how to make the design responsive. Today, we are going to talk about accessibility. We will tackle this subject all the way up from basic links to screen estate, various health disabilities and limitations and finally content management. I hope this part will help you 10x your design skills as well.
Accessibility in UI design
Before moving on to individual steps you can (and should) take to level up the accessibility of your UI design, let’s focus on its role in design itself. Why it is so important to spend at least some time during the design phase on this issue? Numbers will give us the best answer. Statistics say that in group of people eighteen years and older, nearly 38 million individuals have some form of hearing problem. That is about sixteen percent.
About 21 million of adult people who have some form of vision impairment.
When it comes to vision problems, it is about 21 million of adult people who have some kind of troubles. To get more detailed picture of this issue, let’s examine this number furthermore. In design, what will probably interest us the most will be color blindness. In men, up to ten percent (average is about eight) are red-green color blind. I don’t have the exact number for women, but most cited number is 0.5 percent. For monochromacy (rod monochromacy) it is about 0.00001 percent for both, men and women.
For men, dichromacy counts for 2.4 percent and 0.03 percent for women. The last form of color blindness, anomalous trichromacy, counts for about 6.3 percent in men and 0.37 percent in women. As you can see from the numbers, in general, men are much more likely to inherit some form of vision deficiency than women. One last thing you might not know …
Even though almost all color blindness is inherited, in few cases a change in the chromosome during early development can cause color blindness as well. Various injuries involving trauma to the eye and even some diseases can also cause color blindness to develop in a person of any age.
No.4: Ensure accessibility
The first and probably the easiest thing you can do in UI design in matter of accessibility to add labels to links. It is simple, fast and the final effect for anyone accessing the website on screen reader and other devices designed for blind people will be huge. This involves two steps. First is to always include some text between the anchor tags (in case of HTML). Second is to always use title attribute with the description for that tag.
In order to test if the title attribute is working as it should, just hover over the link and the title will appear (at least in most browsers). You should also avoid using broken links and make sure to test all links from time to time that the url is valid. Also, remember to use appropriate font size for links to keep them readable.
Next are images. Follow the same approach or strategy as with links – every image must have an alt attribute. This is nothing to be discussed. So, no matter how many images you use in your design, include alt attribute with proper description for every one of them, or remove them. You cannot afford to rely that the images used will be always available and loaded. You know, shit can happen and some image might not be available anymore or the user can be on slower connection. In these situations, when image is not present, alt attribute can provide at least the main context.
Let’s stick with images for a moment. For the reasons mentioned above – image is not available – you should also avoid using image as a link. This method is often used in UI design when it comes to logos on websites. In this case, make sure to use the rule no1 – label and / or title attribute. Another strategy is to use both, image and text as well. Next, you can hide the text with CSS text-indent or visibility properties.
However, when it comes to links I have no advice for you other than don’t do it. Don’t use images as a representations of links. It’s fucking bad and stupid idea and I will tell you why. First, you are forcing the visitor of website to download additional resources that are not necessary (actual images). Doing this, you are increasing the bandwidth and loading time of the website as well.
Second, what if the image will not load at all? I will tell you what. You are screwed and the whole point of accessibility goes through the window. In other words, the link will not be usable and almost not visible. Don’t try to come up with some fallback. Just don’t do this. When you want to show a link, use text. Well, icons might be one exception …
In the beginning we discussed the reasons why accessibility in UI design matters. For us as designers the most important form of accessibility issue will be color blindness. There are various ready-to-use solutions to test your design, but they might not be available for you or the kind of project you are working on. Fortunately, there is a quick fix. Switch your design colors into monochrome settings.
In this black and white “mode” all colors in UI will be represented as shades of grey. In other words, you will simulate situation how color blind person will see the design. In this setting you can now test if the contrast of you design is appropriate and individual elements are recognizable. First, make sure elements does not blend together and all the text is readable. If not, add more contrast between them the elements and background.
Next on item the list is screen prime estate. Do you know what real estate agents say? Location, location, location. The same applies to UI design as well. Every element has some space and some of them should even follow universally used patterns. What you should always plan is what will be presented in screen prime estate. Screen prime estate is the main area of the screen. When you are clear about this, make sure nothing will invade it.
Prime estate remain distraction-free and show what you want to show and what is the main purpose of the design. Even though cta’s are important for business, they should have their own dedicated place in your UI design. For example, the main goal of YouTube is to show you a video. Because of this, the prime estate is dedicated to a block containing only the video and the rest of elements is distributed around it, not invading that video area.
The last thing to discuss is isolating the content. In order to make it easier for user to understand the UI design, be able to move through it and consume the content presented in it you should isolate the content into only few areas. What I mean is don’t spread the content everywhere just because here or there is a bit of space. Instead, use the whitespace to focus the content into one point where it can be presented without distractions or the need to move elsewhere.
Final words
Another part of UI design series is behind us and I hope it gave you tons of information that will help you improve your designs and delight your users and customers. So, what have you learned today? You should always label the links and include title attribute for them. For images, there is an alt attribute. You should never use images to represent links. You also know that monochrome settings can be great way to test for contrast in case of color blindness, what screen prime estate is and that you should always isolate the content.
Thank you very much for your time and see you soon in the next part of UI design – 10 steps for great user interfaces series!
What are your thoughts and suggestion for accessibility in UI design?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
