Fix Website Accessibility Issues Without a Developer

By Claros Team 8 min read

You ran an accessibility scan on your website and the results are overwhelming. Dozens of errors, warnings about WCAG compliance, terms you have never heard of. You do not have a developer on staff and hiring one for this feels like overkill. Here is the reality: most accessibility issues on small business websites can be fixed without writing a single line of code.

This guide covers the 10 most common accessibility problems, explains why each one matters, and walks you through fixing it on WordPress, Squarespace, and Wix. Grab a coffee — you can knock out most of these in a single sitting.

1. Missing Image Alt Text

What it is: Alt text is a text description attached to an image. When a screen reader encounters an image, it reads the alt text aloud. Without it, the screen reader either skips the image entirely or reads the file name — "IMG underscore 3847 dot jpeg" — which tells the user nothing.

Why it matters: Approximately 2.2 billion people globally have a vision impairment. Alt text also helps when images fail to load and improves your SEO since search engines use it to understand image content.

How to Fix It

WordPress: Go to Media > Library. Click on any image. The "Alt Text" field appears on the right panel. Write a brief, descriptive phrase — "Customer enjoying a latte at our outdoor patio" rather than "image1" or "photo." For images already placed in pages, click the image in the editor, then click the pencil icon to edit and add alt text.

Squarespace: Click on the image block in your page editor. A panel appears with a field labeled "Image Description (Alt Text)." Fill it in for every image.

Wix: Click the image in the editor. Select "Settings" from the toolbar. Scroll to "What's in the image? Tell Google" — that field is your alt text.

Tips: Be specific and concise. Describe what is in the image, not what you want people to feel. Avoid starting with "Image of" or "Photo of" — screen readers already announce it as an image. For purely decorative images (background patterns, divider lines), set the alt text to empty rather than describing them.

2. Poor Heading Structure

What it is: Headings (H1 through H6) create a hierarchical outline of your page content. Screen reader users navigate pages by jumping between headings — it is their primary way of scanning content, equivalent to how sighted users visually scan a page.

Common problems: Using heading tags for visual styling (making something bold and large by marking it as H2 when it is not actually a section heading), skipping levels (going from H1 to H4), having multiple H1 tags on a single page, or not using headings at all.

How to Fix It

WordPress: In the block editor, select any text block. Use the "Heading" block type and select the appropriate level from the toolbar dropdown. Every page should have exactly one H1 (usually your page title — most themes set this automatically). Use H2 for major sections and H3 for subsections within those.

Squarespace: Select your text, then use the formatting dropdown to choose Heading 1 through Heading 3. Squarespace typically sets the page title as H1 automatically, so your content should start with H2.

Wix: Select text, click the "Themes" dropdown in the text editor, and choose the appropriate heading level. Wix uses "Heading 1" through "Heading 6" labels.

The rule: Think of headings as an outline. H1 is the title. H2s are chapters. H3s are sections within chapters. Never skip a level for visual reasons — if you want smaller styled text, adjust the font size rather than using an incorrect heading level.

3. Insufficient Color Contrast

What it is: Color contrast is the difference in brightness between text and its background. Low contrast text — like light gray text on a white background — is difficult or impossible to read for people with low vision, color blindness, or anyone using a screen in bright sunlight.

The standard: WCAG requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular).

How to Fix It

First, check your current contrast using a free tool. The WebAIM Contrast Checker at webaim.org/resources/contrastchecker lets you enter any two colors and instantly see whether they pass WCAG requirements. The "Colour Contrast Analyser" desktop app by TPGi works similarly and includes an eyedropper tool to pick colors directly from your screen.

WordPress: Go to Appearance > Customize (or Site Editor for block themes). Find the color settings for your theme. Adjust text colors and background colors until they meet the 4.5:1 ratio. Pay special attention to navigation links, footer text, placeholder text in forms, and button text.

Squarespace: Go to Design > Site Styles. Adjust the color palette. Squarespace organizes colors by theme — change the text and background assignments until contrast ratios pass.

Wix: Click "Site Design" in the left panel, then "Colors." Adjust your site's color palette. You can also click any individual text element and change its color directly.

Common culprits: Light gray body text, white text on light-colored photos without an overlay, placeholder text in search bars and forms, and footer links. Check these first.

4. Missing Form Labels

What it is: Every form field (text input, dropdown, checkbox, radio button) needs a programmatically associated label that tells screen readers what information to enter. Placeholder text inside the field does not count — it disappears when the user starts typing and is not reliably read by all screen readers.

How to Fix It

WordPress: If you use a form plugin like WPForms, Gravity Forms, or Contact Form 7, every field has a "Label" setting. Make sure it is filled in and not hidden. In WPForms, click the field, go to "Advanced," and ensure "Hide Label" is unchecked.

Squarespace: Squarespace form blocks automatically generate labels for standard fields. If you add custom fields, make sure each has a descriptive title. Go to the form block settings and verify each field has a title that will serve as its label.

Wix: In the Wix form builder, click on any field. In the settings panel, ensure the "Field Label" is filled in and visible. If you have hidden labels for aesthetic reasons, unhide them — accessible design requires visible labels.

Rule of thumb: If a sighted person can figure out what goes in a field only because of placeholder text or the field's position relative to other elements, a screen reader user cannot figure it out. Every field needs a visible label.

5. Missing Skip Navigation Link

What it is: A skip navigation link is a hidden link at the very top of the page that becomes visible when a keyboard user presses Tab. It allows them to skip past the main navigation menu and jump directly to the page content. Without it, a keyboard user must tab through every single navigation link on every single page before reaching the content.

How to Fix It

WordPress: Most modern WordPress themes include skip navigation by default. To check, load your site and press the Tab key — a "Skip to content" link should appear at the top left. If your theme does not include one, switch to a theme that does (all themes in the WordPress.org directory are required to include skip navigation), or install the "Skip Links" plugin.

Squarespace: Squarespace templates built on version 7.1 include skip navigation automatically. If you are on an older template (7.0), consider migrating to a 7.1 template.

Wix: Wix automatically adds a "Skip to content" link to all sites. Verify it works by pressing Tab on your live site.

6. Missing Language Attribute

What it is: The lang attribute on the HTML element tells screen readers what language the page is written in. Without it, the screen reader may use its default language settings, which produces garbled pronunciation for non-native content.

How to Fix It

WordPress: Go to Settings > General. Set the "Site Language" dropdown to your language. WordPress automatically adds the correct lang attribute to your pages.

Squarespace: Go to Settings > Language & Region. Set your site language. Squarespace handles the HTML attribute automatically.

Wix: Go to Settings > Multilingual (or Settings > Language & Region). Set your primary language. Wix adds the attribute automatically.

This is a 30-second fix that resolves a surprisingly common audit finding.

7. Non-Descriptive Link Text

What it is: Links that say "click here," "read more," or "learn more" are meaningless to screen reader users who navigate by pulling up a list of all links on the page. A list showing "click here, click here, read more, learn more, click here" tells them nothing about where those links go.

How to Fix It

Rewrite your link text to describe the destination. Instead of "To see our menu, click here," write "View our full dinner menu." Instead of "Read more," write "Read the complete guide to kitchen renovations."

On all three platforms — WordPress, Squarespace, and Wix — this is simply a matter of editing your page content and changing the linked text. No special settings required. Go through each page and search for generic link text, then rewrite it to be descriptive.

8. Auto-Playing Media

What it is: Videos or audio that play automatically when a page loads. This is disorienting for screen reader users because the media audio competes with their screen reader's speech output. It is also jarring for everyone else and is considered a poor user experience practice regardless of accessibility.

How to Fix It

WordPress: Edit the page with the video. Click the video block and ensure "Autoplay" is toggled off in the block settings sidebar.

Squarespace: Click the video block. In the design settings, uncheck "Auto Play" and ensure the video has player controls visible.

Wix: Click the video element. In the settings panel, toggle off "Autoplay."

If you have a background video on your homepage, add a visible pause button. WCAG requires that any auto-playing media lasting more than 5 seconds must have controls to pause, stop, or mute it.

9. Missing Focus Indicators

What it is: Focus indicators are the visible outlines that appear around buttons, links, and form fields when a keyboard user tabs to them. They serve the same purpose as a mouse cursor — they show where you are on the page. Removing them (a common CSS choice for aesthetic reasons) makes the site unusable for keyboard-only users.

How to Fix It

WordPress: Most themes include default focus styles. If yours removes them (test by tabbing through your site — if you cannot see where the focus is, they have been removed), switch to a theme that includes them or contact your theme developer. The Twenty Twenty-Five and other recent default WordPress themes have excellent focus indicators.

Squarespace: Squarespace 7.1 templates include focus indicators by default. If you have added custom CSS that includes outline: none, remove that CSS rule through Design > Custom CSS.

Wix: Wix includes built-in focus indicators on interactive elements. If they appear missing, check if you have applied any custom code that removes outlines.

How to test: Go to your live site, click in the address bar, then start pressing Tab repeatedly. You should see a visible indicator (usually an outline or highlight) move through each interactive element on the page. If you cannot tell where the focus is, your focus indicators need fixing.

10. Inaccessible Tables

What it is: Data tables (pricing tables, schedules, comparison charts) need proper header cells and structure so screen readers can announce which column and row each data cell belongs to. Without headers, a screen reader just reads a string of disconnected values that make no sense.

How to Fix It

WordPress: Use the built-in Table block. When you create a table, toggle on "Header section" in the block settings to add a proper header row. Each cell in the header row should describe the column below it.

Squarespace: Squarespace does not have a native accessible table block. For simple tables, use a Markdown block with proper table syntax including headers. For complex tables, consider embedding a Google Sheet or using a third-party embed tool that generates accessible tables.

Wix: Use the Table element (under "Add" > "Menu & Anchor" or use the App Market to find a table widget). Ensure your first row contains header labels that describe each column.

Important: Do not use tables for visual layout purposes — only for actual tabular data. If you are using a table to arrange images or create column layouts, replace it with your CMS's built-in column or grid layout tools instead.

Testing Your Fixes

After making these changes, verify they work:

  1. Keyboard test: Navigate your entire site using only the Tab key, Enter key, and arrow keys. Can you reach and operate everything? Can you always see where the focus is?
  2. Screen reader test: Try VoiceOver on Mac (Command + F5 to toggle) or NVDA on Windows (free download). Navigate your homepage and one content page. Listen for missing labels, confusing announcements, or skipped content.
  3. Automated scan: Run your site through an automated accessibility checker to catch any remaining issues. Automated tools catch about 30-40% of accessibility problems, but they are excellent for verifying the fixes listed above.
  4. Color contrast check: Use the WebAIM Contrast Checker on every text/background color combination on your site.

Scan Your Site for Accessibility Issues

Knowing which issues to fix is the hardest part, and that is where automated scanning helps most. Run a free Claros scan on your website to get an instant accessibility audit alongside your performance, SEO, and security scores. You will see exactly which of these 10 issues apply to your site, prioritized by impact, so you know where to start.

The scan takes under 30 seconds, requires no account, and gives you a clear, actionable report. Fix the top issues using the steps above, then scan again to confirm they are resolved.

Get Your Free Website Grade

Claros analyzes your website across performance, SEO, security, accessibility, and more — in under 30 seconds.

Scan Your Website Free