Search for a command to run...
A Practical Guide to Accessibility, Compliance, and Better User Experience
🚀 Self-taught software developer with a passion for growth and innovation. From an economics background, I transitioned into tech—gaining experience in frontend and fullstack development across financial and healthcare industries. My journey led me to founding Bitloom, a software development company focused on building modern web and mobile solutions.
No comments yet. Be the first to comment.
Step-by-step Instructions to Build an AI Agent Team for Complex Tasks
Recently, when building a mobile app and implementing OAuth authentication in Expo and Supabase, I ran into several issues that took me hours to debug. Searching through documentation, forums, and using various AI tools, I found the right solution th...
When I first started learning JavaScript, it gave me plenty of headaches. It’s easy to learn but hard to master—a language that can bring you joy and frustration on the same day. As Douglas Crockford, an author of JavaScript: The Good Parts, once sai...
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.
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:
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
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
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
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.
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:
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" />
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.
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;
}
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>
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>
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;
}
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:
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.
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.
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.
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.
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!