Keeping "All" In Mind

In an era where technology dominates our daily lives, it is clear that our integration with technology in society will not be going away anytime soon. As we continue to find new and innovative ways to intertwine the physical world with the digital, it is important to keep in mind that these implications will impact people of all kinds.

In this blog, we will discuss how you can design your interfaces to be more accessible to a wider range of abilities to ensure you provide users with the best possible experience.

What Is An Accessible Interface?

An interface is accessible if it follows certain design principles and guidelines to ensure that people across different abilities can access it with ease. An interface designed with accessibility in mind, makes it possible for those with any visual impairment– from low vision to blind–motor impairment, or hearing impairment to be able to interact with digital interfaces.

When designing an interface, it is important to keep people in mind–as in, keeping the people you are designing for as your target audience. Technology is made by people for people, and we need to make sure that the people engaging with it can actually use it. When designing for people, you have to keep in mind that you may be designing for young people, older people, people new to your interface, people who are frequent users of your interface, people who may be new to technology in general, people who are avid users of tech, as well as people who might need additional assistance due to certain disabilities.

Elements That Make An Interface Accessible

Designing an accessible interface uses the same elements that one would use when designing in general. Design as a concept is about creating solutions to people’s problems, so any design principle used to create something new will make something accessible to a degree. Here are some key design principles to keep in mind to ensure your mobile app, website, or digital system is accessible:

1. Have Clear Hierarchy

Hierarchy is the term used to describe the order in which certain elements should be read in regards to importance. When creating a hierarchical system in an interface, you typically want the items that are the most important and often used to be easily accessed. You would also want any text that is important in conveying certain actions to be clearly visible and readable. For example, in a mobile application you would most likely find the main pages of the app to be found in something called a navigation bar. The navigation bar on a mobile app is typically found at the bottom of the screen and is able to be accessed without interacting with additional buttons. This allows users to easily switch pages and see where they are in the interface without having to complete any additional actions. Sometimes, you will see the name of the page a user is on at the top of the screen or within the navigation bar itself for extra clarification.

When creating a clear hierarchical system, you want to make sure that the information or actions that people will typically turn to first are the biggest or most apparent on the screen. A general rule of thumb to follow is that people usually scan a screen from top to bottom. In that case, you want to make sure the main action or page a user is on is labeled either at the top or bottom of the page so that they can easily find it. You wouldn’t want the most important information to be tucked away somewhere, as that would convey to the user that that information is not important.

Hierarchy is key when it comes to creating an accessible interface, as you want to make sure that people can easily figure out the general flow of interactions in your app. It will also make sure that those with visual impairments who rely on text-to-speech to navigate interfaces, can have the information read to them the way it is meant to be understood in the most efficient way possible.

2. Make Sure To Have Proper Color Contrast

Color is another important element to ensure proper hierarchy, as well as accessibility. Color is typically used to highlight certain information and statuses. For example, if you wanted a line of text to appear urgent you would make the text red–this would signal to the user that this piece of information is important in a negative tone. When designing and wanting to incorporate color, although it can serve as a decorative element, it is important to understand that people associate color with meaning. You want to make sure that your use of color is intentional beyond just an aesthetic purpose. Let’s say, for example, you really like the color purple and you want to use it in your interface. There may not be anything wrong with using the color purple, but you want to make sure that if you are using that color that you are using it with something where the purple serves a functional purpose. So maybe because you like the color purple, you decide that you want to use it for any call to action buttons. This works because the color not only brings more attention to a type of button that serves that purpose, but it does so in a way where a user will know that any purple button in the app is something that is interactable and fulfills a main action. When using color in this instance, you want to be purposeful in how you use it so that users are not confused as to what certain actions mean due to the color associated with it.

It is also important to make sure that the colors you are using have proper contrast. Contrast is the visual clarity of certain foreground and background elements.  Black and white are the most common colors used as they are simpler and offer the highest contrast. An applicable example would be reading black text on a white background. Contrast is important in creating an accessible interface as individuals with certain visual impairments–low vision or color blindness–would not be able to easily discern between elements if they are too similar in color or brightness. When the contrast is too low, users will have difficulty interpreting visual elements because it is harder to see. For example, having black text on a dark gray background will already be difficult to read for the average user–if someone with a visual impairment tried to read the text, it would be next to impossible.

Clear contrast allows for specific elements to be easily discerned by users without additional strain. To know if your colors offer the best contrast, we recommend using a tool called WebAim which helps you tweak your color choices to fit varying visual abilities.

3. Don't Rely On Just Text And Colors

Color is another important element to ensure proper hierarchy, as well as accessibility. Color is typically used to highlight certain information and statuses. For example, if you wanted a line of text to appear urgent you would make the text red–this would signal to the user that this piece of information is important in a negative tone. When designing and wanting to incorporate color, although it can serve as a decorative element, it is important to understand that people associate color with meaning. You want to make sure that your use of color is intentional beyond just an aesthetic purpose. Let’s say, for example, you really like the color purple and you want to use it in your interface. There may not be anything wrong with using the color purple, but you want to make sure that if you are using that color that you are using it with something where the purple serves a functional purpose. So maybe because you like the color purple, you decide that you want to use it for any call to action buttons. This works because the color not only brings more attention to a type of button that serves that purpose, but it does so in a way where a user will know that any purple button in the app is something that is interactable and fulfills a main action. When using color in this instance, you want to be purposeful in how you use it so that users are not confused as to what certain actions mean due to the color associated with it.

It is also important to make sure that the colors you are using have proper contrast. Contrast is the visual clarity of certain foreground and background elements. Black and white are the most common colors used as they are simpler and offer the highest contrast. An applicable example would be reading black text on a white background. Contrast is important in creating an accessible interface as individuals with certain visual impairments–low vision or color blindness–would not be able to easily discern between elements if they are too similar in color or brightness. When the contrast is too low, users will have difficulty interpreting visual elements because it is harder to see. For example, having black text on a dark gray background will already be difficult to read for the average user–if someone with a visual impairment tried to read the text, it would be next to impossible.

Clear contrast allows for specific elements to be easily discerned by users without additional strain. To know if your colors offer the best contrast, we recommend using a tool called WebAim which helps you tweak your color choices to fit varying visual abilities.

Conclusion

Creating an accessible interface requires the right balance of color contrast, hierarchy, and iconography to make sure that the information displayed is able to be accessed and understood across a broad range of users. Designing for people means keeping these all in mind and remembering that although technology is useful, it still has to be designed in a way that makes it actually useful and brings ease to the lives of its users. If you want to learn more about common UI terms and how you can use them in your interface, check out our blog Top 10 UI Terms Explained By A UI Designer.