Accessible design is about creating a site that enables users with disabilities, impairments, and limitations to experience the design like any other user. In short, every website should be an accessible website.
Thanks to organizations like WC3, we’ve made a lot of strides in optimizing the website experience for all users. But of course there are still a lot of improvements that can be made. As I’ve been writing this piece and studying dozens of websites, I’ve noticed how many sites are lacking critical components of accessibility. (If you want to know how your site ranks for accessibility, check out our accessibility checklist.)
To show you what’s possible, I’ve handpicked some websites that get accessibility right, from smaller ecommerce to major brands. This should encourage you that it’s possible to build a website that’s engaging and accessible to all folks, regardless of impairment.
Table of Contents
.png)
The Ultimate Google Ads PPC Kit
A free guide and template to help run Google Ads campaigns.
- Set your budget.
- Research your keywords.
- Plan your ROI.
- Grow your business.
Download Free
All fields are required.
What Makes a Successful Accessible Website?
When designing your website for accessibility, you must consider a range of impairments, including visual, auditory, motor, cognitive, and speech. To successfully accommodate this diverse group, sites often implement standard best practices that outline how visual interfaces should appear and behave. They also usually specify how to code your website’s HTML for easier navigation via screen readers and other assistive technologies.
For a comprehensive checklist of accessibility standards and best practices you can enact on your website, check out our handy web accessibility checklist. The checklist walks you through all the must-haves for accessible website design.
I’ll also share how your site can provide an enhanced user experience for visitors with disabilities. You’ll see these features come up in my accessible website examples later on.
Keyboard Navigation
One important feature of accessible websites is allowing users to navigate around and between web pages using the keyboard as an alternative to the mouse. This is essential for users with limited mobility or fine motor control. Because users can hop between buttons and links using the tab key and “click” with the enter key, keyboard navigation can significantly affect how users with disabilities engage with your site.
Many websites also let users “skip to the content” of a page and avoid the navigation menu on the page (which would require a lot of tabbing to get through).
Using breadcrumbs is another technique to make your website keyboard-friendly and navigable. With the help of breadcrumbs, users can jump back to a previous page in the hierarchy rather than repeatedly clicking the “back” button.
When thinking about this feature, I have to remember that my experience navigating a website is just my own. Just because it makes sense to me doesn’t mean it’s helpful for a wide range of users. Following these accessibility techniques is a good first step.
Alt Text
Alt text (short for alternative text) offers a text equivalent for visual and auditory page elements. Though I talk about the value of alt text for SEO often, it’s also a crucial component of improving accessibility. Accessible websites include alt text for images and other media content as it allows screen reader users to understand the page content. Alt text is added with the HTML alt tag.
Good alt text is short, concise, and appropriately descriptive of its associated content — the goal is to offer a text equivalent in case a user can’t perceive the content visually or audibly. For example, effective alt text for the image below could read “seven full coffee mugs on a wooden table.”
Not every image should have alt text — only images essential to understand the page's content should include it. Decorative images, such as image backgrounds, do not need alt text but should still include an empty alt tag to alert assistive devices that these images are not part of the page content.
When I’m writing alt text, I like to think about what someone would need to know about this image if they couldn’t see it.
Color Contrast
If your text color is similar to the color of the page behind it, the text is difficult to read. This is a contrast error, and you’ve probably experienced it before. Unfortunately, if you have a contrast error on your website, it becomes less accessible to everyone, especially for users with low vision, color blindness, and other visual impairments. That’s why the right color contrast is crucial.
Accessible websites minimize or eliminate contrast errors, officially defined as cases in which text has a color contrast ratio of less than 4.5:1 with the background. You don’t need to know exactly what this looks like, though. It’s easy to run your site through a color contrast checker to highlight contrast errors for you.
Some websites, such as ours, offer users the ability to change color contrast.
This is one of the biggest learnings for me as I’m improving my approach to accessibility. Even though I’ve been writing for and helping build websites for a decade, I never realized the difference that color contrast could make for different users. Now it’s one of the first things I look for when evaluating a website for accessibility.
Meaningful Links
One thing screen readers allow users to do is compile all hyperlinks on a page into a list, to navigate a website more quickly. Because of this function, accessible websites use meaningful text in their hyperlinks. Consider the following two sentences:
- Click here to read HubSpot’s web accessibility checklist.
- Click here to read HubSpot’s web accessibility checklist.
While both examples link to the same page, the second is more accessible because the link's destination is clear from its constituent text. If you saw only the words “Click here” in a hyperlink, that wouldn’t tell you anything about where that link leads.
Pro tip: Always opt for descriptive, meaningful link text as it assists people who are using screen readers.
HubSpot's Free Website Builder
Create and customize your own business website with an easy drag-and-drop website builder.
- Build a website without any coding skills.
- Pre-built themes and templates.
- Built-in marketing tools and features.
- And more!
Semantic HTML
HTML is the language of the web — it sets the content and structure of web pages. Accessible web pages utilize semantic HTML, HTML code that tells the person or machine reading the code what each element does. Here are some common semantic HTML tags:
- Heading tags like <h1>, <h2>, <h3>, etc.
- <p> for paragraphs
- <strong> and <emphasis> to identify important text
- <ol> for ordered (numbered) lists and <ul> for unordered lists
- <a> (anchor) for links
- <nav> for the section of the page that contains navigational links
- <button> for, well, buttons
With the help of semantic HTML, it’s easier for assistive technologies to comprehend the structure of a web page, in turn helping users move between page sections and engage with different page elements. The clearest example of this is headings: Properly written heading tags let users jump between different headings of an article to reach the section they want.
Semantic HTML means not just using these elements but using them in the right place. For example, you shouldn’t use <p> tags for headings (or vice versa), as screen reader users would have a harder time distinguishing headings from paragraph content.
Scalable Text
Accessible web pages should allow users to increase the text size up to 200% without disrupting the page layout or viewing experience. Also, designers avoid putting important text inside images since the browser can’t scale up this text.
Minimal Animations and Visual Effects
Visual effects can improve a page to an extent. At a certain point, though, they detract from the experience and make the website less accessible. Accessible sites don’t overuse animations on their pages, instead opting for subtle touches while keeping the focus on the page content. Remember that flashing colors are a no-go, and anything that could overwhelm, distract, or disorient a user.
Pro tip: If your website features scrolling text or even image galleries, it’s wise to allow users to stop these animations. If your site doesn’t provide users control over how the page elements move, that makes your site less accessible.
This was another big learning for me — as I’ve always been attracted to fun, bold, interactive designs. While you should stay true to your visual branding, remember that the experience might not work well for all users. Giving users the ability to “opt-out” of any moving elements can improve accessibility.
ARIA
Accessible Rich Internet Applications, or ARIA, is a group of HTML roles, states, and properties that describe the purpose of specific user interface elements that don’t have semantic HTML tags. ARIA provides more context for assistive technologies where plain HTML cannot.
For example, a progress bar represented by a <div> element (which itself is not semantic) can be given the ARIA role progress bar to signal that this element is a progress bar element.
ARIA is a large topic, and there are many standards and syntaxes to learn when implementing it on a website. If you’re curious to learn more, start with our intro guide to ARIA accessibility.
Now that you’re in the know with the most common accessibility best practices, I’ll share some accessible website examples so you can see them in action.
Accessible Website Examples
- Mighty Networks
- 1% for the Planet
- BBC
- Built By Silo
- Eventbrite
- ACLU
- Partake Foods
- Patagonia
- Girls Who Code
- Mysa Skincare
- Patreon
- World Wildlife Fund
- NPR
- Pink Moon
.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.
1. Mighty Networks
Mighty Networks is a community-building platform — and a great example of an exceptionally accessible website. If you’d like to see this example’s accessibility features in more detail, try running it through an accessibility checker like WAVE.
What I like: The website’s homepage features legible text and imagery with some animated effects and videos that are non-intrusive to the experience. Its pages also make use of ARIA tags and alternative text for assisting screen reader users. Lastly, the content is simple and descriptive of the service.
2. 1% for the Planet
1% for the Planet is a network of businesses and organizations that have agreed to donate 1% of their profits to environmental causes. With over 5,000+ members and hundreds of millions of dollars given so far, 1% for the Planet allows businesses to counteract their environmental impact by donating to charities and nonprofits.
What I like: True to its motto of “Putting people and the planet over profit,” the organization’s website demonstrates its commitment to accessibility too. High-contrasting text, ARIA tags, and thorough HTML page structuring all make this an excellent accessible website example. Pages are also simple in their content presentation and fully mobile responsive.
3. BBC
Next up is the BBC website which sets a top-notch example for accessible news websites and websites in general. Its pages consistently earn solid scores on accessibility scanning tools.
The website’s keyboard navigation is notable — pressing the tab key twice reveals a “Skip to content” option so users can avoid the extensive navigation in the page header. If you press tab again, you’re given an “Accessibility Help” option that links to a page of useful links.
What I like: Features like these prove that BBC is committed to providing accessible content and always considers this portion of its audience, which helps build brand loyalty.
4. Built By Silo
Web design and development agency Built By Silo demonstrates that yes, it’s possible to make a site equally stylish and accessible. Users can scroll down the homepage and experience a mix of parallax images, text, and an animated background.
What I like: I love how the website features easily tabbable pages which let users jump from navigational links to projects to contact information. Despite its visual flair, the pages are relatively simple content-wise, which helps to make the website more accessible to everyone.
5. Eventbrite
Event management platform Eventbrite presents users with a highly accessible site. Website visitors are invited to “Skip to the content” of each page, its layouts are clean, and easy to understand by sighted users and users with low vision alike.
The company also details their commitment to accessibility and shares that they “continue to design, develop and test our digital properties for conformance with applicable accessibility standards.”
What I like: The platform makes an assistive CX technology application available to customers who have trouble typing, gesturing, moving a mouse or reading.
6. ACLU
The American Civil Liberties Union (ACLU) is a nonprofit organization that works to “ensure the promise of the Bill of Rights and to expand its reach to people historically denied its protections.” It works to change policy and file civil cases against discrimination of oppressed groups.
The ACLU website consciously uses structural elements such as heading tags, list elements, navigational elements, and header and footer elements. ARIA tags are present as well to provide enhanced meaning to the HTML, providing more context for accessibility software.
7. Partake Foods
Not only is Partake Foods one of my favorite bakery websites — it’s also one of the most accessible ones out there.
Users can explore the company’s allergen-free offerings via the mouse or the keyboard. In addition, there’s an accessibility toggle in the bottom right corner where you can adjust key elements such as text and cursor size, line height, hide images, stop animations, and even choose more readable fonts.
What I like: The product pages are also accessible, with a simple and logically structured layout, tabbable elements, simple but engaging product descriptions and reviews, and nutrition facts (in text format, not just an image).
8. Patagonia
Patagonia, an outdoor clothing company, sets the bar high for accessible ecommerce websites. Its pages are well-structured, dividing content into regions based on product category, sport, and stories, another key aspect of Patagonia’s brand.
The source code is also rich with ARIA tags, well-coded forms, high-contrasting text, and images with adequate alternative text.
What I like: The site features an accessibility statement on the footer, which is always a nice touch. This page reinforces the company’s commitment to providing digital accessibility for everyone and how it works with Level Access through assistive technology.
9. Girls Who Code
Girls Who Code is a nonprofit that provides programming and educational resources for women and girls pursuing careers in technology. The organization is committed to inclusivity, and its highly accessible website proves its dedication.
The Girls Who Code website presents only the most relevant information on its pages without cluttering, which makes the content usable for anyone. Since most page content is created from simple HTML elements without other visual effects or interactive modes, the site is more easily navigable.
What I like: When I ran this site through the WAVE checker, it had several green flags – including linked images with alt text, form labels, and more.
10. Mysa Skincare
Mysa Skincare boasts an immersive and accessible website to promote and sell its products.
The interface is adorned with high-contrast colors, especially with the text, images with alternative text, ARIA markers, and elements utilizing the appropriate labels.
What I like: While the website also implements subtly animated and transitional effects, they’re not overused or overwhelming.
11. Patreon
Membership website Patreon allows audiences to crowdfund their favorite creators regularly, allowing artists, musicians, educators, and other creatives to pursue projects independently. In exchange, subscribers receive access to exclusive content and other benefits.
Patreon takes a straightforward approach with its design, emphasizing the text and image content to make the platform's value clear to first-time visitors, while adhering to HTML accessibility standards.
What I like: There’s a clear “accessibility” section linked on the footer which explains how to get the most use out of the website’s accessible features. The page offers helpful tips for how users can navigate the website. They also offer a clear channel to reach if you have accessibility-related concerns or questions, which I really appreciate.
12. World Wildlife Fund
The website for the nonprofit World Wildlife Fund (WWF) conveys its mission, initiatives, partnerships, and educational content in a way that is accessible. Like other examples we’ve listed, the fact that WWF doesn’t overload its pages with content helps with accessibility and navigability.
However, the organization doesn’t stop there, taking the initiative to include the appropriate accessibility HTML tags and choose semantic elements to structure its pages. WWF’s current site isn’t made with a traditional CMS that could add some of these features automatically, further showing their commitment to accessible design. I also like how high-contrast this site’s text is.
13. NPR
National Public Radio (NPR) provides free programming to public radio stations across the U.S. In line with its purpose, NPR hosts a website built to serve users of all backgrounds and abilities.
The website takes a simple approach similar to the BBC’s site, with article navigation easily tabbable and understandable. It also offers alternative text when necessary, and includes keyboard controls for its audio player to allow accessible listening.
Often news websites can be too busy with different media elements, so I also like that there’s a ‘text only’ feature available at the bottom of the website where you can check out the articles listed on the homepage without any of the images.
What I like: The simple design keeps you focused on the key information that the news articles are sharing. Given that NPR is an audio-first, the site offers a great mix of multimedia elements to suit visitors with different audio and visual needs.
14. Pink Moon
Last on my list, self-care company Pink Moon expertly works accessibility into its visually-appealing website.
There are almost no color contrast errors, sufficient use of alternative text, appropriately labeled elements and properly used tags, ARIA tags, and logical page structuring on its navigational and product pages.
What I like: This one is a refreshing take on a modern ecommerce site and conveys a brand that puts customers first. Plus, this site demonstrates how you can stay true to your branding and offer a highly-accessible digital experience.
Websites Designed for Every User
Designing a website can be one of the most exciting aspects of starting a new business. After all, you’re crafting an experience to spread brand awareness, drive conversions, and build loyalty — all great things!
And, in my opinion, factoring in accessible design only adds to this excitement. By incorporating accessibility best practices and taking inspiration from other accessible websites, you’re empowering users with disabilities, impairments, and limitations to engage with your content.
If you’re looking for the gold standard in accessible websites, be sure to look closely at the examples from companies like BBC and Patagonia. My favorite feature across all of these websites, too, is a separate page that links to the accessibility features on the site and how you can use them. This would be a great addition to add if you’re looking to improve your website.
Once you’re ready to learn more, check out our guide to WCAG and our accessibility website audit checklist.
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.
Editor’s note: This post was originally published in October 2021 and has been updated for comprehensiveness.
