Your Website’s Welcome Mat: Essential Web Accessibility for Marketers

These aren’t complicated, high-tech concepts. They’re sensible design choices that benefit everyone.

Think of your website like a well-organised book. A book has chapters, sub-chapters, and headings that guide you through the content, right? That’s what semantic HTML (using <h1>, <h2>, <h3> tags correctly) does for your website.

• Why it matters: Screen readers use these headings to help users quickly navigate your page. Imagine trying to understand a long article if you couldn’t skim the headings – frustrating! Google also uses these headings to understand your content, giving you a little SEO boost too.
• Marketer takeaway: Don’t just make text “bold” to make it look like a heading. Use the actual heading tags. Ensure your headings follow a logical order (you shouldn’t skip from an <h1> to an <h3> without an <h2> in between).

You’ve got stunning images on your site. But what about users who can’t see them?

• What it is: “Alt text” (alternative text) is a short, descriptive phrase embedded in the code of an image. It’s read aloud by screen readers, and it appears if an image fails to load.
• How to write good alt text: Describe the purpose or content of the image concisely.
  • Bad: alt="image" or alt="picture"
  • Better: alt="Group of diverse professionals collaborating around a laptop"
  • Best (if functional): alt="Company logo for Big Salami" (if the logo is a link to the homepage).
• Marketer takeaway: Every important image needs alt text. It’s also an opportunity to include relevant keywords for SEO, but don’t keyword stuff – focus on clear description first.

Imagine trying to read light grey text on a white background. Hard, right? For someone with low vision or colour blindness, it can be impossible.

• Importance: Websites need sufficient contrast between text and its background. Guidelines like WCAG (Web Content Accessibility Guidelines) recommend specific ratios to ensure readability for the widest possible audience.
• Impact: Poor contrast leads to eye strain, frustration, and users leaving your site.
• Marketer takeaway: Choose your brand colours carefully. Use online tools (see below!) to check your text and background colour combinations. Don’t rely solely on colour to convey meaning (e.g., “red indicates an error” – also use an icon or text).

Use our free colour contrast accessibility checker to see how accessible your colour combinations are.

Not everyone uses a mouse. Some people rely entirely on their keyboard to move through websites.

• Testing your site: Simply unplug your mouse (or just don’t use it) and try to navigate your entire website using only the Tab key, Enter, and arrow keys. Can you reach every link, button, and form field?
• Focus indicators: As you tab through the page, you should see a clear visual outline or change in colour around the element you’re currently on. This “focus indicator” tells keyboard users where they are.
• Marketer takeaway: Ensure all clickable elements are reachable via keyboard. If you can’t tab to it, it’s a barrier.

“Click here.” “Learn more.” How often do you see these? They’re vague.

• Why it matters: Screen reader users often jump from link to link. If all they hear is “click here, click here, click here,” they lose context. Search engines also prefer descriptive links.
• Better practice: Make your link text meaningful out of context.
  • Bad: “To read our privacy policy, click here.”
  • Good: “Read our privacy policy.” (where “privacy policy” is the clickable link).
• Marketer takeaway: Write link text that clearly tells the user what they’ll find if they click, even if they only read the link itself.
• Provide context first: When adding a link in a sentence, add the descriptive call to action towards the end of the sentence, rather than starting with it, e.g.:
  • Good: Visit our blog to find out how you can improve your organisation’s accessibility.
  • Better: Find out how you can improve your organisation’s accessibility by visiting our blog.

You don’t need to be a coding wizard to make a difference:

• Browser Extensions: Tools like axe DevTools or Lighthouse (built into Chrome’s developer tools) can give you a quick audit of basic accessibility issues.
• Online Contrast Checkers: Websites like WebAIM’s Contrast Checker let you plug in HEX codes for your colours and instantly tell you if they meet WCAG standards.
• Manual Testing: The “keyboard navigation” test mentioned above is free and incredibly insightful.
• Responsive Design: Ensure your website adapts perfectly to different screen sizes (mobiles, tablets). This is accessibility for how people access your content.

As you get more comfortable, you might hear terms like “ARIA attributes.” These are special pieces of code that add extra information for assistive technologies, especially for more complex interactive components like tabs, carousels, or custom dropdowns. You probably won’t be implementing these yourself, but knowing they exist helps when talking to your development team.

Your website is your brand’s welcome mat. By paying attention to these essential web accessibility principles, you’re not just complying with guidelines; you’re building a more inclusive, user-friendly, and ultimately more effective digital experience for every single person who visits. And that, my friends, is great marketing.