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.
What You'll Have When Done:
A website that meets the most common, high-impact accessibility requirements, opening your business to a wider audience and reducing legal risk.
Time Needed: 45-60 minutes
Difficulty: Confident
Prerequisites:
Website pages (Homepage, Services, Contact) are drafted
Visual elements (photos, logos) are uploaded
Access to your website's CMS (WordPress, Squarespace, etc.)
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.
You've Completed Quick Start When:
☑ All major images have descriptive Alt Text
☑ Only one H1 exists per page
☑ Your colour contrast passes WCAG AA
☑ Tab navigation shows visible focus states
Validation: Your Lighthouse Accessibility score is 90+
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.
[MEDIA:SCREENSHOT:cms-alt-text-field]
Caption: Locating the Alt Text field within a standard WordPress or Squarespace image block.
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
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.
[MEDIA:SCREENSHOT:color-contrast-tool]
Caption: Example of a passing score (AA) on a free online colour contrast checker.
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.
NetNav Note: Colour contrast and heading structure checks are foundational to site health. This is one of the checks NetNav runs automatically across your whole site, flagging immediate visual and structural issues before they become legal risks.
---
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:
```css
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.