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
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
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.
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.
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.
Website Accessibility and Equity
Source: 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.
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
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.
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.
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.
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.
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.
Keyboard Navigation
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!
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
