Getting Started with Website Accessibility for Small Businesses

Better web accessibility means getting your message out to more consumers. Do you want to learn how you can improve the user experience of your website?

Small Business BC has created this checklist to help. This checklist will walk you through practically applying the Web Content Accessibility Guidelines (WCAG 2.1) to your website to improve digital accessibility.

Download the Website Accessibility Checklist

There are three WCAG Levels, and this checklist is intended to help small business owners achieve the first level, “Level A.” For more information on the WCAG levels, you can review the guidelines online or read their article, “Introduction to Web Accessibility.”

What is website accessibility?

Website accessibility means that people with disabilities can use a website easily and have equal access to information online. When you implement accessibility standards, you create a level playing field where everyone can access your website.

Most accessibility considerations can be built right into the underlying code of your website or app. Depending on your comfort level, you can likely implement some of the changes yourself.

What are the benefits of website accessibility?

  • Promotes inclusivity by making website content accessible for all, especially for disabled people.
  • Adhering to WCAG 2.1 standards helps your organization comply with accessibility laws.
  • Implementing WCAG 2.1 guidelines creates a better user experience for all.
  • Improves search engine optimization (SEO) as WCAG 2.1 guidelines tend to align with SEO best practices.

What are the Web Content Accessibility Guidelines (WCAG 2.1)?

The Web Content Accessibility Guidelines (WCAG 2.1) are a global standard for website content accessibility. The World Wide Web Consortium (W3C) developed them in collaboration with experts worldwide.

The standards are categorized based on four main principles, called the POUR principles: perceivable, operable, understandable, and robust.

1. Perceivable

Information is shown in a way that users can perceive using one of their senses.

  • Text alternatives in the code
  • Time-based alternatives like transcripts, closed and open captions, and audio descriptions
  • Adaptations and variable screen sizes for screen reader users, keyboard-only users, and more
  • Distinguishable contrast between foreground and background, not relying on colour to convey information

2. Operable

All users can effectively navigate your website.

  • Keyboard accessible
  • Enough time – don’t put time limits on users’ actions and if you do, provide additional time with a warning
  • Seizures and physical reactions – provide warnings for strobing content or quick shifts in contrast
  • Navigable – present users with ways to navigate the site and find content
  • Input modalities – the website is functional through different inputs outside of a keyboard

3. Understandable

All users can understand the information displayed in clear and simple language and understand how to operate within the interface.

  • Readable text that’s understandable both in content and in order
  • Predictable pages that appear and operate in predictable ways
  • Input assistance to provide users with ways to avoid or correct errors

4. Robust

Content can be interpreted by all users.

  • Maximum compatibility with assistive technologies and web browsers

With the POUR principles in mind, here are our tips for making your website more accessible based on the WCAG 2.1 Level A success criteria:

Images

☑️Images have descriptive alt-text

☑️Text-only images are not used

☑️Tables use alt-text to describe the data

Video and Audio

☑️Transcriptsand captions are available

☑️Video descriptions point to the transcript

☑️Users can adjust volume, pause, stop, or mute

☑️No auto-play media

☑️Content does not flash more than three times per second

☑️Users can stop excessive blinking or flashing

Tip: Flashing content can trigger seizures. Do not have content that flashes more than three times per second.

Text

☑️Text content is readable and understandable

☑️Reading order of content is logical and meaningful

☑️Text and background are high contrast enough to be read

☑️Small text contrast ratio is at least 4.5:1

☑️Large text contrast ratio is at least 3:1

☑️Users can resize textup to 200% without losing content or functionality

☑️Link text is clear and actionable

☑️Lists are well-formatted with headings

Functionality

☑️Website is accessible by all browsers

☑️Website uses semantic HTML elements

☑️All functionality available from a keyboard

☑️Users can operate through various inputs beyond a keyboard

☑️Users have enough time to read and use content (no time restrictions)

☑️Users can navigate away from any keyboard focus traps(i.e. input boxes, drop-down menus, or hyperlinks)

Webpages

☑️Pages use breadcrumb navigation

☑️Users can access a clear site map

☑️Pages have unique page titles

☑️Skip to Content feature provided for users

☑️Colour alone is not used to convey action

☑️Page content is organized with section headings

 

Tip:Create a web accessibility policy and link it to your website. Then, provide users with a way to report any accessibility issues with your website. This will allow you to make continuous accessibility improvements.

Download the Website Accessibility Checklist

Continue your Accessibility Journey with SBBC

Small Business BC is a non-profit resource centre for BC-based small businesses. Our Workplace Accessibility Resources page is full of tips, tools, and more to support your next stage.

This checklist was developed in consultation with Melissa Lyon of Accessibility & Inclusion Matter Consulting.

We gratefully acknowledge the financial support of the Province of British Columbia through the Ministry of Social Development and Poverty Reduction.

Advertisement