‍

The Overlaps with Accessibility and SEO

2 minutes of reading

The Overlaps with Accessibility and SEO

I recently had the pleasure of joining Jules White on The Website Success Podcast to where we both geeked out, discussing a topic that's often brushed under the carpet, but sits at the very heart of human connection with brands: Digital Accessibility.

When we talk about putting people first in business, we’re really talking about empathy, understanding, and making sure our clients feel heard. But if your website - which is often the front door to your business - isn't accessible, you're effectively excluding up to 20% of your audience. During our chat, Jules and I explored why accessibility is so much more than just a box-ticking exercise for regulations; it supports your SEO strategy. We looked at how the very things that make your brand accessible to humans are exactly what make it 'readable' for Google and AI search features

‍

Accessibility and SEO are Two Sides of the Same Coin

The thing we loved the most about our conversation, was just agreeing about all of the overlaps between User Experience (UX) and Search Engine Optimisation (SEO). Many people don't realise that Google’s crawlers navigate a website in a very similar way to a person using a screen reader.

If you make your site easier for a disabled user to navigate, you are inadvertently making it easier for Google to index and rank your content. Throughout our chat, we kept coming back to this "win-win" scenario:

  • Structure: A logical heading hierarchy helps a screen reader user find what they need, but it also tells Google exactly what your page is about.
  • Descriptions: Writing great Alt Text for images helps a visually impaired person "see" the picture, but it also allows your images to appear in Google Image searches.
  • Clarity: Clear, descriptive links (instead of "Click Here") help with navigation and provide Google with better context for your site's internal linking structure.

Ultimately, by designing for everyone, you’re actually optimising for everything.

‍

1. The Foundation: Heading Structure and Page Hierarchy

One of the first things we tackled was the "skeleton" of a website. A lot business owners building their own site choose headings (H1, H2, H3 etc) based on aesthetic appeal, thinking "I want this sentence to be big and bold, so I’ll make it an H1."

The Human Impact:

For a sighted user, visual cues tell them what is important. For someone using a screen reader, they need the right heading tags to let them hear that visual cue, allowing users to 'skim' your pages and fully understand the content throughout a site.

The Fix:

  • Logical Order: Never jump from an H1 to an H4. It’s like reading a book where the chapters are numbered 1, 7, and 32.
  • The H1 Rule: You should only ever have one H1 per page. It represents the primary topic of that specific page.
  • SEO Bonus: Search engine crawlers (like Google) use this same hierarchy to understand what your content is about. Proper structure helps you rank higher.

‍

2. Avoiding the "Invisible" Barriers: Common Accessibility Mistakes

Jules and I spoke about the "silent killers" of user experience. These are the small things that most designers overlook but can completely halt a user's journey.

The "Click Here" Trap

We’ve all seen it: a button that simply says "Click Here" or "Read More." While this seems intuitive to some, it’s a nightmare for accessibility. Screen readers can pull up a list of all links on a page to help a user navigate quickly. If that list contains twenty links all named "Click Here," the user has no idea where any of them lead.

The Solution: Use descriptive link text. Instead of "Click here," use "Download my free accessibility audit checklist." It tells the user exactly what to expect.

Empty Icon Buttons

If you have a row of social media icons in your footer but haven't labeled them with "Alt Text" or "Aria-labels," a screen reader will simply announce "Button" or "Link." The user knows there is a link there, but they don’t know if it leads to Facebook, LinkedIn, or a mailing list.

‍

3. The Visuals: Colour Contrast and Font Sizes

We often prioritise "on-brand" colours over functional colours. Jules noted that many modern brands love a minimalist aesthetic - often involving light grey text on a white background.

The Reality Check:

  • Contrast: Low contrast makes content inaccessible to people with colour blindness, visual impairments, or even those viewing their screen in bright sunlight. Use high-contrast pairings (like dark navy on cream) to ensure legibility.
  • Font Size: Gone are the days of 12px font. For a truly accessible site, 16px should be your absolute minimum, though 18px is becoming the gold standard for body text. As we age, our vision naturally declines; larger fonts make your "Human Selling" message accessible to an older, often more affluent, demographic.

‍

4. Where to Start

I know that "Accessibility" can feel like a massive, technical mountain to climb. My biggest piece of advice to Jules’ audience was to start small. You don't need to rebuild your entire site today.

The "Core Four" Audit:

If you want to make a massive impact with minimal effort, audit your most popular page for these four things:

  1. Headings: Are they in the right numerical order?
  2. Contrast: Can you read the text easily without squinting?
  3. Font Size: Is it at least 16px?
  4. Alt Text: Do your images have descriptions?

Focusing on these "Core Four" usually solves nearly 80% of common accessibility barriers.

‍

5. Alt Text and Image Descriptions

We had a great chat about Alt Text. This is the text description added to an image's metadata.

How to write great Alt Text:

Don't be a robot. Instead of "Woman on phone," try: "A smiling woman sitting in a coffee shop, typing a message on her smartphone." This provides the context and the mood of the image to someone who cannot see it.

  • Note: If an image is purely decorative (like a swirl or a line), you can mark it as "decorative" so the screen reader knows to skip it.

‍

6. Practical Steps and Resources

If you want to take action right now, here are the tools I recommended during the podcast:

  • WAVE Evaluation Tool: A free browser extension that shows you exactly where your errors are.
  • WebAIM Contrast Checker: A simple tool to check if your brand colours are accessible.
  • The Keyboard Test: Unplug your mouse. Can you navigate your whole site using just the "Tab" and "Enter" keys? If not, your site isn't accessible.

‍

7. The "Curb-Cut Effect": Why This Benefits Everyone

This was the most poignant part of my conversation with Jules. We talked about the Curb-Cut Effect. When sidewalks were first redesigned with ramps (curb-cuts) for wheelchair users, we discovered they were also used by people with strollers, travelers with suitcases, and cyclists.

The same applies to your website.

  • Captions help the person in a quiet library who forgot their headphones.
  • High Contrast helps the person with a cracked screen or someone outside on a sunny day.
  • Logical Layouts help the neurodivergent user who might feel overwhelmed by cluttered or non-linear designs.

Accessibility is not a "special interest" project. It is simply good design.

‍

Final Thoughts

Selling is about building relationships. By making your website accessible, you are telling every visitor: "I see you, I value you, and I want you here." Want to hear the full conversation?

Check out the full episode of The Website Success Podcast with the wonderful Jules White.