Think about how often you use websites — for shopping, learning, working, or catching up with friends. But for millions of people with disabilities, using the web can be a challenge if sites aren’t designed with accessibility in mind.

Website accessibility means making digital content usable for everyone — including those with visual, hearing, motor, or cognitive impairments. In the European Union, accessibility isn’t just best practice — it’s legally required. You’ve already got the EU Web Accessibility Directive and EN 301 549 (based on WCAG 2.1 AA), and now a new regulation is taking effect on 28 June 2025 that further expands these rules.

From that date, the European Accessibility Act (EAA) will apply not just to public-sector websites, but also to a wide range of digital services and products — e.g. e-commerce platforms, banking apps, ticketing machines, and more — that are sold or provided in the EU.

But accessibility is more than just compliance. It improves user experience, strengthens SEO, and expands your audience. In this article, we’ll cover what the EU requires, the key principles of accessible design, and practical tips to help you build websites that work for everyone.

The 4 Principles of Accessible Websites (WCAG 2.1)

So, how do you actually make a website accessible? The good news is that you don’t have to guess.

Accessibility is based on a clear set of rules called the Web Content Accessibility Guidelines (WCAG). At the heart of WCAG are four key principles, often remembered by the word POUR. Let’s break them down:

1. Perceivable

People need to be able to see or hear your content, depending on how they access the web. That means:

• Adding alt text to images so screen readers can describe them

• Using captions for videos

• Making sure color contrast is high enough for text to be readable

2. Operable

Your website should be easy to use, even if someone can’t use a mouse.

• Can you navigate everything using just a keyboard?

• Do all buttons, links, and forms have clear focus indicators when selected?

• Avoid things like flashing animations that could trigger seizures

3. Understandable

Websites should be clear and predictable.

• Use simple, consistent navigation

• Make sure forms have clear labels and helpful error messages

• Avoid using technical jargon when plain language will do

4. Robust

Your website should work well with a wide range of devices and assistive technologies, like screen readers.

• Use clean, semantic HTML

• Test your site with different browsers and devices

• Use ARIA (Accessible Rich Internet Applications) attributes carefully to help screen readers

In the next section, we’ll dive into practical steps you can take to make your website more accessible.

---

Practical Steps to Build Accessible Websites

Now that you know the key principles of accessibility, let’s talk about how to actually put them into practice. The good news? Many accessibility improvements are simple to add — and they often make your website easier to use for everyone.

Here are some of the most important things to focus on:

1. Use Alt Text for Images

Alt text is a short description of an image that helps people using screen readers understand what’s being shown. If the image is decorative and doesn’t add meaning, you can leave the alt text empty — but for important images, write something short and descriptive.

❌ Bad: alt text is missing

✅ Good: alt text is present:

<img src="product.jpg" alt="Black leather backpack with silver zippers" />

2. Check Your Color Contrast

Text should stand out clearly against the background. Use high-contrast colors, especially for buttons, links, and body text. There are free online tools to check if your color combinations meet the recommended contrast ratio.

❌ Bad: Light gray text on a white background:

{
    color: #ccc; 
    background: #fff;
}

✅ Good: Dark gray text on white background:

{
    color: #333; 
    background: #fff;
}

ℹ️ For checking color contrast, use tools like WebAIM Contrast Checker.

3. Make Sure Everything Works with a Keyboard

Some users can’t use a mouse and rely entirely on a keyboard to navigate. Test your site by pressing Tab and Shift + Tab to move around. Can you reach every link, button, and form field? Can you clearly see which element is currently selected?

✅ Good: When you tab to a button, you see a clear outline or highlight around it.

❌ Bad: The focus indicator is missing, and you don’t know what’s selected.

button:focus {
  outline: 2px solid #97D3F2;
}

4. Use Clear Labels and Error Messages on Forms

Forms are often frustrating for everyone — and even more so if they aren’t accessible. Make sure each form field has a label that tells the user what to enter, and provide helpful error messages when something goes wrong.

❌ Bad: Error: Invalid input.

✅ Good: Please enter a valid email address (example@domain.com).

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<span class="error">Please enter your email address.</span>

5. Structure Your Content with Headings

Use headings (<h1>, <h2>, <h3>, etc.) in the correct order to create a clear structure for your pages. Screen readers use these headings to help people jump quickly to the sections they need.

❌ Bad: Avoid skipping levels like jumping from <h1> straight to <h4>.

✅ Good:

<h1>Our Services</h1>
  <h2>Web Development</h2>
    <h3>Frontend</h3>
    <h3>Backend</h3>
  <h2>Consulting</h2>

6. Add ‘Skip to Content’ Links

This simple link at the top of the page lets keyboard users skip repetitive navigation (like menus) and go straight to the main content. It’s a small thing that makes a huge difference in usability.

❌ Bad: Missing button for skipping to content

✅ Good: Button with link to the content:

<body>
  <a href="#main-content" class="skip-link">Skip to main content
  </a>

  <header class="site-header">
    <!-- Rest of your header code, like navigation menus, goes here -->
  </header>

  <main id="main-content">

    <h1>Heading</h1>
    <p>This is the first paragraph</p>

  </main>

</body>

✅ Use CSS to make it visible when focused by a keyboard user.

.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
}

7. Use ARIA Labes and Roles

ARIA stands for Accessible Rich Internet Applications. It’s a set of attributes you can add to HTML to help screen readers and other assistive technologies understand parts of your website that aren’t already clear from the HTML alone.

❗ The first rule of ARIA use is: "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so."

There are many ARIA attributes that can be used. Here are examples of the most common ones:

Example 1: aria-label

Provides an invisible label for screen readers if there’s no visible text.

<button aria-label="Close menu">
  <svg>...</svg> <!-- An icon-only button -->
</button>

✅ Use this for icon-only buttons so screen readers know what they do.

Example 2: aria-hidden

Hides content from screen readers that doesn’t add value or may be confusing.

<span aria-hidden="true">*</span> <!-- Decorative symbol, not meaningful -->

❗ Tip: Never use aria-hidden="true" on important content that people need to understand.

Example 3: role

Defines the type of element when you’re using a non-semantic element like <div> or <span> for a custom component.

<div role="button" tabindex="0" onclick="doSomething()">Click Me</div>

❌ BUT — it’s better to just use:

<button onclick="doSomething()">Click Me</button>

✅ Use roles only when there’s no suitable semantic HTML element.

Example 4: aria-live

Announces dynamic changes (like form validation or loading messages) to screen readers automatically.

<div aria-live="polite">Your changes have been saved.</div>

aria-live can have following values:

• off (default):

  • Updates to this region are not announced by screen readers.

  • When to use: For content that updates but doesn’t need to be announced to users.

• polite:

  • Updates will be announced when the user is idle (won’t interrupt the current speech).

  • When to use: For non-critical updates that are useful but not urgent.

• assertive:

  • Updates will be announced immediately, interrupting whatever the screen reader is currently reading.

  • When to use: For important or urgent updates where the user needs to know right now.

---

Conclusion

Website accessibility isn’t just about ticking boxes — it’s about making sure everyone can use what you build. By following accessibility principles and using practical steps like good color contrast, proper alt text, and keyboard-friendly navigation, you’re not only creating better experiences for people with disabilities — you’re improving your site for all users.

Plus, with regulations like the EU accessibility directive, it’s not just good practice — it’s becoming a legal requirement too.

Thank you for reading. I hope this article helps improving your product!