Web accessibility is becoming more and more important. According to the latest data, there are more than 300 million people worldwide suffering from blindness or a form of visual impairment (Investigative Ophthalmology & Visual Science June 2020, Vol.61, 2317).
ADA-compliant websites must support screen readers or any other type of assistive technology. They should be keyboard accessible and compatible with speech recognition tools.
Here is a compilation of some accessible website examples. Discover some common accessibility features before making any changes to your web page.
As a disability equality champion, Scope is well represented by its accessible website. They are committed to making their website as accessible as possible and test it every 3 months.
The platform home page presents the objectives of the charity. It uses short, but complete sentences.
Readability is further enhanced by large, clean font and line spacing. People with disabilities can customize the site's features, including colors and text size.
Visitors can process the site content through screen reader software. The site is keyboard accessible and user-friendly.
By using the Tab key, visitors can navigate through the menu. It’s possible to skip to main content, search, or navigation.
Oksana Masters is a professional sportswoman and Paralympic sports medalist. Her biography is an inspiration for people with disabilities.
It's no surprise that this is an accessible website. The site features clear graphics and text design for easy reading.
The menu is minimalistic. It includes only the following sections: About me, Schedule and Sponsors.
A notable feature is the special accessible design of the Contact Me form. The required fields are not only highlighted in red but also marked with an asterisk.
This provides equal access to users who are color blind.
Deque presents itself as the trusted leader in digital accessibility. That is a promising title when it comes to web accessibility professionals.
One noticeable accessibility feature is keyboard navigation. Using the Tab, visitors can skip to content or Search.
The buttons are well-designed, and the large text font and spacing allow for good readability and page navigation. There's also an assistant that runs on Intercom.
In the contact form, an asterisk marks each required field.
The main colors on the site are blue, white, and gray. This design creates an ambiance of trust and help.
Parramatta Park is part of Greater Sydney Parklands.
Keyboard users will appreciate easy navigation using the Tab key. The site uses large and bold fonts, bright colors, and user-friendly buttons.
The code structure also supports web accessibility.
The park photos are a great visual aid that brings the page to life and enhances the user experience. The contact form features asterisks to highlight the required fields.
A WCAG requirement for web accessibility is to make the site 'focus visible'. Focus states are design features that highlight which element of the site is in use.
Most of these fields are interactive elements, such as buttons, links, or form fields. Visitors can only focus on one at a time.
Keyboard users could have their navigation blocked by a permanent focus on cookie notification popups.
This site ensures that the focus stays on the main navigation menu until the user closes it. This way the focus won’t jump to any interactive elements that may lie hidden behind the menu list.
SSE has an accessible website that offers users to sign up to find good gas and electricity deals.
The page has been recently redesigned. It's easy to navigate by using keyboard controls.
The text font and size allow for good readability. The site has a clear interface and well-designed buttons.
Color contrast meets WCAG 2.1 guidelines.
The platform is compatible with screen readers and other assistive technologies. It includes SignVideo services for British Sign Language users.
They also offer to print bills and letters in larger format or Braille for visually impaired customers.
This strategic UX design agency offers customers a web accessibility test. They help them to update their design to make it more accessible to people with disabilities.
They also assist their customers to meet the WCAG guidelines.
Their co-founder and head of accessibility is both a co-chair of the World Wide Web Consortium (W3C) and a key writer of the WCAG guidelines.
For their own website, they have chosen the AA level of accessibility.
These open in a new window. Thus, visitors have access to important legal information straight away.
This is not the case on less accessible websites. Their legal and cookies alerts are usually situated at the bottom of the page.
Visitors using assistive devices will only find them at the end of their browsing.
The New South Wales government website is a good example of making digital content accessible to all.
The platform complies with the WCAG guidelines. Their own content is assistive technology accessible.
The site design is clear and easy to navigate even for keyboard users. The text font is large and all the interactive buttons are focus visible.
BBC states that all audiences are important to them. So the site's products and services are presented on an accessible website.
Subtitles provide a transcript of the television soundtrack. This helps viewers with disabilities to follow programs.
BBC also offers audio description for their visually impaired audience. There is also British Sign Language interpretation of some of the content.
Keyboard users can navigate through the page. By using the Tab, they can get to Skip to content and Accessibility Help options.
Wesley Mission is an Australian charity. Their motto is to ”do good to everyone”.
The charity has those in need in mind even when presenting their digital content. Their platform meets the WCAG requirements.
The page is accessible from various devices, including mobile, desktop, and tablets. It has a well-structured code.
The site is also adapted for screen readers and other types of assisting technologies. Keyboard navigation is easy with the mega menu, clear links, and interactive elements.
The accessible design also includes links to pass repeating blocks of text and alternate image text.
The outstanding user navigation features enhance the functionality of this travel booking website. The focus state is well designed.
Keyboard users can navigate through the website with ease. When a new interactive button or link is selected, it opens in a new pop-up window.
Visitors can close it with the Esc control on their keyboard. This popup design is a great example of accessible browsing.
Another useful navigation feature is the Skip to... function, which appears in the middle of the screen. Right from the start, the digital content is accessible to all visitors regardless of impairment or disability.
The information is accessible via keyboard navigation, screen reader, or speech recognition software. The site also offers up to 300% zoom for users who are visually impaired.
The HTML is semantic and well-designed.
The page also uses the Accessible Rich Internet Applications (ARIA) attributes. This feature contributes to better accessibility for people with disabilities.
They can help screen reader users find the right form and fill them in. The ‘Is there anything wrong with this page?’ link has aria-controls and aria-expanded=”false” attributes.
Accessibility should be the goal of any product, service, or digital content provider. It is both a moral and legal obligation.
Special guidelines set the standard of equal access. People with disabilities who use special software and assistive technology need to be able to navigate the world wide web.
Besides making websites more user-friendly, there are some additional benefits. It will open a business up to a wider customer base and enhance the credibility of the brand.
Another advantage of making a site accessible is that it can boost SEO. The descriptive text for images and transcripts for video and audio files provides feed for the search engines.
However, a site will not meet the desired requirements by chance. Creators must take active steps to make the design compliant with the guidelines.
These accessible websites examples will help you to see what changes are possible.
If you enjoyed reading this article about accessible websites examples, you should read these as well:
Free cheat sheets available
Subscribe to download a set of cheat sheets for CSS, JS, and HTML
You'll receive an email with the cheat sheets in an instant.