The Importance of Accessibility in Design

“The web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.”

This is a statement made by the Web Accessibility Initiative, and is a statement that holds true, now more than ever. As of 2021, almost 62% of the world’s population uses the Internet, and over 6 billion people across the globe own smartphones. These statistics represent a diverse group of people with a multitude of abilities and circumstances - shouldn’t they all be able to access and utilize any app they may want/need? 

What is Accessibility?

According to the Oxford English Dictionary, accessibility is “the quality of being able to be reached or entered.” This is the general definition of the word, but in the context of the digital space, accessibility refers to the ability of anyone, regardless of condition or circumstance, to effectively reach and utilize web-based services.

Accessibility in design affects a diverse group of people, including all three modes of disability. The three modes of disability are:‍

‍

1. Permanent: individuals who are completely disabled; includes physical, visual, motor control, cognitive, and speech/hearing disabilities

Example: deaf, mute, blind, color blind, learning disability‍

‍

2. Temporary: individuals with a physical or mental disability that hinders ability to function for a short period of time, such as from an injury or illness

Example: broken leg, concussion, cataracts‍

‍

3. Conditional or Situational: individuals with some inability to function in a specific situation 

Example: poor wifi connection, broken screen, driving 

Imagine an individual who is blind or partially blind and uses a screen reader in order to interpret information on the Internet. Or a user who has arthritis and relies solely on a keyboard for navigation. Or what about someone who is deaf and cannot engage with auditory content (such as videos or sound clips) without captions or a transcript? 

These individuals represent only a small fraction of the people who would be positively impacted by accessibility measures in design. 

Why Is Accessibility in Design Important?

Accessibility has always been an integral element of the app design process, but in recent years it has become an increasingly larger part of the digital conversation. The question isn’t “do we need to make this accessible?” but rather, “how do we make this as accessible as possible for all of our potential users?”

Web accessibility is beneficial for everyone involved. For users, it allows them the opportunity to access and use tools and resources that may be crucial to their daily life. Consider how many applications there are available, and how many of those applications perform necessary functions in many people’s lives, particularly in the wake of the global pandemic. Think about the mHealth apps that offer life-changing telemedicine services, or applications in the government space, such as the myColorado mobile app that acts as a contactless digital wallet in which Colorado residents can access vital documents. Apps such as these are developed to make users’ lives easier, but if they are not designed with accessibility in mind, they will only make some users’ lives easier. 

It is important to remember that there is no “average user.” Every person has different circumstances they are operating from, and attempting to determine a composite of the kind of user who will be on your app is not a useful strategy. From the perspective of those designing & developing an app, you want as many people as possible to be able to effectively use your app. Designing an app that meets accessibility standards will open the door to a much wider user-base, and is more likely to increase user retention. 

Accessibility should not be seen as a barrier to jump over for app designers. Instead, it is an opportunity to think creatively about how you can make a better product for your audience. And that’s the ultimate goal, isn’t it?

U.S. Laws for Web Accessibility

Another thing to note, however, is the legal requirements for web accessibility. 

The Americans with Disabilities Act (ADA) prohibits certain businesses from discriminating “on the basis of disability in the activities of public accommodations.” The ADA now applies to websites as well, defining them as “places of public accommodation,” and defines twelve categories of private businesses that fall into this definition:

1. Lodging
2. Businesses serving food or drink
3. Entertainment or exhibition
4. Public gathering
5. Sales or rental businesses
6. Service establishments
7. Public transportation
8. Public display
9. Recreation
10. Education
11. Social services
12. Exercise or recreation

We have another blog post that details some basic guidelines for websites and applications in order to remain compliant with ADA requirements. 

Basic Guidelines for Design Accessibility 

As you begin to design with accessibility in mind, there are a few basic guidelines that serve as great starting points for your team. The following list is non-exhaustive, but covers the major categories to be considered for an accessible application. 

Color and Contrast 

Color and contrast guidelines are particularly relevant for users with visual impairments, including but not limited to blindness, partial blindness, color blindness, and temporary visual disabilities such as cataracts or eye infections. 

Be sure to provide sufficient contrast between background colors and foreground text or design elements, for better legibility. Body text should have a contrast ratio of 4.5:1, while large text (such as headers or titles) should have a contrast ratio of 3:1. There are a few tools available for checking contrast, such as the Contrast-Finder by Tanaguru and Contrast Checker from WebAIM. 

Additionally, it’s important to use indicators other than just color for conveying information. When differentiating between elements (such as linked text or success/error states), utilize additional indicators such as asterisks, borders, underlines, icons, and labels.

Appearance

Consider the ways in which different users may view your app. Will they be viewing it on a phone, a tablet, a laptop, or a desktop? Will they need to zoom in, or increase text size in order to better see the content? 

It’s crucial to design your app with all of these circumstances in mind. For a web-based app, ensure that the content is both desktop and mobile-friendly, remaining consistent over all platforms. When setting font sizes, consider users with different visual capabilities and allow for text resizing. Remember that some users may need to zoom in on the content, and your app should be designed to reflow accordingly. 

Navigation

Not all users will navigate your app the same way - some may have difficulty using a mouse or a trackpad and rely solely on keyboard navigation, or perhaps screen readers. Navigation options should be clear and consistent across your entire application, and everything should be accessible by keyboard. 

Headings and Organization

Along the same vein as navigation, headings should be descriptive, sequential, and organized with the appropriate content. Headings help guide users through your app, and are especially useful for those who rely on screen readers to navigate online content. Ensure that the content associated with each heading is clearly identifiable, and make sure you don’t skip heading levels.

Images and Media

There are a number of ways you can make the images and media in your app more accessible. For users with visual impairments, it’s imperative to provide alt-text for any images as well as captions & descriptions for videos, all of which can be interpreted by a screen reader. Users with auditory impairments will benefit from transcripts created for auditory media (such as recordings of music or podcasts). 

Additionally, make sure to provide visible pause controls on video & audio media and avoid including anything that autoplays, which may be confusing to screen readers or users with cognitive impairments. 

Interactions

All users should be able to easily interact with the elements in your app. For instance, you can create better forms by having clearly defined boundaries for each box (which helps users with mobility or cognitive impairments) as well as descriptive labels instead of placeholder text. 

Provide identifiable feedback for user actions, such as using an icon as well as corresponding text to alert a user when they’ve made an error in their submission. Avoid including links or other information that requires a user to hover for visibility - this is especially difficult for people who only use keyboards or speech-activated tools.

Content

Content is perhaps the most important factor in your app’s accessibility. Even if you design every other element perfectly, none of that will matter if the content is difficult to understand. Use plain language, avoid jargon, and keep your sentences relatively short, all of which will help a variety of users better understand your site (including non-native speakers and those with cognitive disabilities). Tools such as Grammarly are useful for checking grammar and readability in your content, which is especially important for users with screen readers. 

Finally, ensure that you use inclusive language within your app. This is a crucial part of making individuals from all backgrounds feel welcome and accepted. Hubspot has an excellent list of resources to use for determining what is and isn’t considered inclusive language. 

Conclusion

As time goes on, accessibility in design becomes more relevant and necessary than ever before. Many aspects of our lives now depend on the Internet, and equal access to these resources is crucial, as well as legally required in some cases. 

There is a plethora of tools available for designers looking to comply with accessibility standards. The Web Accessibility Initiative provides their Web Content Accessibility Guidelines (WCAG) as a universal standard for accessibility in web pages and web applications. Webflow also offers a useful checklist to be used in tandem with the design process.  For more information about legal policies, you can visit the Web Accessibility Initiative’s database on United States and international laws.