The Complete Guide to Website Accessibility for Small Businesses

Website accessibility ensures that people with disabilities can use your website effectively. But beyond being the right thing to do ethically, making your website accessible is also smart business.

Let's explore why accessibility matters and how to make your website work for everyone.

What is Web Accessibility?

Web accessibility means designing and developing websites, tools, and technologies so that people with disabilities can use them.

This includes people with:

• Visual impairments (blindness, low vision, color blindness)
• Hearing impairments (deafness, hard of hearing)
• Motor impairments (difficulty using a mouse, slow response time)
• Cognitive impairments (learning disabilities, memory issues)
• Temporary disabilities (broken arm, eye surgery recovery)
• Situational limitations (bright sunlight, noisy environment)

The Business Case for Accessibility

1. Expanded Audience Reach

The numbers are significant:

• 22% of Canadians (6.2 million people) have a disability
• 15% of the world's population has some form of disability
• The global disability market has an estimated purchasing power of $13 trillion

An accessible website means you're not excluding potential customers who want to do business with you.

2. Improved SEO Performance

Many accessibility best practices align perfectly with SEO best practices:

Alt text for images – Helps screen readers AND helps Google understand your images

Proper heading structure (H1, H2, H3) – Helps screen readers navigate AND helps Google understand your content hierarchy

Descriptive link text – "Click here" helps nobody; "Read our services page" helps everyone

Semantic HTML – Proper markup helps assistive technologies AND search engines

Video captions – Help deaf users AND allow Google to index video content

Page titles and meta descriptions – Essential for both accessibility and SEO

3. Legal Protection and Compliance

Web accessibility lawsuits have increased dramatically:

In Canada:

• Accessibility for Ontarians with Disabilities Act (AODA)
• Canadian Human Rights Act
• Growing legal precedents

WCAG 2.1 Level AA is the generally accepted standard for compliance.

While small businesses face less scrutiny than large corporations, the legal landscape is evolving. Being proactive protects your business from future liability.

4. Better User Experience for Everyone

Accessibility improvements benefit ALL users:

Captions on videos – Help people in noisy environments or quiet offices Keyboard navigation – Helps power users who prefer keyboards High contrast – Helps everyone in bright sunlight Clear language – Helps non-native speakers and people in a hurry Larger click targets – Helps anyone on a mobile device

5. Demonstrates Corporate Responsibility

Accessibility shows you value all customers and take your social responsibility seriously. This builds:

• Brand reputation
• Customer loyalty
• Employee pride
• Community goodwill

WCAG 2.1: The Accessibility Standard

WCAG stands for Web Content Accessibility Guidelines.

The guidelines are organized around four principles – your website should be:

1. Perceivable

Information must be presentable to users in ways they can perceive.

Key requirements:

• Text alternatives for images
• Captions for videos
• Content can be presented in different ways
• Content is distinguishable (good color contrast)

2. Operable

Users must be able to operate interface components.

Key requirements:

• Keyboard accessible
• Users have enough time to read and use content
• Content doesn't cause seizures (no rapidly flashing content)
• Users can navigate and find content

3. Understandable

Information and operation must be understandable.

Key requirements:

• Text is readable
• Pages appear and operate predictably
• Users are helped to avoid and correct mistakes

4. Robust

Content must work with current and future technologies.

Key requirements:

• Compatible with assistive technologies
• Valid HTML
• Proper ARIA labels when needed

Essential Accessibility Requirements

Images and Alt Text

Every image needs appropriate alt text:

<!-- Good -->
<img src="team-photo.jpg" alt="ClearMesh team at London Tech Conference 2024">

<!-- Bad -->
<img src="img_1234.jpg" alt="image">

<!-- Decorative images -->
<img src="decorative-line.png" alt="" role="presentation">

Alt text best practices:

• Describe the content and function
• Keep it concise (under 150 characters)
• Don't start with "image of" or "picture of"
• Leave alt empty for purely decorative images
• For complex images, provide longer descriptions

Color and Contrast

WCAG requires minimum contrast ratios:

• Normal text: 4.5:1
• Large text (18pt+): 3:1
• UI components and graphics: 3:1

Common mistakes:

• Light gray text on white backgrounds
• Relying solely on color to convey information
• Poor contrast in buttons and links

Tools to check contrast:

• WebAIM Contrast Checker
• Chrome DevTools accessibility panel
• Colour Contrast Analyser

Keyboard Navigation

Every interactive element must be keyboard accessible.

Users should be able to:

• Tab through all interactive elements in logical order
• Activate buttons and links with Enter or Space
• Close modals with Escape
• Navigate menus with arrow keys
• See which element currently has focus

Common issues:

• Custom dropdowns that don't work with keyboard
• Modal dialogs that trap keyboard focus
• Missing focus indicators
• Illogical tab order

Forms and Labels

Every form field needs a proper label:

<!-- Good -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>

<!-- Bad -->
<input type="text" placeholder="Enter email">

Form accessibility checklist:

• ✅ Every field has a label (not just placeholder text)
• ✅ Required fields are clearly marked
• ✅ Error messages are specific and helpful
• ✅ Form validation provides clear feedback
• ✅ Multi-step forms show progress
• ✅ Success messages are clear

Headings and Structure

Use proper heading hierarchy:

<h1>Main Page Title</h1>
  <h2>Major Section</h2>
    <h3>Subsection</h3>
    <h3>Another Subsection</h3>
  <h2>Another Major Section</h2>

Don't:

• Skip heading levels (H1 to H3)
• Use headings just for styling
• Have multiple H1s on a page

Links and Buttons

Link text should be descriptive:

<!-- Good -->
<a href="/services">View our web development services</a>

<!-- Bad -->
<a href="/services">Click here</a>

Button vs Link:

• Links navigate to another page
• Buttons perform an action

Video and Audio

Requirements for multimedia:

• Captions for all videos (not just auto-generated)
• Audio descriptions for important visual content
• Transcripts for audio-only content
• Media players with keyboard controls
• Option to pause, stop, or hide auto-playing content

Common Accessibility Mistakes

1. Relying on Automated Tools Alone

Automated tools catch about 30% of accessibility issues. They can't test:

• Whether alt text is meaningful
• If content makes sense
• If the tab order is logical
• If keyboard navigation is intuitive

Solution: Combine automated testing with manual testing and real user testing.

2. Using Placeholder Text as Labels

Placeholder text disappears when users type, making it hard to remember what the field is for.

Solution: Always use proper <label> elements.

3. Opening Links in New Windows Without Warning

Unexpected new windows confuse screen reader users and anyone with cognitive disabilities.

Solution: If you must open links in new windows, warn users:

<a href="external-site.com" target="_blank">
  External Site <span class="sr-only">(opens in new window)</span>
</a>

4. Creating Keyboard Traps

Modal dialogs and dropdowns that trap keyboard focus prevent users from navigating away.

Solution: Implement proper focus management and allow Escape key to close modals.

5. Using Poor Color Contrast

Low contrast between text and background makes content unreadable for many users.

Solution: Test all text/background combinations and ensure they meet WCAG standards.

How to Make Your Website Accessible

Step 1: Audit Your Current Site

Use these tools to identify issues:

Automated testing:

• WAVE (Web Accessibility Evaluation Tool)
• axe DevTools (browser extension)
• Lighthouse (in Chrome DevTools)
• pa11y

Manual testing:

• Try navigating with keyboard only (no mouse)
• Use a screen reader (NVDA on Windows, VoiceOver on Mac)
• Check color contrast
• Test forms with errors

Step 2: Prioritize Issues

Focus on:

1. Critical issues – preventing access entirely
2. Serious issues – significantly impacting usability
3. Moderate issues – inconvenient but not blocking
4. Minor issues – nice-to-have improvements

Step 3: Fix Common Issues First

Start with these quick wins:

• Add alt text to all images
• Ensure all form fields have labels
• Check color contrast and fix problems
• Add skip navigation link
• Ensure keyboard accessibility
• Use proper heading hierarchy

Step 4: Develop Ongoing Processes

Make accessibility part of your workflow:

• Include accessibility in design mockups
• Test accessibility during development
• Include accessibility in QA checklists
• Train team members on accessibility
• Review third-party tools and plugins for accessibility

Step 5: Document and Communicate

Create an accessibility statement:

• Your commitment to accessibility
• Current conformance level (e.g., WCAG 2.1 Level AA)
• Known limitations
• Contact information for accessibility issues
• Date of last review

Testing Your Website for Accessibility

Keyboard Testing

Try these tasks with keyboard only (no mouse):

• ✅ Tab through all interactive elements
• ✅ Activate all buttons and links
• ✅ Fill out and submit forms
• ✅ Open and close navigation menus
• ✅ Open and close modal dialogs
• ✅ Play and pause videos

Screen Reader Testing

Free screen readers:

• NVDA (Windows)
• VoiceOver (Mac, built-in)
• JAWS (Windows, paid but most popular)

Basic test:

• Can you understand the page content?
• Do images have meaningful descriptions?
• Do links make sense out of context?
• Are form fields properly labeled?

Mobile Accessibility Testing

Test on actual devices:

• Text is large enough to read
• Tap targets are large enough (44x44px minimum)
• Content reflows appropriately
• No horizontal scrolling
• Touch gestures have alternatives

Accessibility for Different Industries

E-commerce

Critical features:

• Product images with descriptive alt text
• Accessible product filters
• Cart and checkout process keyboard accessible
• Payment forms properly labeled
• Order confirmation accessible

Restaurants and Hospitality

Critical features:

• Menu text (not just images of menu)
• Online reservation forms
• Location and hours clearly marked up
• Contact information accessible
• Photo galleries with descriptions

Professional Services (Law, Dental, etc.)

Critical features:

• Appointment booking forms
• Patient/client intake forms
• Accessible contact forms
• Document downloads with descriptions
• Service descriptions in plain language

Real Estate

Critical features:

• Property search filters keyboard accessible
• Property photos with descriptions
• Map-based search has text alternative
• Contact forms on listings
• Virtual tours with descriptions

Tools and Resources

Testing Tools

Free automated checkers:

• WAVE – webaim.org/wave
• axe DevTools – chrome/firefox extension
• Lighthouse – Built into Chrome DevTools
• pa11y – Command line tool

Contrast checkers:

• WebAIM Contrast Checker
• Colour Contrast Analyser
• Chrome DevTools contrast tool

Learning Resources

Official guidelines:

• WCAG 2.1 – w3.org/WAI/WCAG21
• WebAIM – webaim.org
• A11y Project – a11yproject.com

Training:

• W3C WAI tutorials
• Deque University
• WebAIM training
• Accessibility courses on LinkedIn Learning

The Cost of Accessibility

Common concerns: "Won't accessibility be expensive and time-consuming?"

The reality:

• Building accessibility in from the start: minimal cost
• Retrofitting an inaccessible site: moderate cost
• Defending an accessibility lawsuit: extremely expensive

Smart approach:

1. Start with new pages and components
2. Fix critical issues on existing pages
3. Improve gradually over time
4. Make accessibility part of standard practice

Conclusion

Website accessibility is not optional – it's essential for:

• Reaching all potential customers
• Improving SEO
• Reducing legal risk
• Demonstrating corporate responsibility
• Providing better user experience for everyone

The good news: most accessibility improvements are straightforward to implement, especially when built into your process from the start.

Need Help Making Your Website Accessible?

At ClearMesh, we build accessible websites by default for all London, Ontario clients. We can:

• Audit your current site for accessibility issues
• Fix critical accessibility problems
• Rebuild your site with accessibility built-in
• Train your team on maintaining accessibility
• Provide ongoing accessibility support

Contact us for a free accessibility audit – we'll identify issues and provide a clear roadmap for improvement.