5 Quick Wins to Make Your Website More Accessible Today

The European Accessibility Act is enforceable since June 2025. If you're selling products or services online, your website needs to be accessible. That sounds like a big project. It can be. But five specific fixes will address the most common problems, and you can do them today without touching code.

These aren't band-aids. They're real improvements that help real people use your website. Around 80 million people in the EU have some form of disability. Many of them are your potential customers.

Here's where to start.

Win 1: Add alt text to every image

Alt text is a short description of an image that screen readers read aloud to blind and visually impaired visitors. Without it, a screen reader just says "image" and moves on. The visitor has no idea what they're missing.

How to check your current alt text

In WordPress:

1. Go to Media > Library
2. Click on any image
3. Look at the "Alt Text" field on the right side
4. If it's empty, that image needs alt text

In any browser:

1. Right-click on an image on your website
2. Click "Inspect" or "Inspect Element"
3. Look for alt="" in the highlighted code. Empty quotes mean no alt text

Free tool: Install the WAVE browser extension from wave.webaim.org. It highlights every image on your page and shows you which ones are missing alt text. Red flags mean problems.

How to write good alt text

Describe what the image shows in one sentence. Be specific. Skip "image of" or "photo of" since the screen reader already knows it's an image.

Good alt text:

• "Woman getting her hair colored at a salon chair"
• "Dental X-ray showing a cracked molar"
• "Our restaurant's outdoor terrace with six tables"

Bad alt text:

• "image1.jpg"
• "photo"
• "Beautiful professional high-quality salon experience" (keyword stuffing helps nobody)

Decorative images that are purely visual and carry no information should have empty alt text: alt="". This tells screen readers to skip them. Examples: background patterns, decorative dividers, spacer images.

Win 2: Check your color contrast

Low contrast text is one of the most common accessibility failures. Light grey text on a white background looks clean and modern. It's also unreadable for millions of people with low vision, and uncomfortable for everyone else.

The minimum contrast ratios

WCAG 2.1 sets these minimum contrast ratios:

• Normal text (under 18px): contrast ratio of at least 4.5:1
• Large text (18px bold or 24px regular): contrast ratio of at least 3:1
• UI components and graphics: contrast ratio of at least 3:1

How to check your contrast

WebAIM Contrast Checker (webaim.org/resources/contrastchecker): Enter your text color and background color. It tells you instantly whether you pass or fail.

Browser DevTools:

1. Right-click on any text on your website
2. Click "Inspect"
3. In the Styles panel, click on the color value
4. Chrome and Firefox both show contrast ratio information with a pass/fail indicator

WAVE extension: The same tool from Win 1 also flags contrast issues. Low contrast elements get a yellow warning icon.

Common problem areas

• Light grey body text on white backgrounds
• White text on light-colored hero images without a dark overlay
• Placeholder text in form fields (the light grey hint text)
• Footer text that uses a subtle color on a dark background
• Links that only differ from body text by a slight color change

Quick fixes

If your text fails the contrast check, darken it. Going from #999999 to #595959 for body text on a white background takes you from failing to passing. Ask your web designer to update the CSS, or adjust it in your website builder's style settings.

For text over images, add a semi-transparent dark overlay behind the text. This is a two-minute CSS change:

.hero-overlay {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

Win 3: Make your site work with keyboard only

Not everyone uses a mouse. People with motor disabilities, repetitive strain injuries and many blind users rely on keyboard navigation. If they can't tab through your website and interact with every element, they're locked out.

How to test keyboard navigation

1. Open your website in a browser
2. Put your cursor in the address bar
3. Press Tab repeatedly
4. Watch where the focus goes

You should see a visible outline or highlight moving through your page: from the navigation links, through the content, to buttons and form fields.

What to look for

Can you see where you are? Every focused element should have a visible outline or highlight. If pressing Tab moves the focus but you can't tell where it is, your site has hidden focus indicators. This is a common problem caused by CSS that removes the default focus outline.

Can you reach everything? Tab through the entire page. Can you reach the navigation menu? The search box? The contact form? The cookie banner? Every interactive element should be reachable by keyboard.

Can you use dropdown menus? Many navigation menus only open on hover. If you can't open a dropdown with the keyboard, keyboard users can't access those pages. Test with Tab, Enter and arrow keys.

Can you close popups? If your site has modal dialogs, cookie banners or popup forms, you should be able to close them with the Escape key. And focus should return to where it was before the popup opened.

Is the tab order logical? Focus should move through the page in a natural reading order: left to right, top to bottom. If pressing Tab jumps you from the header to the footer and then back to the middle, something is wrong with the page structure.

Quick fixes

If focus indicators are invisible, add this CSS:

*:focus-visible {
  outline: 2px solid #1B7D56;
  outline-offset: 2px;
}

This shows a visible outline only when someone is using keyboard navigation, not when they click with a mouse.

For dropdown menus that only work on hover, talk to your web developer. This is usually a 30-minute fix involving adding focus-within states and keyboard event handlers.

Win 4: Add proper form labels

Every input field on your website needs a label that tells the user what to type there. This seems obvious visually. You see a field next to the word "Email" and you know what goes there. But screen readers need the label to be programmatically connected to the field, not just visually near it.

How to check your form labels

WAVE extension: Run WAVE on any page with a form. It flags missing labels, empty labels and labels that aren't properly associated with their fields.

Manual check: Right-click on a form field, click "Inspect" and look for a <label> element with a for attribute that matches the field's id:

<!-- Good: label is connected to the field -->
<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- Bad: no label at all -->
<input type="email" name="email" placeholder="Email address">

Placeholder text is not a label

A common mistake: using placeholder text as the only label. Placeholders are the grey text inside a field that disappears when you start typing. Screen readers handle placeholder text inconsistently. Some read it, some don't. And once someone starts typing, the placeholder vanishes, leaving no indication of what the field is for.

Always use a visible label above or beside the field. Placeholders can provide additional hints, but they can't replace labels.

Common forms to check

• Contact forms
• Newsletter signup forms
• Booking and appointment forms
• Search boxes
• Login forms
• Checkout forms

Win 5: Fix your heading hierarchy

Headings aren't just visual styling. Screen reader users move through pages by jumping between headings, the same way sighted users scan a page by looking at the bold text. If your heading structure is broken, keyboard users can't find what they're looking for.

The rules

• Every page should have exactly one H1 (your page title)
• H2s are main sections under the H1
• H3s are subsections under an H2
• Never skip levels. Don't jump from H2 to H4

How to check your headings

WAVE extension: Shows a complete heading outline of your page. Missing levels and skipped levels are flagged as errors.

HeadingsMap browser extension: Creates a clickable table of contents from your page headings. You can see the hierarchy at a glance and spot problems instantly.

Manual check in DevTools:

1. Open DevTools (F12)
2. Press Ctrl+F in the Elements panel
3. Search for <h1, <h2, <h3 etc.
4. Check that they follow a logical order

Common heading mistakes

Using headings for styling. Making text an H3 because you want it to look a certain size, not because it's actually a subsection. Use CSS to style text instead of misusing heading tags.

Multiple H1s. Some website templates put the site name in an H1 on every page, and also make the page title an H1. Fix this so only the page title is H1.

Skipping heading levels. Going from H1 straight to H3 because H2 "looks too big." Adjust the CSS to make H2 look how you want. Don't skip the level.

No headings at all. Some pages use bold text or large font sizes instead of proper heading tags. Screen readers can't distinguish these from regular text.

If you want to understand how the European Accessibility Act applies to your business and what else your website might need, read our guide to the EAA for small businesses.

What to do after these five wins

These five fixes address the most common accessibility issues. But they're a starting point, not the finish line. Full WCAG 2.1 AA compliance, which the EAA references, covers dozens more requirements including video captions, error handling, time limits and more.

Run a free scan of your website to get a full picture of your accessibility status. The scan checks for the issues above and many more, giving you a prioritized list of what to fix next.

Common Questions

Do these changes require a developer?

Alt text, color contrast adjustments in website builders and heading fixes can usually be done without a developer. Keyboard navigation fixes and form label corrections sometimes need developer help, especially if you're using a custom-built website.

Will an accessibility overlay fix these issues?

Overlays are plugins that add a toolbar to your website claiming to fix accessibility problems. They don't fix the underlying code. Screen reader users generally dislike them. Several major lawsuits have been filed against companies relying on overlays instead of fixing their websites. Fix the actual problems instead.

How do I know if my website meets the EAA requirements?

The EAA references the European standard EN 301 549, which in turn references WCAG 2.1 AA. If your website meets WCAG 2.1 AA, you're in good shape for the EAA. Our free website scan checks against these standards and tells you where you stand.

Can I get fined for accessibility violations?

Yes. Since June 2025, EU member states can enforce the EAA. In the Netherlands, the ACM is the enforcement body for private sector websites. Penalties vary by country but can include fines and orders to fix the issues within a deadline. Read about EAA penalties for more details.

How long do these fixes take?

Alt text depends on how many images you have, but figure 1-2 minutes per image. Color contrast checks take about 15 minutes for a typical small business website. Keyboard testing takes 10-20 minutes. Form labels and heading fixes depend on how many pages you have. For a five-page business website, you can get through all five wins in an afternoon.

---

Check your website now Scan your website for accessibility issues and more. Free, no signup, takes two minutes. Scan your website