Digital accessibility (also known as web accessibility) is a principle of designing websites and applications in a way that makes them accessible and functional for the widest possible range of users – including people with disabilities. The key standard in this area is the Web Content Accessibility Guidelines (WCAG), which define how specific interface elements must behave to ensure no one is excluded from using the website.

In practice, accessibility means, for example, the ability to navigate a website using only a keyboard, proper color contrast, or alternative text descriptions for images.

New Regulations: European Accessibility Act (EAA)

Starting from June 28, 2025, the European Accessibility Act (EAA) will come into effect – an EU directive that mandates digital accessibility for a wide range of products and services, including online stores. This applies to both new and existing platforms, with a transitional period granted for some of them.


This means that e-commerce owners must ensure their online stores comply with accessibility requirements, or they risk facing legal penalties, customer complaints, and the loss of potential users.

Most Common Accessibility Issues (and How to Fix Them)

Here are some common issues frequently found on websites – along with their solutions:

1. Missing Keyboard (TAB) Navigation

The user should be able to navigate the page using the TAB key. In practice, this means having a proper HTML structure and a visible focus on active elements.


Solution: Ensure that all buttons, links, and form fields have a logical tab order and focus outline. This can be achieved by using semantic HTML elements and ensuring that each focusable element is properly outlined when selected (e.g., using :focus CSS selector).

2. Missing "Skip to Content" Button

It’s a simple mechanism that allows the user to skip headings, menus, and jump directly to the main content.


Solution: Add a hidden "Skip to content" button at the top of the page that appears when the TAB key is pressed.

3. Missing keyboard close for Modal Boxes

Keyboard users often get "stuck" in modals, unable to exit without a mouse.

Solution: Ensure that modals can be closed with the ESC key and properly manage focus (e.g., prevent the cursor from leaving the modal).

4. Incorrect Image and Link Descriptions

Images without alt text and links like "click here" are elements that are unreadable by screen readers.

Solution: Use descriptive text and always add alternative text to media.

5. Too Low Color Contrast

Users with visual impairments cannot read text with too low contrast.

Solution: Check colors using tools like WebAIM Contrast Checker and adjust the CSS accordingly.

Practical examples of accessible components

If you're wondering what properly implemented user interface components compliant with WCAG should look like, it's worth visiting the WAI-ARIA Authoring Practices page run by the W3C organization. There, you'll find dozens of ready-made examples of correct implementations for various UI elements—often with links to live versions on CodePen.

Here are a few of the most interesting examples:

  • Date Picker: Date Picker Dialog Example

    It shows how to create an accessible date picker — with keyboard support, focus management, and ARIA labels.
  • Modalbox: Modal Dialog Example

    Przykład dialogu, który blokuje tło, skupia uwagę użytkownika i można go zamknąć za pomocą klawiatury (ESC).

  • Carousel / Slider: Carousel Working Example

    An interactive slider with full keyboard support and screen reader compatibility.

All examples include detailed descriptions, implementation guidelines, and source code, making them an excellent starting point when working on accessibility. They are valuable to use as templates for your own components.

Your next steps:

 

  • Contact your agency and ask if they know how to implement the new guidelines.
    If you don't have an agency, contact us — we can help.
  • Perform an accessibility audit — for example, using Lighthouse, axe-core, Wave, or professional companies.
  • Identify critical errors — focus on "critical" and "major" issues.
  • Pay attention to extensions — some frontend extensions in Magento 2 may break accessibility.
  • Conduct user testing — including with users with disabilities.
  • Document changes — as proof of compliance in case of an audit.

Is it worth investing in accessibility? Yes – and for many reasons.

Tak – i to z wielu powodów.

Social:

  • You support people with disabilities
  • You are building an inclusive brand and a positive image.

Business:

  • You reduce legal risks and complaints
  • You improve SEO (many WCAG guidelines align with good SEO practices)
  • You increase accessibility for mobile users and older adults
  • You boost conversions – because an accessible website = a more usable website

Summary

The European Accessibility Act is not just a formality – it’s a real change that will impact the way we design and develop online stores. Instead of waiting for penalties, it’s worth checking today whether your Magento 2 store is accessible.

Would you like to conduct an audit or implement accessibility on your website? We’re here to help!

CONTACT US