Alphabet®
The Ultimate Website Accessibility Checklist
Twenty years ago, digital spaces were far from the centre of business and commerce. But now, your company’s landing page is often the first touch point consumers have with your brand. This digital-first approach to commerce opens up an array of opportunities, but it also comes with the added responsibility of ensuring your website is accessible to all. Fortunately, all it takes is a few thoughtful and proactive measures. Our website accessibility checklist helps you meet Canadian standards, all while building a website everyone can navigate.
Website Accessibility: What It Entails and Why It Matters
Website accessibility is a straightforward concept—and it’s a requirement by law in many countries. It’s the practice of designing your site in a way that’s inviting and usable for those living with disabilities. Backend code functionality, brand design on landing pages, and more all play into creating an inclusive website.
Accessible web design is important not just because it can boost your reputation or engender customer loyalty, but also because human-centric business practices are an ethical necessity.
Failure to meet social responsibilities are damaging to your brand, which is bigger than marketing and communications, and, more importantly, discriminates against those left out.
So what goes into building a website that caters to a diverse audience? Let’s dive deeper into digital accessibility.
Your Checklist For Better Website Accessibility
This five-step checklist will help you implement several simple yet impactful changes to the accessibility of your website design. It’s your guide to digital inclusivity.
1. Mobile vs Desktop View
Remember to optimize both the mobile and the desktop experience. Companies that optimize their desktop design often overlook similar accommodations for their mobile website, yet many users land on your site first via a mobile browser.
Mobile designs should be simple and clean, with easily clickable calls to action (CTA) near the centre of the screen. Also, place navigation bars at the bottom of the screen to better account for the way most people hold their phones.
Individuals with visual or reading impairments may use a screen reader to hear what’s written on your website. You can optimize your site for screen readers by keeping text both clear and descriptive, structuring your HTML with relevant tags—indicating the copy language in the lang attribute—and using ARIA roles. Sounds complicated. But don’t stress: this is common ground for experienced web designers and developers.
Finally, before you tick mobile optimization off your list, test your design with a diverse crowd to catch any potential oversights.
2. Alt Text
It’s likely your website includes images to add visual interest, context, or brand positioning elements. Imagine you’re navigating the site without these attributes. Would your experience live up to the same standard with just text? Unlikely. Which is why alt text is a critical component of digital accessibility.
Alt text is embedded in your code and describes the image to those using visual assistant technology like screen readers. Ideally, this text should be concise, descriptive, and a complete sentence.
Check out the difference in quality between these examples and note how the final example adequately evokes the image just through text.
- Bad = “Img.23457919”
- Better = “Picture of a student looking into a microscope.”
- Best = “A chemistry student wearing a white lab coat peers down into a microscope. They’re holding a yellow pencil and a pad of lined paper, taking notes of what they see.”
3. Font/Typography
The next item on your website accessibility checklist is choosing a clear, readable font. Prioritize legibility to ensure your messaging isn’t limiting your customers with visual impairment.
Select a typeface that’s easy to distinguish between characters. This means avoiding fonts that blend letters together or make distinct characters appear similar. Also, choose text that contrasts with your background to make reading easier. (More on typography here.)
4. Colour Palette
The importance of designing your website with highly contrasting colour schemes is hard to overstate. You’ve likely already incorporated certain colours into your branding campaigns and logo design—if so, keep your website consistent with this recognizable scheme. However, make sure you pair highly contrasting hues within that palette throughout your web design.
Playing with contrast not only makes it easier for visually impaired users to navigate your site, it also serves as an excellent design principle in general. If your current brand colours are low contrast, you might want to revamp your aesthetics to improve accessibility.
5. Compliance with Canadian Web Accessibility Laws
Your website accessibility checklist should ensure that you maintain total compliance with Canadian web regulations, such as the Standard on Web Accessibility, the Accessible Canada Act, and various regional protocols. Compliance not only legally shields your website, but also serves as a comprehensive de facto website accessibility checklist to improve your design.
Here’s a basic overview of some of the web design elements to help you maintain compliance with Canadian and regional laws:
- Font readability for visually impaired website visitors
- Clear section headers that provide structure
- Resizable layout for multiple screen types
- Colour contrast that helps design elements stand out
- Captioning, transcriptions, and descriptions for any video content
- Navigability via keyboard, rather than a mouse
- Principles of accessibility applied to all digital documents or forms
Tick Off Your Website Accessibility Checklist With Alphabet®
One of the best ways to ensure that your website serves the needs of all potential users is to work with experts. Leading specialists in design and branding, like Alphabet®, help you create dynamic and engaging digital experiences that follow ACA and AODA guidelines (and the protocols of your province). Are you ready to reimagine your web design with inclusive design principles? We’re here to help with everything from brand strategy and identity to crafting your messaging for the digital age. Reach out today. Together, we’ll uncover the truth of your brand—so you can integrate, execute, and live it throughout your entire organization.