Accessible design is about creating websites that enable users with disabilities, impairments, and limitations to experience them like any other user. It’s helpful to look at successful accessible website examples to get a feel for what works when you’re starting to craft your own.
Considering how 15% of the global population experiences some form of disability, or roughly a billion people, your organization must prioritize web accessibility.
In this post, we’ll show you it’s possible to build a website that’s engaging and accessible to all folks regardless of impairment. First, we’ll review some basic accessibility measures websites commonly take. Then, we’ll explore some handpicked websites that get it right, from smaller ecommerce to major brands.
.png)
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
What makes a successful accessible website?
When designing your website for accessibility, your company 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.
Let’s dive into how your site can provide an enhanced user experience for visitors with disabilities. You’ll also see these come up in our 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.
Alt Text
Alt text (short for alternative text) offers a text equivalent for visual and auditory page elements. 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 this image ...
… 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. Alt text also has search engine optimization (SEO) benefits.
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.
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.
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. Always opt for descriptive, meaningful link text as it assists people who are using screen readers.
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 abd <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.
Also, 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.
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.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Now that you’re in the know with the most common accessibility best practices, let’s check out some accessible website examples to 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
1. Mighty Networks
Mighty Networks is a community-building platform. In addition, the company offers 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.
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 3,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.
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.
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.
We 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.
Given the diversity of offerings in the event space, we imagine it’s a difficult task to present the many types of events hosted by the platform in one place. But Eventbrite gets it right by letting users sort by location and event type..jpg?width=650&height=394&name=Screen%20Shot%202023-01-12%20at%209.11.00%20PM%20(1).jpg)
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.
.jpg?width=650&height=398&name=Screen%20Shot%202023-01-12%20at%209.14.16%20PM%20(1).jpg)
7. Partake Foods
Not only is Partake Foods one of our 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.
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. The site also features an accessibility statement on the footer.
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.
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. 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. In addition, there’s a clear ‘accessibility’ linked on the footer which explains how to get the most use out of the website’s accessible features.
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. We also like how high-contrast this site’s text is.
.jpg?width=650&height=370&name=14%20Accessible%20Website%20Examples%20to%20Inspire%20Yours-2%20(1).jpg)
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’s homepage and articles make navigation easily tabbable and understandable, providing alternative text when necessary, and including keyboard controls for its audio player to allow accessible listening. There’s also 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.
14. Pink Moon
Last on our 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. It’s 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.
Hopefully, these accessible website examples demonstrate exactly how rewarding incorporating inclusivity into your site design can be.
Editor’s note: This post was originally published in October 2021 and has been updated for comprehensiveness.
![Best Fonts for Accessibility and Visually Impaired Users [ADA-Compliant Fonts]](https://blog.hubspot.com/hubfs/ada-fonts.jpg)