“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.”
“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.”
The Web Accessibility Initiative said this, and it 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 many abilities and circumstances - shouldn’t they all be able to access and utilize any app they 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. Still, 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; including 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 the ability to function for a short period, such as from an injury or illness
Example: a 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 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 accessibility measures would positively impact 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 more significant 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 to access and use tools and resources that may be crucial to their daily life. Consider how many applications are available and how many 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, they will only make some users’ lives easier.
It is important to remember that there is no “average user.” Everyone 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 helpful strategy. From the perspective of those designing & developing an app, you want as many people as possible to be able to use your app effectively. Creating 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 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.
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:
- Lodging
- Businesses serving food or drink
- Entertainment or exhibition
- Public gathering
- Sales or rental businesses
- Service establishments
- Public transportation
- Public display
- Recreation
- Education
- Social services
- Exercise or recreation
We have another blog post that details some basic guidelines for websites and applications to remain compliant with ADA requirements.
Basic Guidelines for Design Accessibility
As you begin to design with accessibility in mind, some basic guidelines serve as great starting points for your team. The following list is non-exhaustive but covers the major categories you should consider 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. For example, body text should have a contrast ratio of 4.5:1. In contrast, 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 crucial to use indicators other than color to convey information. For example, 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 how 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 the text size to see the content better?
It’s crucial to design your app with all of these circumstances in mind. For a web-based app, ensure that the content is desktop and mobile-friendly, remaining consistent over all platforms. When setting font sizes, consider users with different visual capabilities and allow text resizing. Finally, 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 trackpad and rely solely on keyboard navigation or screen readers. Therefore, 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 identifiable, and make sure you don’t skip heading levels.
Images and Media
There are several 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, provide visible pause controls on video & audio media and avoid including anything that auto-plays, which may confuse screen readers or users with cognitive impairments.
Interactions
All users should be able to interact with the elements in your app easily. For instance, you can create better forms by having clearly defined boundaries for each box (which helps users with mobility or cognitive impairments) and descriptive labels instead of placeholder text.
Provide identifiable feedback for user actions, such as using an icon and 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 crucial 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). In addition, tools such as Grammarly help check 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 crucial to making individuals from all backgrounds feel welcome and accepted. Hubspot has an excellent list of resources 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 and legally required in some cases.
There are a plethora of tools available for designers looking to comply with accessibility standards. The Web Accessibility Initiative provides its Web Content Accessibility Guidelines (WCAG) as a universal standard for accessibility in web pages and web applications. Webflow also offers a helpful 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 the United States and international laws.
