What is Web Accessibility? An Introduction for UI/UX Designers

Web accessibility is an integral part of web design… but it’s not always treated that way. Learn why web accessibility matters.

If your UX design isn’t accessible to people with disabilities, is it really UX? UX design is a web design specialization especially concerned with an individual’s ease of access to information and general enjoyment. So by its very definition, accessibility considerations enable UX designers to create products for ALL users.

Digital accessibility is a right, yet it’s estimated that just 2% of websites across the internet meet Web Content Accessibility Guidelines (WCAG). And since digital accessibility vastly impacts the livelihood and well-being of people with disabilities, UX designers have an urgent opportunity and imperative to make products accessible.

Read our rundown of web accessibility and learn how to create an accessible web design.

Table of Contents

woman in glasses with hand on face, thinking

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

What Is Accessibility?

Before explicitly explaining the importance of web accessibility, let’s lay the groundwork. What is accessibility?

The basic definition of the word accessibility is the concept of being able to be reached or entered.

For instance, if I keep my phone on, I’m accessible to my friends, family, and telemarketers. However, if I power off my phone to avoid pesky telemarketers, I’ve made myself inaccessible to friends and family.

The phone example is insignificant when you consider the role that accessibility plays in our society. Accessibility refers to the design of sites, products, devices, services, vehicles, and any/all environments so as to be usable by people with disabilities. Accessible design is often the difference between a person accessing or not accessing vital information. But before we get ahead of ourselves, let’s discuss web accessibility.

(Back to top.)

Why Does Web Accessibility Matter?

As mentioned, accessibility is the quality of being reached. In a similar fashion, web accessibility is the inclusive practice of removing barriers to web applications for people with disabilities. Disabilities that web designers should consider include:

  • Auditory
  • Cognitive
  • Neurological
  • Physical
  • Speech
  • Visual

There are federal regulations and laws that address web accessibility, including the Rehabilitation Act of 1998 (Section 508), which requires federal agencies and programs to provide accessible technology to employees and members of the public with disabilities; however, there are few, if any, regulations that regulate web accessibility for private entities.

In practice, UX designers are often responsible for accessibility in the private sector. (Though, it is everyone’s responsibility to adhere to accessibility standards.) And though it may seem like the natural flow of the UX designer’s work, UX accessibility is often pushed to the wayside.

In a 2022 study conducted by WebAIM (Web Accessibility In Mind), the organization found that users with disabilities are likely to encounter several inaccessible elements when interacting with the top one million web pages on the internet. Users with disabilities can expect to encounter errors on 1 in every 19 home page elements that they engage with.

“Errors” noted in the study include low contrast text, missing alternative (ALT) text, mislabeled forms, skipped or absent headings, and ambiguous link text.

These errors in the extensive UX design process can seem minor but have a profound impact on users with disabilities, often negatively affecting their ability to access information and participate in activities that non-disabled people may more easily access.

Continue reading for more information on accessibility, usability, and equity.

(Back to top.)

Accessibility vs. Usability

While on the topic of accessibility, there’s a complementary topic that we must address — usability.

Usability is often confused with accessible design because of their similar definitions, but make no mistake, these two topics are not the same.

What is usability?

Usability is a UX design goal that refers to how easily a user interacts with websites and mobile apps. Designers use a framework of design principles and empathy to predict, recognize, and solve user issues.

This sounds great in theory — ensuring users can easily use a product or service — however, users with disabilities are often not included in usability tests conducted by UX designers and usability engineers.

As explained by WebAIM Associate Director Jared Smith, a usability engineer or facilitator asks an average of three users questions and tasks them with activities to identify the most significant usability issues. This is known as the Rocket Surgery approach, as simple tactics are used to address a complex task. Because a small sample size (that may or may not include disabled people) is used, user experience design flaws have an opportunity to slip through usability tests.

For example, a floating navigation bar may improve the navigation experience of a user without disabilities but may not support the needs of a keyboard-only user. Likewise, a moody website with a muted color palette may evoke a specific emotion but is not recognizable to a color-blind individual.

For this reason, when UX designers consider human-centered design, they must address both usability and accessibility design principles to create designs for everyone. It is also good practice to use a web accessibility tool to identify any implicit biases during usability testing.

📌 Important Note: To detect accessibility issues, WebAIM uses WAVE stand-alone API, a web accessibility evaluation tool. This is the same tool that the organization used to conduct the WebAIM Million study, which detected 50,829,406 distinct accessibility errors across one million web pages.

(Back to top.)

Website Accessibility and Equity

Graphic of family standing on boxes looking over a fence at a baseball game. Two people can see over fence and one cannot despite box, illustrating equality and graphic of family with some family members standing on boxes looking over fence. Taller person does not have box. Shorter person has extra boxes to see over fence, illustrating equitySource: Interaction Institute for Social Change

At its core, web accessibility is about equity.

Equity is the state of being equal in status, rights, and opportunities. In terms of UX design, it is the quality of all people having access to information on the internet. Inaccessible websites create a larger polarity between users with and without disabilities. Web accessibility bridges the gap.

Equity and accessibility work together to recognize the continuum of experiences of web users, and removing all barriers to reaching, entering, and engaging programs, spaces, products, services, digital applications, and more.

(Back to top.)

woman in glasses with hand on face, thinking

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

Learn How to Create Accessible Web Design

We’ve established the definition of web accessibility and the importance of web accessibility, so how do designers create accessible digital products? There are numerous ways you can improve your UX design process to build accessible web designs.

Accessible Forms

Web forms are often used to capture potential customer information and enter them into a marketing workflow. According to mediacurrent’s 5 Commandments of Accessible Forms, considerations around mouse usage, HTML label tags and fieldsets are vital to ensuring a form’s accessibility. While forms are lucrative for marketers, inaccessible forms exclude and/or limit users with disabilities.. To create accessible web forms, designers should optimize forms for assistive technologies like screen readers.

(Back to top.)

ALT Text

ALT text is HTML text attached to an image. When an image fails to load, ALT text appears in the place of the image on a web page. The ALT description isn’t just a convenient fail-safe, low vision and blind people use screen readers that relay the ALT text that describes images. For this reason, it’s important for designers to accurately depict images in ALT text, rather than using it as an SEO tool or omitting it completely.

(Back to top.)

ARIA Landmarks

Interactive and responsive web elements may intrigue people without disabilities, but completely inaccessible to people who use assistive devices. Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) is an accessibility guideline that makes dynamic content and interactive elements developed with HTML and JavaScript accessible to all people.

(Back to top.)

Captioned Videos

Most people benefit from video closed captions, whether you’re watching a foreign film on Netflix or the audio quality on a YouTube video is distorted. However, closed captions are especially relevant and important to people who experience varying levels of hearing loss or deafness. Accompanying transcripts also increase accessibility to video content.

(Back to top.)

High Color Contrast

Users with color blindness or low vision may not be able to view information with poor color contrast. To resolve this accessibility issue, UX designers can use high-contrast colors and images. For example, using bold black text on a light-colored background, instead of white text on a light-colored background.

(Back to top.)

Trackpad, trackball mouse, ergonomic mouse — there’s a computer mouse for most people. However, if you’re like one of the many people who are not able to use a computer mouse because of physical limitations, mouses are useless! In turn, keyboard navigation capability as well as implementing keyboard accessibility testing is a web accessibility best practice.

Though the best practices above will support your UX design, taken alone or a few sporadic considerations will not lead to accessible web design. Designers must commit to and fully operationalize accessibility throughout their entire process, and continuously.

Skillcrush’s Break Into Tech Web Designer program includes an accessibility curriculum, teaching students how to apply accessibility practices to standard UX procedures. You won’t be alone in this immersive learning experience. When you join Break Into Tech, you join a community of budding web designers, web developers, and expert instructors invested in creating inclusive web applications and redefining the tech industry for everyone.

Your tech career is on the horizon — join the Skillcrush community today!

(Back to top.)

woman in glasses with hand on face, thinking

Is Tech Right For you? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

Author Image

Desiree Cunningham

Desiree Cunningham is an impassioned writer and editor and the Senior Content Marketing Manager at Skillcrush. She has a BA in Journalism and Mass Communications and a MA in English, both from Arizona State University. When she's not working with words, you can find her caring for her house plants, reading, or practicing Pilates.