Making your website accessible isn't just about ticking a legal compliance box—it's about ensuring you're not accidentally excluding up to 20% of potential customers. People with visual impairments, motor difficulties, or cognitive differences all need to access your content. And here's the thing: the same changes that help people also help search engines understand your site better.
The good news? You don't need to become an accessibility expert or hire a specialist. Four fundamental fixes will address the vast majority of accessibility issues on a typical small business website. These aren't theoretical improvements—they're practical changes you can implement in under an hour that immediately make your site more usable for everyone.
This article walks you through the four highest-impact accessibility improvements: adding proper Alt Text to images, fixing your heading structure, ensuring adequate colour contrast, and making your site fully keyboard-navigable. These aren't just "nice to have" features—they're foundational elements that affect how real people (and search engines) experience your website.
Jump to: Quick Start | Full Guide | Troubleshooting
Quick Start (5 Minutes)
If you just need to verify the basics are in place, follow these five quick checks:
1. Check three major images on your homepage for descriptive Alt Text. Open your CMS, click on each image, and verify there's text in the "Alt Text" or "Alternative Text" field that describes what the image shows or does.
2. Review your homepage, ensuring only one headline is marked H1. In your page editor, check that your main page title is formatted as "Heading 1" and all other section headings are "Heading 2" or "Heading 3".
3. Use an online tool to test your site's main text colour against its background colour. Visit WebAIM's Contrast Checker (webaim.org/resources/contrastchecker), enter your text and background colours, and verify you see "Pass" for WCAG AA.
4. Hit the Tab key five times on your page—can you clearly see where you land? Open your website in a browser and press Tab repeatedly. You should see a visible box or outline moving from link to link and button to button.
5. If all four look good, validate your success. Run a quick automated check using Chrome Lighthouse (right-click page > Inspect > Lighthouse tab > Generate report) and verify your Accessibility score is above 90.
✅ Completed the quick version? Move on to How to Fix Broken Links and Images or continue below for the detailed walkthrough.
Complete Step-by-Step Guide: The 4 Critical Fixes
These four changes address the accessibility issues that affect the most users and create the most significant legal risk. Let's implement each one properly.
Step 1: Write Actionable Alt Text for Every Functional Image
Alt Text (alternative text) is the description that screen readers announce to visually impaired users when they encounter an image. It's also what search engines use to understand your images.
The key distinction: Not every image needs descriptive Alt Text. Decorative images (purely visual elements that add no information) should have empty Alt Text (`alt=""`) so screen readers skip them entirely.
Functional images need descriptive Alt Text:
- •Product photos: "Handmade oak coffee table with steel hairpin legs"
- •Service images: "Plumber repairing copper pipe under kitchen sink"
- •Logos that link somewhere: "NetNav Academy homepage"
- •Icons with meaning: "Download PDF icon"
- •Infographics: Brief description of the key information conveyed
Decorative images need empty Alt Text:
- •Background patterns
- •Purely aesthetic dividers
- •Images that duplicate adjacent text
- •Decorative borders or flourishes
How to add Alt Text in common platforms:
WordPress: Click the image in your editor, then click the pencil icon or "Edit". You'll see an "Alternative Text" field in the right sidebar.
Squarespace: Click the image, then click "Edit", and look for the "Alt Text" field in the design panel.
Wix: Click the image, click "Settings", then find the "What's in the image? Describe..." field.
Writing effective Alt Text:
- •Be specific and descriptive (not just "image" or "photo")
- •Keep it under 125 characters when possible
- •Don't start with "Image of..." (screen readers already announce it's an image)
- •Include relevant keywords naturally, but don't keyword-stuff
- •Describe the content and function, not just the appearance
For detailed guidance on writing quality descriptions, see how to write effective Alt Text.
Step 2: Correct Your Heading Hierarchy (The H1 Rule)
Headings aren't just about making text bigger—they create the structural outline of your page that screen readers use to navigate. Think of them as the table of contents for your page.
The fundamental rule: Every page should have exactly one H1 (Heading 1), which is your main page title. All other headings should follow a logical hierarchy: H2 for major sections, H3 for subsections within those, and so on.
Why this matters:
- •Screen reader users often navigate by jumping between headings
- •Search engines use heading structure to understand content hierarchy
- •Skipping levels (H1 to H3) or having multiple H1s confuses both users and search engines
Common heading mistakes:
- •Using headings just to make text bigger (use CSS instead)
- •Having multiple H1s on one page
- •Skipping levels (H1, then H3, skipping H2)
- •Using headings out of order
How to fix your heading structure:
- Identify your H1: This should be your main page headline—usually the first thing visitors see. On your homepage, it might be your value proposition. On a service page, it's the service name.
- Convert major sections to H2: Each main section of your page (About, Services, Contact) should be H2.
- Use H3 for subsections: If you break down a section further, those become H3s under the relevant H2.
In your CMS:
- •WordPress: Select text, then use the paragraph/heading dropdown in the toolbar
- •Squarespace: Highlight text, then choose from Heading 1, Heading 2, etc. in the text editor
- •Wix: Select text, then use the "Text Theme" dropdown to choose heading levels
Example structure for a homepage:
H1: Transform Your Business With Professional Bookkeeping
H2: Services We Offer
H3: Monthly Bookkeeping
H3: Tax Preparation
H3: Financial Planning
H2: Why Choose Us
H2: Get Started Today
This logical structure helps everyone navigate your content, whether they're using a screen reader, scanning visually, or a search engine trying to understand your page. Apply this same principle across all your essential website pages.
Step 3: Test and Fix Your Colour Contrast
Adequate colour contrast between text and background isn't just helpful for people with visual impairments—it makes your site easier to read for everyone, especially on mobile devices in bright sunlight.
The standard: WCAG 2.1 Level AA requires:
- •4.5:1 contrast ratio for normal text
- •3:1 contrast ratio for large text (18pt+ or 14pt+ bold)
Why designers often get this wrong: Subtle, low-contrast designs might look sophisticated on a designer's calibrated monitor, but they fail in real-world conditions. That trendy light grey text on white background? It's probably excluding 10-15% of your visitors.
How to test your contrast:
- Identify your primary text and background colours. In your CMS, click on text and note the colour code (usually a hex code like #333333).
- Visit WebAIM's Contrast Checker: Go to webaim.org/resources/contrastchecker
- Enter your colours: Input your text colour (foreground) and background colour, then check the results.
- Look for "Pass" indicators: You need to pass WCAG AA for normal text at minimum.
Common contrast failures and fixes:
| Problem | Solution |
|---------|----------|
| Light grey text (#999999) on white | Darken to #767676 or darker |
| White text on light blue | Use darker blue or add text shadow |
| Coloured text on coloured background | Increase darkness difference or use white/black |
Where to check contrast:
- •Body text on main background
- •Navigation links
- •Button text
- •Footer text
- •Form labels and placeholder text
If you're struggling with colour choices, revisit the fundamentals in understand basic colour psychology to select colours that both look professional and meet accessibility standards.
Step 4: Ensure Full Keyboard Navigability
Many people can't use a mouse—they navigate websites entirely with a keyboard (typically using the Tab key to move between interactive elements). Your site must work perfectly for them.
The Tab Test: This is the simplest and most effective accessibility test you can perform.
- Open your website in a browser (Chrome, Firefox, or Safari)
- Click in the address bar, then press Tab to move focus onto the page
- Keep pressing Tab and watch what happens:
- You should see a visible outline or box moving from link to link
- Every clickable element (links, buttons, form fields) should be reachable
- The order should be logical (top to bottom, left to right)
- You should never get "stuck" with nowhere to go
- Test key interactions:
- Press Enter on links (should navigate)
- Press Space on buttons (should activate)
- Press Escape on modals/popups (should close)
[MEDIA:GIF:keyboard-focus-state]
Caption: A short animation demonstrating the blue box (focus state) moving across links using the Tab key.
Common keyboard navigation problems:
Problem 1: No visible focus state
You press Tab but can't see where you are on the page. This happens when themes remove the default focus outline for aesthetic reasons.
Fix: Add visible focus styles. In most platforms, this is a theme setting. In custom CSS, ensure you have:
a:focus, button:focus {
outline: 2px solid #0066cc;
}
Problem 2: Illogical tab order
The focus jumps around randomly instead of following visual order.
Fix: This usually happens with complex layouts using CSS positioning. Avoid using `tabindex` values greater than 0, which override natural order. Restructure your HTML to match visual order.
Problem 3: Interactive elements aren't keyboard-accessible
Clicking works, but pressing Enter or Space doesn't.
Fix: Ensure you're using proper HTML elements (`<button>` for buttons, `<a>` for links) rather than `<div>` or `<span>` with click handlers.
Problem 4: Keyboard trap
You can Tab into an element (like a modal or menu) but can't Tab out.
Fix: Ensure modals and overlays have a close button that's keyboard-accessible, and that focus returns to the trigger element when closed.
The keyboard test often reveals issues that also affect mobile usability, since touch targets and navigation patterns overlap. For more on this connection, see designing for mobile usability.
Step 5: Review Complex Elements (Forms and Video)
Two elements need special attention for accessibility: forms and multimedia.
Forms accessibility:
Every form field needs a visible label (not just placeholder text). Screen readers announce labels to help users understand what to enter.
Bad:
<input type="text" placeholder="Enter your email">
Good:
<label for="email">Email Address</label>
<input type="text" id="email" name="email">
In your CMS: Most form builders (Contact Form 7, Gravity Forms, Squarespace Forms) automatically create proper labels. Verify that:
- •Every field has a label above or beside it
- •Required fields are marked (with an asterisk or "required" text)
- •Error messages are clear and specific
For comprehensive form setup guidance, see well-structured contact forms.
Video and audio accessibility:
If you have video or audio content:
- •Captions: All videos need captions (not just for deaf users—85% of Facebook videos are watched without sound)
- •Transcripts: Provide text transcripts for audio content
- •Controls: Ensure play/pause buttons are keyboard-accessible
Quick video caption solutions:
- •YouTube auto-generates captions (edit them for accuracy)
- •Vimeo offers caption upload
- •Most video hosting platforms support .SRT caption files
🎉 Completed? You've significantly improved your site's accessibility and ensured basic compliance. You're ready for How to Fix Broken Links and Images.
Troubleshooting
What's Next
You've implemented the four core accessibility fixes that address the majority of common issues. Your website is now significantly more usable for people with disabilities and better optimised for search engines.
Immediate next step: How to Fix Broken Links and Images — Complete your final quality checks before launch.
Go deeper when you're ready:
- •Accessibility / ADA Audit for Small Business Websites — For the full, detailed technical assessment and audit framework, see our comprehensive guide on running a website accessibility audit.
- •Writing Accessible Content — Learn how to format text, use plain language, and structure every piece of copy to ensure maximum readability for all users.
Other Get Online Guides
- •25-Point Website Pre-Launch Checklist
- •Launch Your Website (Final Steps)
- •Test Your Website on Multiple Devices
- •What Should I Put on My Homepage?
- •Add Booking or Payments Without a Developer
- •Create a Simple FAQ Page