Accessible design focuses on creating websites that allow individuals with disabilities, impairments, or limitations to experience the site just like any other user. Simply put, every website should be an accessible website.

Thanks to organizations like W3C, significant progress has been made in optimizing website experiences for all users. However, there is still room for improvement. A review of numerous websites reveals that many are still missing critical accessibility elements. (For those curious about how their site measures up, the accessibility checklist provides valuable insight.)

To demonstrate what’s possible, here are examples of websites that excel in accessibility, ranging from small e-commerce platforms to major brands. These examples show that it is entirely possible to create a website that is both engaging and accessible to everyone, regardless of impairments.

What Makes a Successful Accessible Website?

When designing a website with accessibility in mind, it’s important to consider a variety of impairments, such as visual, auditory, motor, cognitive, and speech-related challenges. To accommodate this diverse range of needs, websites typically follow best practices that guide the appearance and behaviour of visual interfaces. These guidelines also often include how to structure the website’s HTML for easier navigation using screen readers and other assistive technologies.

For a detailed checklist of accessibility standards and best practices to implement on your site, refer to our web accessibility checklist. It covers all the essential elements for creating an accessible website.

Additionally, there are features that can significantly improve the user experience for visitors with disabilities. These features will be highlighted in the accessible website examples shared later on.

Keyboard Navigation

An important feature of accessible websites is allowing users to navigate web pages using the keyboard instead of relying solely on a mouse. This is crucial for individuals with limited mobility or fine motor control. Keyboard navigation enables users to move between buttons and links with the tab key and "click" using the enter key, making it easier for those with disabilities to interact with the site.

Many websites also include a "skip to content" option, allowing users to bypass the navigation menu and jump directly to the main content. This helps minimize the need for excessive tabbing.

Breadcrumbs are another helpful tool for improving keyboard navigation. They allow users to jump back to previous pages in the site’s hierarchy rather than repeatedly clicking the “back” button.

It's important to keep in mind that a website’s user experience is subjective. Just because a navigation method works well for one person doesn’t mean it will benefit all users. Adhering to accessibility techniques is a solid step toward making your site more inclusive.

Alt Text

Alt text (alternative text) provides a text description for visual and auditory elements on a page. While alt text is often discussed in the context of SEO, it is also a key aspect of improving accessibility. Accessible websites include alt text for images and media content, enabling screen reader users to understand the content of the page. Alt text is typically added using the HTML alt tag.

Effective alt text is brief, clear, and accurately describes the content it represents. The goal is to provide a text equivalent for users who cannot perceive the content visually or audibly. For example, alt text for an image of seven coffee mugs on a wooden table might read: "seven full coffee mugs on a wooden table."

Not every image requires alt text — only images that are essential for understanding the page’s content should include it. Decorative images, such as background images, do not need alt text. However, they should still have an empty alt tag to inform assistive devices that these images aren't part of the page's core content.

When writing alt text, it’s helpful to think about what a person would need to know about the image if they couldn’t see it.

Color Contrast

If the text color is too similar to the background color, it can be hard to read. This is a contrast error that many people have experienced. A website with a contrast error is less accessible to all users, particularly those with low vision, color blindness, or other visual impairments. Proper color contrast is key.

Accessible websites aim to minimize or eliminate contrast errors. These errors are defined as cases where the text color and background color have a contrast ratio of less than 4.5:1. You don’t need to calculate this manually, though — running your site through a color contrast checker can easily highlight these issues.

Meaningful Links

One feature that screen readers offer is the ability to list all hyperlinks on a page, making it easier for users to navigate a website. Because of this, accessible websites ensure their hyperlinks have meaningful text. Consider these two sentences:

• Click here to read EvrimaChicago’s web accessibility checklist.
• Click here to read EvrimaChicago’s web accessibility checklist.

While both examples link to the same page, the second example is more accessible because the link text clearly indicates its destination. "Click here" alone doesn’t inform users about where the link leads, which can be problematic for screen reader users.

Pro tip: Always use descriptive, meaningful link text to assist users relying on screen readers.

Semantic HTML

HTML is the foundational language of the web, establishing the content and structure of webpages. Accessible websites utilize semantic HTML, which conveys the function of each element to both people and machines reading the code. Here are some common semantic

HTML tags:

Heading tags like <h1>, <h2>, <h3>, etc.
<p> for paragraphs
<strong> and <em> to highlight important text
<ol> for ordered lists and <ul> for unordered lists
<a> for links
<nav> for the section containing navigation links
<button> for buttons

By using semantic HTML, assistive technologies can more easily understand the structure of a webpage, helping users navigate and interact with the content. For example, properly defined heading tags enable users to jump between sections of an article.
Semantic HTML isn’t just about using these tags, but using them correctly. For instance, avoid using <p> tags for headings as it would confuse screen readers that rely on these structural cues.

Scalable Text

Accessible websites should allow text to be scaled up to 200% without disrupting the layout or the overall viewing experience. Designers should also avoid embedding important text inside images since browsers can’t scale this type of text.

Minimal Animations and Visual Effects

While visual effects can enhance a page, too many can detract from the experience and reduce accessibility. Accessible websites limit the use of animations and visual effects, focusing on the page content. Flashing colors and any elements that could overwhelm, distract, or disorient users should be avoided.

Pro tip: If a website includes scrolling text or image galleries, it’s beneficial to allow users to stop the animations. Failing to provide control over moving elements can reduce the site's accessibility.

This is an important consideration for designers who prefer bold, interactive designs. While it’s essential to maintain consistent visual branding, it's equally important to remember that such experiences may not be ideal for all users. Offering the option to "opt-out" of moving elements can significantly improve accessibility

NPR

National Public Radio (NPR) offers free programming to public radio stations across the U.S. In keeping with its mission, NPR has developed a website designed to serve users of all backgrounds and abilities.

The site follows a straightforward design approach, similar to that of the BBC, making article navigation simple, tabbable, and user-friendly. It also provides alternative text for images when needed and features keyboard controls for its audio player, enhancing accessibility for those who rely on auditory content.

Many news websites can be cluttered with various media elements, but NPR stands out by offering a ‘text-only’ option at the bottom of the page, allowing visitors to read the articles listed on the homepage without the distraction of images.