What is website accessibility? WCAG for B2B SaaS

Surfing the web looks very different for people with disabilities. Research indicates that less than 5% of websites are considered accessible, yet 15% of the world’s population experience some sort of disability. B2B brands, this is an opportunity — create a positive, accessible website experience that enables more visitors to engage with your site, your brand, and your product.

What is website accessibility?

The World Wide Web Consortium defines website accessibility as “websites, tools, and technologies that are designed and developed so that people with disabilities can use them”. When websites are built and designed with accessibility in mind, more people can perceive, understand, interact with, and contribute to the web.

To understand the full scope of website accessibility, it’s important first to broaden our understanding of disabilities. Three types of disabilities can impact website accessibility:

• Physical – permanent (e.g. vision, hearing, or motor impairment; ADHD, epilepsy, etc.) or temporary (e.g. broken wrist, forgot glasses, etc.)
• Situational – caused by external factors (e.g. unable to see the screen)
• Socioeconomic – caused by technology access or quality (e.g. bandwidth restrictions, device performance, etc.)

Accessible websites not only enable individuals with physical disabilities to better engage in the B2B buying process, but they also improve the user experience for able-bodied visitors with situational or socioeconomic disabilities.

What are website accessibility guidelines?

The Web Content Accessibility Guidelines (WCAG), set forth by the W3C Web Accessibility Initiative, are the international standard for web content accessibility. WCAG gives you all the information and instruction you need to make web content more accessible to people with disabilities.

There are three levels of accessibility standards within WCAG: A, AA, and AAA.

Level A website accessibility

Level A is the minimum standard for website accessibility. It addresses the most common and urgent barriers to accessing web content. Key Level A criteria includes:

• Alternative text for visual content
• Ability to access content with screen readers
• Ability to navigate content with keyboard navigation

Level AA website accessibility

Level AA is ideal for businesses that serve a broad audience and need to meet specific legal or regulatory requirements. When website accessibility is mandated, it’s typically to Level AA as it’s viewed as the best balance between practicality and accessibility. Key Level AA criteria includes:

• Minimum color contrast ratio of 4.5:1 for normal text and 3:1 for large text
• Visual contrast ratios
• Captions for video content

Level AAA website accessibility

Level AAA is the highest website accessibility standard. It ensures web content is optimized for diverse disabilities. This level is not often required legally as it goes beyond most organizations’ practical and financial capabilities, but it is still considered the gold standard of website accessibility. Key Level AAA criteria includes:

• Minimum color contrast ratio of 7:1 for normal text and 4.5:1 for large text
• Pre-recorded sign language interpretation for all audio content
• Live audio content must give users the option to pause, stop, or mute

Website accessibility standards in Canada

In 2019, Canada passed The Accessible Canada Act, a federal law created to “identify, remove, and prevent barriers facing people with disabilities”. To comply with this law, several provinces have mandated WCAG Level AA accessibility standards for federal, public, private, or non-profit organizations.

Website accessibility standards in the U.S.

The Americans with Disabilities Act (ADA) was enacted in 1990 to prohibit discrimination based on disability. Although website accessibility isn’t specifically addressed in the ADA, it is one of many strategies to remove barriers for individuals with disabilities.

The interpretation and application of the ADA varies by state. However, WCAG serves as the broad standard for website accessibility. Compliance with WCAG standards, ideally Level AA, will help ensure your website is accessible to individuals with disabilities and protect your company from potential legal complications.

5 reasons to prioritize website accessibility

The number one motivation for website accessibility should always be to create positive, inclusive experiences. But making your website accessible is also a smart business decision.

1. Reach a broader customer base

The U.S. Bureau of Labor Statistics reported that “in 2023, 22.5% of people with a disability were employed — the highest recorded ratio since comparable data were first collected in 2008. This rate increased by 1.2 percentage points from the prior year.”

The number of individuals with disabilities in the workforce is increasing. An accessible website reduces the risk of your product missing the vendor shortlist because someone wasn’t able to effectively navigate your website.

2. Maintain legal compliance and avoid accessibility-related lawsuits

If your website does not meet the mandated website accessibility requirements for your region, someone could file a lawsuit against your company, resulting in legal fees and civil charges. An accessible website proactively reduces the risk of legal consequences.

3. Improve user experience and customer satisfaction

An accessible website delivers a better user experience for visitors with or without disabilities by reducing distractions and making it easy for users to find the information they’re looking for. The easier it is to explore and engage with a website, the more positive the perception of your brand and product.

4. Improve SEO and search engine visibility

Search engines prefer accessible websites with optimized sitemaps, clear navigation, and well-organized content. And descriptive headings and alternative image text make it easier for search engines to crawl, understand, and index content. Improved search rankings lead to increased visibility, which leads to more organic traffic.

5. Improve brand reputation

With a global push to make the internet more inclusive, an accessible web experience can only help your brand reputation with prospective customers and partners. Many businesses are creating Diversity, Equity, and Inclusion (DEI) policies for vendor selection and partnerships.

By applying WCAG standards to your website and establishing a point of view on website accessibility, your brand becomes more inclusive and appealing to customers and partners.

How to make your website accessible

You’ll need design and development expertise to make your website accessible. Leave the details around technical execution to your web agency, but use the following list as a guide for optimizing your website for accessibility.

Web design and layout

B2B SaaS websites often have multiple user journeys that include role-specific pages, use cases, solutions, features, etc. With so much valuable content, it’s important to make it easy for users and search engines to navigate.

Create a simple and intuitive navigation structure that remains consistent across all pages. Consider using a mega menu with descriptive labels for page links to help users understand the content on the page before clicking.

• Assign appropriate heading hierarchies (H1, H2, H3, etc.)
• Group relevant content on pages to make it easy to scan
• Avoid using overlays or pop-ups that may be challenging to navigate
• Create a responsive design that adapts to different screen sizes and devices

Typography

Make it easy for users to read and digest text on your website. A good rule of thumb is: “Not too much. Not too small”.

• Limit each line length to 70 characters or less to reduce horizontal eye movement
• Avoid low x-height fonts; these are not ideal for screen reading
• Use a minimum font size of 16-18 pt or 14 pt bold and enable text scaling
• Use sans-serif fonts that are easy to read on digital screens

Color contrast

Color plays an important role in brand awareness and user experience. Create sufficient contrast and test the accessibility of all color combinations to make sure color is working for, not against, your site.

• Use a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (Level AA compliant)
• Avoid using pure black or pure white as these colors cause eye strain in certain environments
• Avoid relying solely on color to convey information (e.g. create error states with red, descriptive error text)

Keyboard navigation

Keyboard navigation enables users (e.g. visually impaired or those with limited mobility or dexterity) to navigate your website with the tab button instead of mousing. All links and buttons should be accessible via tabbing.

Animations & interactive elements

Animations and interactive website elements can enhance user experience and increase comprehension, but too much movement can distract or overwhelm users. Avoid adding movement to your site for decorative purposes; it should always have a purpose.

• Keep micro-animations subtle
• Make interactive elements easy to identify
• Enable users to pause, play, stop, or hide animations or videos
• Minimize flashing or blinking
• Keep animations short
• Avoid jarring transitions
• Apply movement consistently across your website

Text and multimedia content access

Alternative text

Alternative text (commonly known as alt text) is a written description of each visual asset on your website. An accessible website has alt text available for all images, graphics, and icons. Alt text serves two purposes:

• Allows visually impaired users to hear descriptions of visual content using a screen reader
• Enables search engines to understand visual content and factor it into page indexing

Best practices for alt text

• Be as specific as possible, but keep it concise
• Add context for the image to tie it to the topic of the page
• Limit descriptions to 125 characters or less (max length for screen readers)
• Avoid starting descriptions with “Image of” as screen readers will automatically describe it as an image

Here’s an example of alt text do’s and don’ts for a revenue forecasting software website:

• Don’t write this: Image of a woman giving a presentation to a boardroom
• Write this: CFO confidently presenting a quarterly revenue forecast to the board of directors

Aria roles

Aria (Accessible Rich Internet Applications) roles are labels that, when added through code, help screen readers describe visual elements on your website.

Aria roles are only needed for elements that are not coded in semantic HTML. When an element is coded with semantic HTML (e.g. a button) it automatically signals to screen readers that it can be clicked.

Some elements are coded without semantic HTML and need Aria roles to describe the function to screen readers. For example, a text link that goes to an external link should include the code: aria-label= “Facebook page, opens in a new tab”. This signals that the link will take the user to a different page.

Video captions

Include captions for all video content to make the information accessible to users with hearing impairments.

• Include captions for dialogue, background sounds, speaker identification, and important sound effects
• Use proper spelling, grammar, and punctuation
• Use white text with a black background
• Select a text size that can be easily read on any device
• Place captions at the bottom center of the screen and do not obscure visual content
• Set caption speed at 140-160 words per minute

Forms

Minimize potential user friction by designing forms with clear labels and relevant instructions. Form best practices include:

• Add persistent field labels to the top left of each field (these labels remain visible while placeholder inputs disappear when the user begins typing)
• Add placeholder cues within each field
• Write descriptive error messages that make it clear how to resolve the issue
• Make error messages red to quickly alert the user to an error
• Provide context about what happens after the form is submitted

Recommended website accessibility checkers

Website accessibility laws and regulations are changing fast. Be proactive with compliance by regularly testing your website with an accessibility checker.

• AccessiBe Web Accessibility Solution
• Wave Web Accessibility Evaluation Tool
• Accessible Brand Colors
• WebAIM Contrast Checker

In addition to the tools above, manually test your website accessibility with Mac and PC screen readers to identify issues in reading order, content comprehension, and navigation.

Prioritize website accessibility now to avoid rework later

You already optimize your website for user experience and conversions. It’s time to give website accessibility just as much attention. A website redesign is a natural opportunity to prioritize website accessibility, and it’s far more cost-effective to make it accessible from the start than to rework the code over time.

Not sure where to start? Give us a call. Tiller specializes in designing and building websites with a minimum of Level AA compliance for B2B SaaS companies across Canada and the US. Our designers and developers are ready and eager to take your website accessibility to the next level.