Accessible Website Design: Best Practices

When designing or redesigning your business’ website, you should be trying to make it accessible. Having an accessible website is of practical interest to your business since it allows users with a range of hearing, movement, visual, and cognitive abilities to access your website and become potential customers or clients. It’s also a legal requirement to have an accessible website since January 2021 according to the Accessibility for Ontarians with Disabilities Act (AODA) if your business has over 50 employees. Since website accessibility is so critical, we’ll highlight some of the best practices and tools to help you ensure your business’ website has maximum inclusivity.

How to Know if Your Website Design is Accessible

There are numerous potential concerns for building an accessible website, so how do you ensure your design is inclusive? For that, the World Wide Web Consortium has created a set of international guidelines: the Web Content Accessibility Guidelines (WCAG). These are continuously revised and are currently in version 2.1, with 2.2 to be finished in the coming couple of months. These provide both quick introductions and thorough overviews for inclusive website design and will help you start designing for accessibility and identify any potential concerns.

Best Practices for Building an Inclusive Website

There are many things to consider when building an accessible website design. Here are some of the best practices to build and design an inclusive website:

Start with accessibility in mind. It will be much easier to design a website that meets accessibility standards from the start of a design rather than trying to accommodate these afterwards.
Make sure content is accessible to users in the ways they can perceive. People have varying levels of ability to perceive by sight and sound, so an inclusive website provides alternatives for accessing content.
- Use a variety of media, including text, video, audio, and images to convey information.
- Audio should be captioned or transcribed for speech or include a description for non-verbal sounds such as music.Include descriptive audio which explains what is happening in a video.
- Write detailed and descriptive alternative text (alt text) which describes the contents of an image or video in detail.
Be sure to consider text and screen readers when writing any copy or content. Some might not be able to read the text on your website due to their visual or cognitive abilities.
- For example, don’t include excessive emojis. Screen readers read each of these individually. So a string of 👏👏👏 will be read as “clapping hands emoji clapping hands emoji clapping hands emoji.”
Write with simple language to make it more accessible and inclusive. Often, it’s recommended to write at a “10th-grade reading level.” If more complicated terminology is needed, create a glossary that explains these terms in more simple language.
Make sure your website scales. A scalable website modifies its appearance depending on the screen and text size of the user. This accommodates both the user’s device and personal settings for an accessible experience.
Use spacing, headings, columns, and lists on your pages and blogs. These visually organize your materials into appropriate topics, that allow users to quickly recognize subjects and a page’s organization. Screen readers also use headings to navigate a page, so they are essential for anyone using such tools.
Use sufficient contrast between the background and foreground. Inclusive websites make content easily discernible, and contrast is a huge part of that. For example, black text contrasts more heavily on a white background than a gray font.
Along with contrast, be mindful of colour choice. Visual colour deficiency (often called “color blindness”) is common. While less typical in females, 8% of males in Canada have some form of colour deficiency.
- Use high contrast colours or one colour with grayscale. If using multiple colours, ensure they are visually distinguishable for someone who sees those colours less prominently or not at all.
- Never use colour as the sole way to convey information in a design. For example, in a bar graph, include numbers, text labels, or texture. Someone with red-green colour blindness will have a lot of difficulty differentiating between a red and green bar.

Tools for Designing an Inclusive Website

Since website accessibility is a major concern, there are many tools that help you evaluate its compliance. The World Wide Web Consortium has a list of evaluation tools that includes over 160! These various tools are designed to identify concerns and either suggest changes to improve accessibility or automatically provide them. Here are just a few of Rosewood’s favorites:

AccessiBE

We regularly use AcessiBe when building websites. This AI-powered software continuously scans a website for accessibility concerns and updates pages to be WCAG 2.1 compliant.

They also provide accessScan which will immediately determine if a website is compliant with accessibility standards.

WAVE

WAVE is developed by WebAIM at the University of Utah. They provide comprehensive tools for evaluating and reporting your website’s compliance with WCAG standards. WAVE itself tests one page at a time, but provides a more enterprise-level service through Pope Tech that’s priced according to the number of pages it needs to scan.

tota11y

tota11y is a free accessibility tool that helps you visualize and understand how assistive technologies interact with your website. The tool was recently deprecated in May 2023 by Khan Academy, so its development has ceased. It won’t stay up to date with the latest accessibility standards and may eventually become dysfunctional on newer websites, but for now it’s still an easy and powerful tool to quickly determine your website’s inclusivity.

Start With Accessibility in Mind

With these tips and tools, you can create a website that both complies with legal standards and is accessible to as many potential customers or clients as possible. That will ensure your business’s website has its greatest reach. Our designers are experts in accessible designs and compliance, so if you want help ensuring your site’s accessibility or want an inclusive redesign, contact our web design team.