By prioritizing web accessibility, you can ensure all of your visitors — regardless of ability — have a seamless experience on your website. Unfortunately, many sites don’t comply with web accessibility best practices and guidelines. For users with disabilities, a site that doesn't comply is difficult or downright impossible to use.
The good news is that there’s a fix, and that's where enacting accessibility best practices comes into the picture. The solution to this issue is to make your website inclusive for everyone. That includes the format, structure, navigation, visuals, and written content.
I’ve come across websites that only prioritize accessibility for folks with blindness or deafness, and these still isolate a large chunk of the population with a disability. The World Health Organization (WHO) estimates that 16% of the global population has a disability, so your site must serve as many people as possible.
However, with so many folks having various disabilities, it's understandable if you're overwhelmed with where to begin, or aren't sure what adhering to accessibility best practices looks like on your site. Luckily, I am here to help.
.png)
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
I’ll walk you through everything you need to know to develop a site that complies with best practices for accessibility in web design.
What is web accessibility?
Web accessibility is the practice of creating websites that are usable for all visitors regardless of a disability or impairment. To fulfill web accessibility best practices, you must create a site that complies with certain design and development guidelines that ensure your site is set up to accommodate folks with disabilities. This ensures that all users have the same or similar experience regardless of ability.
When asked what web accessibility means to him, Matt Fehskens, Senior Software Engineer II at HubSpot, says, “Web accessibility for me is the ability for everyone to be able to use websites in an unobtrusive and efficient way. This means not requiring people to navigate obstacles just to get to the content they need as well as delivering functionality that doesn’t exclude.”
To me, that’s the key distinction between an inclusive site and one that excludes: Whether or not folks can use the site in an unobtrusive, intuitive way. (I highly recommend you consider this when creating an accessible website.)
Kieran Forde, Senior Content Designer II, at HubSpot, reiterates this. “Web accessibility is about making sure that everyone can have great online experiences, regardless of the technology or assistance they use,” Forde says.
Pro Tip: Before you launch your website's accessibility updates, run a focus group with users who have various disabilities to get real-time feedback on how you can improve.
Who manages web accessibility on the internet?
So, who's in charge of the web accessibility initiative and works to enforce it across the internet? The answer is the members of the Web Accessibility Initiative (WIP) of The World Wide Web Consortium (W3C). These organizations are responsible for publishing the Web Content Accessibility Guidelines (WCAG) (which we'll review below) and related content.
Why is web accessibility important?
One in six people have a disability, according to the WHO. By making accessibility in web design an afterthought, your site effectively eliminates a large chunk of the population from using or enjoying it. And by embracing web accessibility best practices, you're able to offer a more inclusive experience for all. “When I think about accessibility, I try to think about making something that is usable for the greatest possible number of people,” shares Anna Gallo, a Web Developer at HubSpot. “Everyone deserves equal access to the web, and striving for inclusion is the right thing to do.”
Ultimately, your goal in prioritizing website accessibility is that more users can access your site. Charlotte Cameron, Senior Web Developer at HubSpot, summarizes it well. “Designing and developing for web accessibility means more people have equal access to the web,” Cameron says.
I also encourage you to remember that there are plenty of different types of disabilities and limitations to ensure your site caters to as many folks as possible. Some of these include:
-
Blindness
-
Low vision
-
Learning disabilities
-
Cognitive disabilities
-
Deafness
-
Hearing loss
-
Speech disabilities
-
Physical disabilities
Web accessibility isn’t optional — it’s a must-have, and shouldn’t be an afterthought. There’s another crucial reason why prioritizing site accessibility is essential: Because it demonstrates your company’s commitment to inclusivity. By making web accessibility a core pillar of your site, you show your visitors that you care about their experience as individuals.
This investment will boost your brand loyalty and advocacy, but that isn’t why I advise you to do it. Web accessibility is critical because it’s the right thing to do. In fact, I’d argue it’s downright irresponsible to have a website that doesn’t cater to folks with disabilities and limitations. Not to mention, there can be serious repercussions for your company fiscally.
“The repercussions which I think grab the attention of businesses the most are the fiscal ones,” shares Fehskens. “However, more costly than fines can be the loss of users or, even worse, an experience so bad you create an evangelist against your product—this would be someone who has such a distaste that they actively discourage others from using your product.”
Gallo echoes this. “If you are designing and developing your website without accessibility in mind, you are missing out on a huge number of leads and conversions,” she says. “Because user experience and engagement impact SEO, it's also good for your rankings to make sure your site is accessible.”
Ultimately, it’s a combination of all of these reasons that makes web accessibility critical. “Fundamentally, [web accessibility] means equitable access to the web, and everything on it - information, products, services, and opportunities,” says Cameron. “By removing barriers that restrict groups of users from the web, we can promote diversity and facilitate belonging. This benefits business, society, and everyone in it.”
Meeting certain standards for accessibility in web design may sound like the right thing to do at this point (and it is) — but is it required of you by law?
Pro Tip: Don't forget to make your mobile experience accessible, too!
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
How is web accessibility enforced?
Good question! Ultimately, unless you run a government website, there aren’t enforceable laws related to web accessibility — yet. (But if you do run a government site, you have to abide bySection 508 of the Rehabilitation Act guidelines.)
Even though prioritizing web accessibility isn’t technically required by law, it doesn’t mean your business can’t face legal or financial repercussions for being inaccessible. Let's review some examples of large companies getting sued for lacking an accessible website.
In 2023 alone, there were over 4600 Americans with Disabilities Act (ADA)-related lawsuits, according to UsableNet. For example, in the Gil v. Winn-Dixie decision, a court ruled that websites may constitute “public accommodations” under the ADA.
If your business has physical stores, its site can be considered heavily integrated with the brick-and-mortar location. So, your website is considered a “gateway” to the physical store. Because of this, websites constitute “a service of public accommodation,” which is covered by the ADA.
In other words, websites are expected to meet certain accessibility standards. (Psst: Even if your business doesn’t have a brick-and-mortar store, you should still ensure your site meets web accessibility standards. It's the right thing to do.)
Here’s another example of how your business can face legal repercussions. In Domino’s Pizza v. Guillermo Robles, a court ruled in favor of Robles, a blind man who could not order food through Domino’s website and app despite using screen-reading software.
In this case, the 9th U.S. Circuit Court of Appeals panel said, "... alleged inaccessibility of Domino’s website and app impedes access to the goods and services of its physical pizza franchises —which are places of public accommodation."
All that’s to say, to avoid legal trouble — or to avoid pushing visitors with disabilities away — it’s imperative to ensure your site doesn’t prevent anyone from consuming, navigating, or obtaining any of the information you share.
So, how do you do this? I’m glad you asked. The best way is by abiding by Web Content Accessibility Guidelines (WCAG) set forth by the World Wide Web Consortium. I’ll walk you through those standards you’ll need to uphold now.
Pro Tip: Web accessibility best practices change frequently, so avoid thinking of creating an accessible site as a one-off event. You'll need to continuously fine-tune it.
Web Accessibility Standards
The WCAG states that there are four main principles you’ll need to follow to create an accessible website: That your site is perceivable, operable, understandable, and robust. Within these principles, you can dive deeper into guidelines to reference and apply to your site.
1. Perceivable
First, it’s imperative that visitors can perceive or understand and be aware of the content you present on your website.
Keep in mind that “perceive” doesn’t always equate to seeing with one’s eyes — users who have blindness or low vision often use screen reader software, which converts text into synthesized speech or braille characters. Your job is to consider all the ways you can make your content as perceivable as possible when creating and updating your site.
2. Operable
Next up is operable. An operable website means your visitors can use it without disruption. It also means that all visitors can use each part of the site’s functionality, from navigating to the contact page to selecting a link from a menu to playing a video.
Generally speaking, you can make your site more operable by keeping it simple. Additionally, you may consider ditching excess functionality that could impede users with disabilities and limitations.
3. Understandable
In addition, your site content must be understandable. Yes, this refers to both your written and graphic content.
Keep in mind that folks with various cognitive disabilities are visiting your site. You're isolating valuable users if your site is too verbose or jumbled. This also spells trouble for folks who don’t speak your site’s predominant language. Keep it digestible.
This also applies to your site structure. Your pages must be intuitively organized, and your navigation readily available.
4. Robust
Lastly, your content should be robust enough to be easily interpreted by folks with various assistive technologies, such as screen readers. To achieve this, write HTML that allows assistive technologies to parse your code without a visual reference.
Pro Tip: It's not enough if your site is operable but not robust. Aim to check the box on all four of these principles.
How to Make Your Website Accessible
After reviewing the principles above, you may realize that your current site isn’t quite up to par with web accessibility standards. Or maybe you used an accessibility testing tool to diagnose any issues and didn’t receive the best score. Either way, don’t panic — the WCAG offers specific guidelines for each principle we walked through. Let’s unpack how you can implement these best practices to create a site that checks all the boxes for web accessibility.
Or, for an even more comprehensive review of these guidelines, see our complete web accessibility checklist. I highly recommend you use this as it makes adhering to accessibility best practices more digestible.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
Perceivable Web Accessibility Guidelines
Ready to make sure your site is perceivable? Here's what you need to know.
Offer text alternatives.
All non-text items on your page, such as images, videos, and audio, must have a text alternative. This allows folks with blindness or low vision to understand the content. Image alt text is a must-have to add context for all users, so you should add it to all non-decorative images on your site. For decorative images, include the alt attribute but leave it blank, i.e.:
<img src="decorative.png" alt="" />
This indicates to the screen reader that an image exists, but it can ignore it. I’d also encourage you to add alt text for other elements of your site that can be difficult for assistive technologies to interpret, such as graphs or tables.
Offer alternative ways to consume time-based media.
Time-based media comprises audio and video content. For video content, ensure captions are in sync. This assists users with hearing limitations. For audio, ensure you offer a full transcript of the recording.
For instance, check out this video on HubSpot's YouTube channel. Notice how there's a caption that's synced up with the video, as well as a description text detailing what's occurring in the video for folks with auditory limitations?
Structure content in an adaptable way.
This guideline helps ensure your HTML files are written in a way that wouldn’t lose intended information and structure if page styling was removed. For example, proper headings, ordered and unordered list elements, and bold and italic text convey information.
Make your content easy to see and hear.
Utilize color contrast so everyone, including individuals with color blindness, can easily read your content. Additionally, users should be able to adjust any background audio on your site or halt audio playback altogether. This is important for visitors with a range of disabilities.
Some websites, such as HubSpot's, feature a toggle option so visitors can choose their color contrast. This gives visitors complete control over the experience they have on the website.
Operable Web Accessibility Guidelines
Next up is operable. Here's how you can apply this accessibility guideline to your site.
Ensure complete functionality via the keyboard.
Ensure users can navigate your site without a mouse or touchpad, but instead, use the keyboard. For example, the tab key should let users jump between selectable elements on the page, and the enter/return key should "click" the element in focus.
Provide ample time to engage with your website.
Allow users to read, watch, and engage with the content on your site within a reasonable time constraint. If an action on your site includes a time limitation, ensure users can extend or cancel it. The guideline also applies to accessible drop-down menus: If a user disengages with the menu from the mouse, setting a time delay before the menu disappears is necessary.
For instance, on the HubSpot website, the drop down menu doesn't disappear right away. You can check out out yourself.
Avoid blinking/flashing content.
According to W3C, content that blinks or flashes more than three times in a second can trigger seizures. It’s smart to avoid this. But if you can’t for any reason, it’s imperative to provide visitors with a clear warning.
Provide navigation to help users know where they are and where they can go.
A clear page title, meaningful links, a keyboard focus indicator, and proper headings signal to users where they are on your site. Because of this, they are an absolute must.
Understandable Web Accessibility Guidelines
Our next principle to review is understandable. Here's how you can ensure your site is understandable for all folks that encounter it.
Make text content readable.
Think about the full scope of your audience when building your content. Your writing needs to be clear and concise both for folks with cognitive disabilities and those who aren’t native speakers of your site’s primary language. Avoid regional slang and highly technical jargon.
Structure your pages logically.
When planning your site's structure and navigation, intuitively place your navigational links and pages. This means keeping navigation above the fold, most commonly in the page's header (and footer).
Write useful error messages.
Error messages are frustrating, so provide a clear description of the error and instructions to help visitors correct a mistake. For instance, here’s what HubSpot’s error message looks like.
Robust Web Accessibility Guidelines
Last but not least is robust. Here's what you need to know about making sure your site is robust.
Write HTML that can be parsed.
Assistive technologies utilize a web page's HTML file to translate its contents into a different format. Because of this, your pages' HTML code must be well-written. Use start and end tags when required, and avoid duplicate IDs across elements and duplicate attributes within the same HTML tag.
You’re doing a great job keeping up with everything related to web accessibility! Now, let’s look at some tools you can use to help make your site more accessible.
Web Accessibility Tools
The good news is that there are countless web accessibility testing tools available to help you determine how you can get your site up to speed. W3C has compiled and shared a list of them on their website so you can peruse some top choices. We also have a list of our favorite tool recommendations. And if you're seeking website accessibility solutions, we've got you covered there, too.
Here are a few tools that I recommend you look into as you embark on your web accessibility journey.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
WAVE
WAVE by WebAIM offers several tools to help evaluate how accessible your site is. It provides a visual representation of the portions of your website that could use improvement. This makes updating your site more straightforward.
To begin, enter your site URL, and Wave will highlight which areas of your site don't meet WCAG standards. You'll also get a human audit and review of your website's content.
DYNO Mapper
DYNO Mapper by Indigo Design Company LLC is a sitemap generator — meaning it uses sitemaps to display how accessible your site is. It does this after conducting content inventories, audits, and keyword tracking. I like this tool because it’s highly comprehensive.
The tool also integrates with Google Analytics to allow in-depth analyses with identifiable areas for accessibility improvement. Dyno Mapper tests many different types of sites, including public, private, and online apps, so it scores points for its thoroughness.
SortSite
To make your website's colors accessible, I suggest using the A11Y Color Contrast Accessibility Validator by A11Y Company. It reveals any color contrast issues on your website or web pages. In the tool, you can test by URL or identify a specific set of colors (by using their hex codes or locations on the color wheel).
Wherever the tool detects errors in color contrast, it will suggest recommendations on how to fix them according to WCAG standards.
A11Y Color Contrast Accessibility Validator
To make your website's colors accessible, I suggest using the A11Y Color Contrast Accessibility Validator by A11Y Company. It reveals any color contrast issues on your website or web pages. In the tool, you can test by URL or identify a specific set of colors (by using their hex codes or locations on the color wheel).
Wherever the tool detects errors in color contrast, it will suggest recommendations on how to fix them according to WCAG standards.
Image SourceWeb Accessibility Examples
Want some inspiration to help you brainstorm how to bring your site to life with these web accessibility best practices front and center? I recommend these accessible websites you can reference when designing or recreating yours.
1. W3C
Unsurprisingly, W3C has everything an accessible website should, including well-structured HTML with clear tags to denote structure, color contrast, simple language, and a focus indicator for the currently selected page element. Peruse this site for an example of what excellence in website accessibility looks like.
2. The Cram Foundation
The Cram Foundation focuses on supporting those with disabilities, so of course, it has a WCAG-compliant website. The site balances web accessibility with an aesthetically pleasing and branded design. The bright site meets all WCAG color and contrast standards, and its navigation is accessible in both structure and color, which stands out to me.
3. US Center for Disease Control (CDC) and Prevention
The US Center for Disease Control (CDC) and Prevention is a government website that must be accessible. It does meet this goal, thanks to a myriad of accessible features it includes. The site includes a page that outlines how the Center works to meet and exceed the accessibility standards set forth in Section 508. Additionally, the page describes how visitors with comments about their web accessibility can get in touch.
The site's standard navigation is digestible, which stands out to me. It also offers visitors a couple of different navigation options so they can maneuver around the site in the way that best suits their needs.
Several different content types are available on the site, too, so visitors can get the information they need in a format that works for them (e.g., written, audio, video). This is crucial for a government site with a wide audience.
-1%20copy%20(1).webp?width=650&height=345&name=PILLAR%20what%20is%20web%20accessibility%20(standard)-1%20copy%20(1).webp)
4. Healthmonix
Healthmonix leverages cloud-based technology payment solutions for health systems and medical groups. Its website demonstrates an impressive adherence to accessibility standards. The navigational layout is intuitive, the content is structured in a clear hierarchy, and color contrast ensures readable text.
5. Unilever
Unilever owns 400 brands and sells consumer goods to over 2 billion people globally. For this reason, it has committed to ensuring its website is accessible to all visitors — and it shares information about this investment on a dedicated site page. (Psst: Creating a statement outlining your commitment to accessibility is a great idea!)
The website's accessible features include accommodation for assistive technologies and code (e.g., screen readers, software for text-to-speech or speech-to-speech, keyboard emulator, screen magnifier, enhanced UI, and visual styling).
Unilever's website also meets or exceeds the WCAG regarding color and contrast, layout and navigation, browser support, text alternatives, audio and video content, and more.
6. The Financial Gym
The Financial Gym is a personal finance coaching service with an accessible website. It utilizes text and image colors to offer ample contrast while maintaining adherence to the company's branding. Layout and navigation are intuitive enough to navigate with a screen reader and a keyboard. Also, videos on the homepage do not auto-play, so users have full control over the media playback.
7. The White House
Like some other websites mentioned, the White House is a government site, so it must offer an accessible experience for all users. When you arrive on the homepage, visitors are greeted with a section where they can toggle high contrast and alter the text size.
I love how front and center this is, as users don’t have to search the site to make accessibility adjustments. As you can see, there is alt text, too. Then, at the bottom of the page, you can learn more about accessibility by checking the accessibility statement page.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
Tips for Creating Equitable Web Experiences
Ready to dive into actionable ways you can build equitable web experiences? I chatted with four HubSpotters for expert tips on how you can meet web accessibility standards.
Start by getting familiar with guidelines and best practices.
You’ve read this post — that’s a great starting point for your journey with web accessibility! Your next step is to dive deeper into the world of WCAG. “It’s important to familiarize yourself with laws and standards related to disability and accessibility,” says Gallo.
“These vary depending on where you live, but the Web Content Accessibility Guidelines (WCAG) is a set of standards that can help website owners achieve compliance with the Americans with Disabilities Act, Section 508, and other laws. Reading more about WCAG standards is a great starting point.”
By using your resources, you can ensure that you’re covering all your bases when it comes to web accessibility. “There are some great practical tips on the w3 Writing for Web Accessibility page,” says Forde.
Pro Tip: Peruse examples of other accessible sites to get inspired as you create yours.
Remember: Website accessibility isn’t an afterthought.
The earlier you prioritize website accessibility, the better off you’ll be. “Prioritize accessibility as early as possible,” recommends Cameron. “This is called ‘shifting left;’ the idea is to keep accessibility in mind as early into your product lifecycle as possible. This tends to lead to a better user experience for all users. It also hugely reduces the effort required to make a site accessible compared to trying to identify and fix issues after the fact.”
Taking a proactive rather than reactive approach allows you to immerse your users in a completely accessible site. Moreover, your users will likely be able to tell if accessibility was an afterthought for your company when building the site. “It’s easier to build something in an accessible way than it is to go back and fix accessibility issues after the fact, so considering accessibility as early in your project as possible is always a good idea,” says Gallo.
Pro Tip: When working on your website build or redesign, assign one person the role of begin an accessibility advocate. Throughout the project, ask them to flag potential issues and advocate for accessibility.
Design for everyone.
I can’t reiterate this enough: It’s important to consider the range of disabilities folks have when creating your site. “Some people with disabilities rely on assistive technologies such as screen readers and keyboard navigation, and there are special considerations we must make when designing and developing a website to ensure assistive technologies work correctly on that site,” says Gallo.
“However, making sure your website works with assistive technologies is just a starting point in creating an equitable experience. There are also best practices to make things more usable for neurodivergent people, people with dyslexia and dyscalculia, and people with anxiety, among many other considerations.”
By considering as many different disabilities as possible, you can build a truly equitable web experience for all. “The first persona that comes to mind when most people think of web accessibility is users with blindness, but there are many others,” says Fehskens.
“My favorite example of users that I believe are routinely overlooked are those with arthritis. Imagine having rheumatoid arthritis in your hand, which makes it difficult or impossible to use a mouse, but the only way to use a website is through a drag-and-drop interface. This user is incapable of using your website’s functionality because of that drag-and-drop.”
Pro Tip: Use an accessibility checklist to walk through the different disabilities you should design for.
Test your website.
Sure, testing can help you diagnose problems off the bat. Still, if you rely on automated testing, you’re missing out on a wealth of information that can help you better construct a truly equitable web experience. “Don’t rely on automated testing - manual testing is just as important,” says Cameron.
“There are a number of excellent tools which you can use to audit your website’s accessibility (like axe DevTools - not sponsored!), but these tools aren’t a replacement for manual usability testing. The best thing to do is to get hands-on - try navigating your website with a keyboard or with screen reader software. You’ll likely run into friction points you didn’t realize were there.”
Pro Tip: Test your website on multiple tools to gain different insights.
Try it yourself before rolling out the website.
Before you introduce your website to the world, it’s wise to try it yourself to determine if there are any obstacles you’ve overlooked in the design and development process. “I especially think it's important for everyone involved in producing a web product (designers, engineers, program managers, etc.) to use their website without a mouse,” says Fehskens.
“Just use your keyboard and try to tab through to your content. It quickly becomes apparent the hurdles anyone who cannot use a mouse must traverse as their basic experience with the web.”
Pro Tip: Don't forget to try your mobile app, too!
Remember that web accessibility is a journey.
The first time you publish your website certainly won’t be the last time you update it, right? Web accessibility is like that, too. It’s important to continuously update your site to reflect new, up-and-coming best practices or standards.
“Try to view building an accessible site as an ongoing process, not a one-off event,” suggests Cameron. “As your website grows and evolves, continuing to place emphasis on ensuring your site is inclusive and accessible will help to ensure everyone has equitable access to your content.”
Pro Tip: If you need help creating an accessible site, consider working with an accessibility consultant.
Designing Websites for Everyone
By making your site accessible, you can rest assured your site will appeal to as many folks as possible — not to mention, avoid potential legal ramifications. “I think it’s so important to note that developing with accessibility is a rising tide which lifts all boats,” shares Fehskens. “Providing accessibility for all users will only improve the overall experience for all users, and when you do that, you provide a product/service that keeps your users coming back time and time again.”
By enriching your website with accessibility best practices, you’re helping all your users. “Creating accessible experiences almost always benefits a much wider group of people than just people with life-long conditions,” says Forde.
“Using high color contrast and large text in a design benefits people with sight conditions, as well as people working on screens with sun glare. Adding captions to a video helps people with hearing conditions, as well as people who forgot their headphones, or people trying to watch something on mute whilst they rock a baby to sleep. Writing clearly and simply benefits people with cognitive conditions, as well as people learning a new language.”
Now that you know why web accessibility is essential, you can prioritize it in your site design. This will create a memorable and positive UX and help you boost customer loyalty.
Editor’s note: This post was originally published in February 2021 and has been updated for comprehensiveness.
