Accessible design is all about crafting websites that enable users with disabilities, impairments, and limitations to experience them the same as any other user.
A user’s visual, auditory, motor, and/or cognitive challenges may require them to interact with the web differently than most. Still, the best accessible websites keep these users in mind and are designed accordingly.
As a business that prioritizes customers, it’s on you to factor accessibility into your own website, from the interface to the underlying code. Whether you’re just starting your build or you’ve had a full-fledged website for years, embracing accessible design ensures disabled users will face far fewer difficulties navigating your site.
Unfortunately, there’s still a common belief that accessible websites are visually boring or unappealing. Yes, accessible design does require you to meet certain criteria. But, unless your ideas are very unconventional, you won’t need to compromise your vision to achieve an accessible website.
In this post, we’ll show you it’s indeed possible to make a website that’s both engaging and accessible to everyone. 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.
What do accessible websites do right?
When designing for accessibility, companies need to consider a range of impairments, including visual, auditory, motor, cognitive, and speech.
To accommodate this diverse group, websites often implement a set of common best practices that outline how visual interfaces should appear and behave. They also specify how the site’s HTML should be coded for easier navigation via screen readers and other assistive technologies.
If you’re looking for a comprehensive list of accessibility standards and best practices, refer to our web accessibility checklist. For now, though, here are some common approaches websites take to provide better accessibility for users with disabilities. We’ll see these come up in our examples later on.
Accessible websites allow users to navigate around and between web pages using the keyboard as an alternative to the mouse. This aids users with limited mobility or fine motor control. Users can jump between buttons and links using the tab key and “click” with the enter key. 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).
Breadcrumbs are another means of making your site more keyboard-friendly (as well as more navigable in general) since users can jump back to a previous page in the hierarchy rather than clicking the “back” button repeatedly.
Alt text (short for alternative text) provides a text equivalent for visual and auditory page elements. Accessible websites include alt text for images and other media content to help screen reader users 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 ...
… might be “seven full coffee mugs on a wooden table”.
Not every image should have alt text — only images important to understanding the content of the page 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.
If your text color is similar to the color of the page behind it, the text is difficult to read. This is called a contrast error, and you’ve probably experienced them before. They make content less accessible to everyone, especially for users with low vision, color blindness, and other visual impairments.
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.
One thing screen readers allow users to do is compile all hyperlinks on a page into a list, in order 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 destination of the link 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.
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. Common semantic HTML tags include:
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
Semantic HTML makes it easier for assistive technologies to understand 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.
Accessible web pages should allow users to increase the size of text up to 200% without disruption to the page layout or the viewing experience. Also, designers avoid putting important text inside images, since this text can’t be scaled up by the browser.
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 lower the accessibility of the website. Accessible sites don’t overuse animations on their pages, instead opting for subtle touches while keeping the focus on the page content. Flashing colors are a no-go, as well as anything that could overwhelm, distract, or disorient a user.
Additionally, if your site features scrolling text or image galleries, it’s a good idea to allow users to stop these animations. If your site doesn’t give people control over how page elements move, that’s points off for accessibility.
Accessible Rich Internet Applications, or ARIA, is a group of HTML roles, states, and properties that describe the purpose of certain 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 progressbar to signal that this element is a progress bar element.
ARIA is a large topic, and there are many standards and a lot of syntax to learn when implementing it on a website. To find out more, start with our intro guide to ARIA accessibility.
Now that we’ve reviewed some common accessibility best practices, let’s check out some examples to see them in action.
Mighty Networks is a website-building platform for community, membership, and educational websites. Additionally, 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 clearly 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.
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 lets businesses counteract their environmental impact by giving to charities and nonprofits.
True to their motto “Putting people and the planet over profit,” the organization’s website demonstrates their commitment to accessibility as well. High-contrasting text, ARIA tags, and thorough HTML page structuring all contribute. Pages are also simple in their content presentation and fully mobile responsive as well.
The BBC website sets a top-notch example for accessible news websites and websites in general. Its pages earn consistently good scores on accessibility scanning tools.
Notable is the website’s keyboard navigation — pressing the tab key twice reveals a “Skip to content” option so users can avoid the extensive navigation located in the page header. Press tab again and you’re given an “Accessibility Help” option that links to a page of useful links.
It’s features like these that prove BBC is committed to providing accessible content and always considers this portion of its audience.
Web design and development agency Built By Silo shows how to make web pages both stylish and accessible. Users can scroll down the homepage and experience a mix of parallax images, text, and an animated background.
The website’s pages are easily tabbable, letting 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.
Event management platform Eventbrite presents an exceptionally accessible website. In addition to letting users “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. However, Eventbrite gets it right by letting users sort by location and event type.
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 makes conscious use of structural elements, including heading elements, 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.
Not only is Partake Foods one of our favorite bakery websites — it’s also one of the more accessible ones that we could find. Users can explore the company’s allergen-free offerings via the mouse or the keyboard.
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).
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.
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, this makes the site more easily navigable as well.
Mysa Skincare boasts an immersive and accessible website to promote and sell its products. The interface is adorned with high-contrast colors, images with alternative text, ARIA markers, and elements utilizing the appropriate labels. While the website also implements subtle animated and transitional effects, they’re not overused or overwhelming.
Membership website Patreon allows audiences to crowdfund their favorite creators on a recurring basis, 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 value of the platform clear to first-time visitors, while adhering to HTML accessibility standards.
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.
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 do an excellent job of making navigation easily tabbable and understandable, providing alternative text when necessary, and including keyboard controls for its audio player to allow accessible listening.
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.
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 too.
Business benefits aside, if you’re a website that cares about inclusivity and delivering an equally delightful experience to every visitor, you’ll strive for an accessible website, just like the examples above. Plus, try taking a look at some of your favorite sites. Are they accessible? What could they do better?
Originally published Oct 15, 2021 7:00:00 AM, updated October 15 2021