WCAG 2.2 – What is it and why is it important for e-commerce?

‍The WCAG (Web Content Accessibility Guidelines) is an international standard developed by the W3C consortium as part of the WAI (Web Accessibility Initiative) initiative – a set of principles aimed at designing websites and web applications accessible to people with various disabilities. The first version of WCAG 1.0 was published in 1999, and subsequent updates (2.0, 2.1, currently 2.2) have gradually expanded the scope of requirements. The WAI initiative at W3C has been operating since the 1990s, creating accessibility standards and supporting their implementation – thanks to this, the WCAG principles have become a widely recognized framework solution for ensuring that websites are "for everyone".

June 11, 2025
|
Aleksander Olszewski

WCAG 2.2 Importance and Legal Context

WCAG guidelines are gradually becoming law in the EU and its member states. Of key importance here is the European Accessibility Act (EAA) – an EU directive (2019/882), in force since 28 June 2025. It introduces a requirement for the accessibility of selected digital products and services, including websites and online applications, e-commerce stores and other digital systems (e.g. payment applications, e-books). This act covers EU companies generating at least EUR 2 million per year and employing at least 10 employees – thus laying off micro-enterprises.

E-commerce Obligations: Online stores are subject to these regulations, which is why owners of e-commerce platforms must implement accessibility requirements (at least AA level, usually associated with WCAG) by the aforementioned deadline. This also applies to Shopify stores operating on the EU market. Failure to implement appropriate changes may result in financial sanctions – it is estimated that the penalties may reach up to 10% of annual turnover. In practice, this means that all online businesses in the EU should ensure that their websites are compliant with WCAG 2.2 (once implemented into law) – from small to large, excluding only the smallest microenterprises.

What's new in WCAG 2.2

WCAG 2.2 was published in December 2022 as a supplement to version 2.1. It introduces 9 new success criteria (at levels A and AA) and withdraws one outdated one (criterion 4.1.1 "Code correctness"). The new requirements respond to modern technological challenges and increase support primarily for people with cognitive and motor difficulties. The most important changes include:

  • Clearer keyboard focus (2.4.13 "Focus Appearance") – increases the visibility and size of the focus indicator on interface elements. This provides better orientation for users navigating with a keyboard.
  • Larger buttons and target areas (2.5.8 "Target Size (Minimum)") – the minimum size of interactive elements (e.g. buttons, links) is at least 24x24 pixels. This makes it easier to use pages for people with limited precision of movements (especially on touch devices).
  • Alternatives to "Drag and Drop" gestures (2.5.7 "Dragging Movements") – where an element requires dragging, alternative methods should be provided. This is support for people who have difficulty performing precise gestures.
  • Consistent help and authentication (3.2.6 "Consistent Help" and 3.3.8 "Accessible Authentication") – make it easier to find support (FAQ, contact forms) and offer login methods that do not require remembering difficult passwords (important for people with cognitive disorders).
  • Reduced data repetition (3.3.7 "Redundant Entry") – eliminates the need to repeatedly enter the same information in forms (e.g. automatic copying of the address from field to field), which significantly facilitates use for users with memory problems.

To sum up, WCAG 2.2 extends existing rules with elements that facilitate navigation, readability and use on new devices. It increases the focus on the needs of older people and people with learning disabilities, while maintaining backward compatibility with earlier criteria.

Examples of use in an online store

Implementing WCAG in practice requires reviewing specific elements of an online store. Typical areas requiring attention include:

  • Color contrast: Text and important graphic elements must have adequate contrast with the background. WCAG requires a ratio of at least 4.5:1 (AA) for text content. In a store, it is therefore worth checking the colors of buttons, headings, and product description texts (e.g. using online tools) to ensure they are legible for visually impaired people.
  • Size and layout of buttons/links: Interactive elements should be sufficiently large (min. 24x24 px) and easy to click. You should also ensure that there are spaces between elements to make it easy to find the right one. In practice, this may mean matching the CSS styles in your store template – especially mobile navigation and action buttons (“Add to cart”, “Buy now”) must be large enough and well-spaced.
  • Forms: Each form field (e.g. shipping details, login) should have a visible description (e.g. <label> element). It is also important to clearly communicate errors (e.g. missing fields) so that the user knows what to fix. You need to avoid “keyboard traps” – each step should be possible without blocking keyboard navigation.
  • Keyboard focus: All interactive elements (links, buttons, form fields) must be accessible using the keyboard, and their active state must be clearly marked visually. This means maintaining a clear frame/focus when navigating the page using the Tab key. This allows people who don't use a mouse to see where they are in the interface.
  • Alternative texts (alt): All images used on the page (e.g. product photos, icons) should have meaningful alt text. Blind people need the screen to read the content of the graphic - without a good "alt", the image is invisible to them. Adding image descriptions is a simple configuration step on most e-commerce platforms.
  • Content readability and structure: Headings should be arranged hierarchically (H1, H2, H3...) to make it easier to navigate the content. The text should be readable (appropriate letter size - min. 16 px, line spacing) and clear language. Text links should be highlighted, for example, by underlining (not relying only on color).

All of these examples usually require corrections in the page template - CSS changes (colors, element size), adding ARIA/HTML attributes to components, or corrections in form templates. Some actions (such as alt text description or simple contrast increase) can be performed independently with minimal technical knowledge, others (e.g. deeper changes to the page code or complex interfaces) may require the help of a specialist.

Preparing a Shopify store for WCAG 2.2

For many stores based on Shopify, the simplest mode is to configure accessibility yourself, using the platform's built-in tools and tips. Shopify has dedicated materials on the accessibility of templates and stores. For example:

  • Contrast and fonts: Shopify recommends that your store text be legible and contrasting. You can check your color settings and compare the contrast ratio in your store admin panel (there are utility plugins). The minimum font size for the body of the text should be around 16 px, and the background and text color should have at least 4.5:1 contrast.
  • Alt text: It's easy to add alt descriptions to product photos and other images from your Shopify dashboard. It's worth doing this systematically - it helps both accessibility and SEO.
  • Keyboard focus: When editing a template, don't remove the default focus styles. If you are introducing your own CSS styles, you need to provide a clear border or highlighting for elements in focus (links, buttons).
  • Content structure: In store content (descriptions, blog articles), headers should be used in order and levels should not be skipped. Text links should be highlighted (e.g. underlined) so that people with vision problems can easily identify them.

Additionally, the platform offers applications and tools for accessibility testing (e.g. automatic audits, widgets that improve contrast or a text reader). Many changes - especially stylistic ones - can be made independently without programming. However, more advanced tasks (e.g. extensive modifications to the theme code, implementation of ARIA or specialist scripts for accessibility) should be entrusted to accessibility experts. A professional WCAG auditor will help identify imperfections, and the developer can make corrections without violating the store's logic. Investing in such an audit often proves justified, as the lack of accessibility may result not only in image problems, but also in legal sanctions.

Summary – benefits of accessibility

Digital accessibility is not only a matter of legal compliance. From a business perspective, improving accessibility brings tangible benefits. Firstly – it broadens the reach of the store. A website accessible to all Internet users, including people with disabilities, means a larger potential group of customers. A good user experience builds a positive image of the company and loyalty of buyers. Secondly – ​​accessible websites usually benefit from SEO. Internet search engines prefer user-friendly websites (e.g. they index content with well-described images or headings faster). The UX effect is also beneficial for all users - even people without disabilities appreciate the clear layout, clear buttons and legible graphics.

Generally: investing in accessibility means better experiences (UX) and a wider business reach. By providing equal opportunities to use the store to all customers, the company builds a reputation as a responsible and innovative entrepreneur. At the same time, meeting EU requirements (EAA) minimizes the risk of financial penalties. Therefore, compliance with WCAG 2.2 should be treated as both an obligation and an opportunity to strengthen the store's position on the web - improving accessibility is a benefit for customers, brand and SEO results

Request a free eCommerce scoping session

What's next?
The expert contacts you after analyzing your requirements.
If necessary, we sign NDAs to ensure the highest level of confidentiality.
You receive a comprehensive proposal with an estimate and a schedule.
* Mandatory fields
Thank you for contacting us!
Oops! Qualcosa ha insegnato il modulo.

Other posts

all blog posts