At its core, accessibility is all about inclusion. Accessibility means designing your products so that they can be used by everybody, at any time, and in all situations.

When we’re creating a new application or program, it’s vital to consider the many different ways users will access and interact with it. In this article, we’ll discuss why accessibility is so important, its many forms, and the various ways you can ensure maximum accessibility.

You can also learn more from the accessibility module in our  Learn Intermediate CSS course, which shows you how to make your web pages accessible to everyone.

Why is accessibility so important?

In 1990, the Americans with Disabilities Act (ADA) guaranteed access to public and private spaces — including digital spaces— for people with sensory, cognitive, and physical impairments.

Developers need to include additional support for users with disabilities and impairments, not just because it’s legally required but because it’s the right thing to do. Everyone deserves to have full access to digital products, whether for communication, work, or recreation.

Designing for accessibility is also great for your business. Expanding your user base through accessibility can help maximize your customers and profits — not to mention your community, which will make it easier for people to hear about your product through word-of-mouth. Plus, with a large and diverse customer base, you’ll receive more feedback about how to further improve accessibility in future products.

What does accessibility mean in different situations?

As we said at the beginning of this article, accessibility means designing for all situations and all types of users. But what does that mean in practice? How do you know if you’re designing or programming to be as inclusive as possible? We’ll show you how with the following tips.

Support for all devices

Accessibility means that your product is available and functional on all devices, from laptops and desktops to tablets and smartphones. It also means that your product works on multiple operating systems, like iOS and Android.

Designers need to keep the varying screen sizes of different devices in mind when building an application. Applications should accommodate these different sizes without sacrificing performance or optimal user experience.

One way to ensure your application supports all devices is through responsiveness. Responsiveness allows applications to automatically adjust to a user’s environment, such as screen size, platform, orientation, and more. Most programming languages automatically determine what type of device a user is on, making it easy to establish responsiveness. Wanna learn more? Check out our module on responsive design.

Designers also need to keep in mind the different ways users interact with applications across different devices. For example, we use a mouse to scroll through a website on a desktop, but on a smartphone, we use our fingers. It’s important to make sure that the actions available to users are the same across these devices. In other words, a mouse click should be the same as a tap of a finger.

But what happens when certain actions are only available on specific devices? Say your application features a tooltip users can hover their cursor over on a desktop for more information. You can’t hover on a smartphone, so you’d want to include an icon mobile users can tap to view the information. Making up for differences across devices helps designers ensure a consistent experience. Learn how in our lesson on browser compatibility.

Support for disabilities

Accessibility also involves supporting users with disabilities. The most common disabilities are:

  • Visual impairments
  • Hearing impairments
  • Mobility impairments
  • Cognitive impairments

Support for each of these disabilities is an important consideration that will affect the specifications of an application, website, or product’s design. Here are some ways that you can start designing for people with disabilities.

Visual impairments

There are several steps you can take to make your application more accessible for people with visual impairments. Consider adjusting your color scheme or including additional icons for those who are colorblind. Colors play a significant role in making web pages more accessible — check out our accessibility module for more information.

You can also make sure the HTML on your website is parsable by screen readers. Screen readers are software applications that work with a device’s operating system to translate text, icons, dialogue boxes, and images into speech or braille.

Hearing Impairments

Adding captions to your video content helps ensure accessibility for users with impaired hearing. If your application relies on sound for notifications or other outputs, consider adding visual cues as well.

Mobility impairments

There are several ways we can support people with impaired mobility, precision or fine motor skills. For example, increasing the click radius of your application’s icons and spreading them out across the page makes navigation easier for these users and helps ensure accessibility.

You can also design an application to be keyboard accessible. Some users may have difficulty using a mouse, so navigation could be done by allowing them to tab through the page.

Cognitive impairments

There is a wide range of cognitive impairments, but sticking to good design practices helps ensure our websites are easy to navigate and accessible to all. Examples of good design practices include:

  • Keeping user flows simple
  • Maintaining consistent navigation menu location
  • Keeping content organized the same across pages

Maximizing accessibility

We can all make an effort to program and design products that are accessible to all. Check out the Web Content Accessibility Guidelines (WCAG) for more information and great examples of how you can maximize accessibility. Then, put your knowledge to practice by completing the accessibility module in our Learn Intermediate CSS course.

Related articles

7 articles
A-Beginner-s-Guide-to-Sass.png?w=1024

A Beginner’s Guide to Sass

09/20/2021
By Codecademy Team

Not sure what the difference is between Sass and CSS? Learn exactly what Sass is, how it works, why Front-End Developers love it, and why you should learn it.