FEATURED RELEASES

6 Websites Empowering People with Special Needs + Free AT Checklist

Nov 19, 2024

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.

“Given that NPR is an audio-first platform, the website does an excellent job blending multimedia elements to accommodate both audio and visual needs. What’s particularly effective is the clean, simple design that helps focus attention on the core information presented in the articles. ” - Waasay, Head of PR & News Syndication - Evrima Chicago.

World Wildlife Fund (WWF)

The World Wildlife Fund (WWF) website effectively communicates its mission, initiatives, partnerships, and educational content in an accessible manner. The site avoids overwhelming users with excessive content, which enhances both accessibility and navigation.

In addition to maintaining a clean layout, WWF goes the extra mile by implementing appropriate accessibility HTML tags and choosing semantic elements to structure its pages. This thoughtful approach is especially noteworthy as the site isn't built on a traditional CMS, which might automatically add these features, highlighting the organization's dedication to accessible design. Another standout feature is the site’s high-contrast text, which further contributes to its user-friendly design.

Patreon

Patreon is a membership platform that allows audiences to regularly fund their favorite creators, enabling artists, musicians, educators, and other creatives to pursue independent projects. In return, subscribers gain access to exclusive content and other benefits.

The site adopts a simple, clear design that highlights text and image content, effectively conveying the platform's value to first-time visitors. At the same time, Patreon ensures it follows HTML accessibility standards, making the platform accessible to a wide range of users.

The website features a clearly labeled "accessibility" section in the footer, which provides guidance on how to make the most of its accessible features. This page includes helpful tips for navigating the site, and it also offers an easy way to reach out with any

accessibility-related concerns or questions. This approach ensures users feel supported and can easily access the resources they need.

ACLU

The American Civil Liberties Union (ACLU) is a nonprofit organization dedicated to ensuring the protections of the Bill of Rights and expanding its reach to groups historically denied these rights. The ACLU works to change policies and pursue civil cases addressing discrimination against marginalized communities.

The ACLU's website is thoughtfully designed, incorporating structural elements such as heading tags, list items, and navigational components, along with header and footer elements. Additionally, ARIA (Accessible Rich Internet Applications) tags are used to enhance the meaning of the HTML, providing additional context for accessibility tools and improving the overall user experience for those using assistive technologies.

BBC

The BBC website serves as an excellent model for accessible news websites and websites in general, consistently earning high scores on accessibility scanning tools.

One standout feature is its keyboard navigation. Pressing the tab key twice reveals a "Skip to content" option, allowing users to bypass the extensive navigation in the page header. A subsequent tab press brings up an "Accessibility Help" link, leading to a page with helpful resources and links for users seeking assistance with accessibility features.

1% for the Planet

1% for the Planet is a network of businesses and organizations committed to donating 1% of their profits to environmental causes. With more than 5,000 members and hundreds of millions of dollars contributed to date, the initiative helps businesses mitigate their environmental impact by supporting charities and nonprofits dedicated to sustainability and conservation efforts.

What stands out is the organization's website's alignment with its motto, “Putting people and the planet over profit.” The site showcases its dedication to accessibility with high-contrast text, ARIA tags, and well-structured HTML, making it a strong example of accessible web design. The content is presented in a straightforward, easy-to-navigate manner, and the site is fully responsive on mobile devices.

Websites Designed for Every User

Designing a website is an exciting part of launching a new business, offering a unique opportunity to create an engaging user experience that boosts brand awareness, drives conversions, and builds customer loyalty.

When designing for accessibility, the excitement only grows. By integrating accessibility best practices, businesses empower users with disabilities, impairments, and limitations to engage with content on an equal footing.

For exemplary accessible websites, take a look at companies like BBC and Patagonia. One standout feature from these sites is a dedicated page linking to the site's accessibility features, helping users understand and navigate those options more easily. Adding a similar feature could enhance your website's accessibility. For a deeper dive into the Web Content Accessibility Guidelines (WCAG) and tools to audit your site’s accessibility, consider reviewing guides and checklists by Evrima Chicago’s tech & PR team.

Contributed by: Editorial Team, PR Team & Tech Team, Evrima Chicago.