WCAG in practice: how to design and develop accessible websites

The European Accessibility Act (EAA) is reshaping the way digital products and services are designed and delivered across the EU. Organizations are now obliged to ensure their websites and digital services comply with accessibility standards to avoid legal risks. But what exactly does accessibility mean in practice? Which guidelines should you follow to meet the EAA requirements? And how do you implement these standards effectively in your web design and development process? This article will guide you through the essentials of WCAG compliance and practical steps to create truly accessible websites.

Why the European Accessibility Act matters

The European Accessibility Act (EAA), introduced by the EU in 2019, aims to improve the accessibility and usability of digital products and services, especially for people with disabilities and older adults. By June 28, 2025, organizations operating in industires listed in the act, offering their products and services to EU citizens must comply with the EAA’s standards. The directive applies to businesses offering digital services like e-commerce, banking, telecommunications, transportation, software, and audiovisual media, though microenterprises with fewer than 10 employees and limited turnover are exempt.

If you don’t meet these accessibility rules, you may be facing legal penalties including fines. But accessibility is more than just following the law – it’s about making your digital services easier to use for everyone. This helps you reach more people, including those with access needs, and builds a stronger, more positive reputation for your brand as well as improved business results.

You can find more details in our previous article on the EAA:
European Accessibility Act: what it Is and who it affects >>

WCAG: The technical backbone of accessibility

The Web Content Accessibility Guidelines (WCAG) are internationally recognized standards that help make web content accessible to all users. The EAA aligns closely with WCAG 2.1 Level AA and to comply with the EAA, websites should meet at least this level of accessibility.

While the EAA sets out what must be accessible, WCAG provides practical guidance on how to achieve it, ensuring your digital content is both inclusive and legally compliant.

To ensure compliance with WCAG guidelines, you may begin by using accessibility plugins, followed by in-depth technical audits to make the process more efficient and hassle-free. Installing the plugin should not be, however, the only activity in the accessibility optimization process. For a complete view of your website accessibility level and a list of required improvements, you should consider a full technical accessibility audit.

What does an accessibility audit involve?

A technical accessibility audit is a structured process that evaluates how well a website or digital product meets recognized accessibility standards. It helps identify barriers that could prevent people with disabilities from accessing or using your digital services effectively.

Conducting an audit is an important step toward ensuring compliance with the European Accessibility Act (EAA) and reducing potential legal risks. Keep in mind that true accessibility isn’t just about meeting standards – it’s about creating inclusive, future-proof, meaningful experiences for all users.

A comprehensive accessibility audit typically involves:

Step #1 Requirements identification

Understanding both external standards (for example WCAG) and internal requirements organisations have to adhere to.

Step #2 Automated testing

Implementing tools to detect common accessibility issues, such as missing alt text or insufficient color contrast. 

Step #3 Manual testing

Evaluating your site using assistive technologies such as screen readers and keyboard navigation to reflect the experience of users with access needs. While automated tools are valuable for identifying common issues, testing with real users uncovers challenges that machines may overlook.

This phase often involves users with disabilities, who provide authentic, experience-based insights that automated tools simply can’t capture. Their participation helps uncover issues that may otherwise go unnoticed – and ensures that the solutions are grounded in actual user needs.

A practical example of such a complex manual testing process would be our cooperation with Biedronka.

Step #4 Code review 

Examining the codebase to uncover deeper issues not visible in the UI – such as improper ARIA.

Step #5 Recommendations

Involves delivering a clear, actionable report outlining the problems found and providing specific guidance on how to address them.

Step #6 Feedback

Engaging in a discussion to walk through the findings, answer questions, and help the team understand what’s needed for implementation.

Essential aspects of accessible design

Creating an accessible digital experience requires attention to many interconnected areas. Below is a breakdown of the most important elements that should be considered or optimized to ensure compliance with accessibility standards and to support users with diverse needs.

Color and contrast

Ensure sufficient color contrast between text and background (minimum 4.5:1 for normal text, 3:1 for large text).

Typography

Allow users to adjust font size and spacing without loss of functionality or content. According to WCAG 2.2 guidance, layouts should support:

• Line height: at least 1.5× the font size
• Letter spacing: at least 0.12× the font size
• Word spacing: at least 0.16× the font size
• Paragraph spacing: at least 2× the font size after each paragraph

Proper spacing helps people with reading difficulties follow text more easily.

Components and interactive elements

Interactive components should be usable at a minimum width of 320px and height of 256px, ensuring accessibility on both vertical and horizontal orientations. Layouts must adapt well across screen sizes and orientations.

Include a “Skip to content” link to let users bypass repetitive navigation. Use clear, consistent heading levels and semantic structures to help users navigate with ease – especially those using screen readers or keyboards.

Language and structure

Every page should have a descriptive title and a defined language, so assistive technologies can interpret the content correctly. The structure should follow a logical order, with headings and labels that clearly describe the content – not just act as decoration.

Users should also have more than one way to reach important pages, such as through both navigation and in-text links. A clear, consistent structure improves accessibility and helps all users navigate your site more easily.

Images and graphics

Images are essential to how users understand and navigate digital content, but they must be accessible to all. Informative images should include concise, meaningful alt text that reflects both the image’s content and context. The description should highlight the most relevant elements and include context.

Avoid using visual-only cues in your content or instructions. Similarly, color should never be the sole method of conveying meaning. Use additional visual or textual indicators to ensure clarity for everyone.

Any moving or flashing elements should be easily paused or stopped to avoid distraction or harm. Avoid content that flashes more than three times per second, as it can trigger seizures in users with photosensitive epilepsy. Keeping below this threshold ensures a safer experience for all.

Keyboard navigation

Ensure that all interactive functionality is accessible via keyboard. Users should be able to navigate the site without time limits and move through elements in a logical tab order. Avoid keyboard traps and ensure all interactive elements are accessible via keyboard alone. Use keyboard shortcuts carefully – keep in mind that not all users have access to native characters or custom key layouts. This is crucial for users who cannot use a mouse or rely on alternative input devices.

Consistency

Maintain consistent design patterns, navigation logic, and labeling throughout the site. Provide consistent access to help – contact information should always appear in the same place on every page. Assistance should be easy to find within the first few interactions. 

Navigating accessibility can be challenging

Following accessibility guidelines not only helps to avoid legal penalties but also broadens customer base and enhances brand reputation. While the standards may appear complex, they are essential for any modern business committed to inclusivity. Ensuring your website meets accessibility requirements means adhering to these guidelines and conducting thorough technical audits to improve the user experience.

There is much more to accessibility than what was covered here, and staying informed is key to long-term success.

At ambiscale, we specialize in web accessibility and are ready to help your business navigate the challenges of EAA compliance. Our accessibility specialists will conduct a comprehensive audit of your website, identify areas for improvement, and assist in implementing the necessary changes to meet WCAG standards.

From a professional audit to the implementation of accessibility improvements, we can make your business is fully accessible to all clients and 100% compliant with the EAA. Let us help your company lead in inclusiveness – contact us.