How Hyvä helps eCommerce stores comply with WCAG standards
About our Guest: Kuba Zwoliński
What are the requirements of the EAA and who does it apply to?
The European Accessibility Act (EAA) is a legislative initiative of the European Union to improve the accessibility of products and services for people with disabilities. The Act sets out specific accessibility requirements that products and services must meet to ensure that they can be used by people with disabilities. These standards cover aspects such as perceivability, operability, and understandability, and apply to products and services identified as most relevant, including e-commerce. Similar regulations already exist in other countries, including the USA (American with Disabilities Act, ADA), the UK (Equality Act 2010) or Switzerland (Federal Law on the Elimination of Inequalities for Persons with Disabilities). All base their guidelines related to digital content on WCAG.
What are the WCAG principles and how to achieve an AA rating?
WCAG stands for Web Content Accessibility Guidelines. It is a set of guidelines developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). The purpose of WCAG is to make Web content more accessible to people with disabilities, including those with visual, hearing, cognitive, and motor impairments. The guidelines provide a framework for creating Web sites and Web applications that are perceivable, usable, understandable, and robust.
Perceivable - Information and user interface components must be presented to users in a way that they can perceive.
This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses).
Operable - User interface components and navigation must be operable.
This means that users must be able to operate the interface (the interface cannot require an interaction that a user cannot perform).
Understandable - The information and operation of the interface must be understandable.
This means that users must be able to understand both the information and the operation of the interface (the content or operation cannot be beyond their understanding).
Robust - Content must be robust enough to be reliably interpreted by a variety of user agents, including assistive technologies.
This means that users must be able to access the content as technologies evolve (as technologies and user agents evolve, the content should remain accessible).
The WCAG guidelines are further divided into three levels of conformance:
Level A (minimum): The most basic level of Web accessibility.
Level AA (Standard): This is the recommended level for most Web sites and provides a higher level of accessibility.
Level AAA (Enhanced): The highest level of accessibility, typically not achievable for all content.
To achieve WCAG AA conformance, you must address and implement guidelines at both the A and AA levels. The latest released version is WCAG 2.2.
How can Hyvä help?
In the rapidly evolving world of eCommerce, accessibility is not just a nice to have - it's a necessity. The digital marketplace is diverse, with customers of all demographics and abilities. Ensuring that your online store is accessible to everyone isn't just a matter of social responsibility - it's also a smart business move.
For our Snowdog team, Hyvä offers many benefits from a front-end perspective. It provides an excellent developer experience, boasts a fast and modern frontend tech stack including Tailwind CSS and Alpine.js, and eliminates outdated technologies. However, we wanted to make sure that it was accessible and that merchants and agencies didn't have to worry about it. That's why Snowdog joined Hyvä to create a fully inclusive theme that is accessible to everyone.
Making the Hyvä theme accessible
To make the Hyvä theme accessible, the development team focused on several key areas:
Frontend code accessibility: The team aimed to make all elements, features, and actions within the theme understandable to assistive technologies (AT) and systems. By adhering to the four accessibility principles - perceivable, operable, understandable, and robust - as outlined in the Web Content Accessibility Guidelines (WCAG), they ensured a solid foundation for accessibility.
Alternative text and descriptions: To improve perception and comprehension, the team provided alternative text for all meaningful interactive elements without visual labels. This allowed users who rely on assistive technologies to understand and interact with the content effectively.
Design Considerations: The team considered design aspects such as color contrast, font size, and spacing to ensure legibility and readability across devices. By improving these elements, Hyvä aimed to create a visually inclusive experience for all users.
Keyboard and assistive technology support: One of the key challenges was to ensure that all features and interactions in the Hyvä theme could be used with a keyboard and were compatible with assistive technologies. This involved improving code semantics, focus management, and providing clear instructions for AT users in complex components.
What are the benefits of making your Adobe Commerce or Magento store accessible today?
Snowdog's decision to prioritize accessibility in the Hyvä theme was driven by several factors:
Inclusiveness: By making the theme accessible, Snowdog wanted to provide an inclusive experience for all users, regardless of their abilities or limitations.
Broadening the customer base: An accessible theme opens up opportunities to attract customers with disabilities and older customers who may have specific accessibility needs.
User-friendly experience: Accessibility improvements not only benefit users with disabilities, but also improve the overall user experience for everyone.
Better SEO: Implementing accessibility best practices, such as proper semantic markup and descriptive alt text, can improve search engine optimization (SEO) efforts.
Regulatory compliance: We wanted to mitigate risk and simplify compliance with upcoming regulatory requirements such as the Americans with Disabilities Act (ADA) and the European Accessibility Act (EAA).
What methodology did Snowdog use to make Hyvä Theme compliant out of the box?
The first step in making Hyvä accessible was a thorough accessibility audit. Our team selected a representative sample of the Hyvä store, including the home page, global accessibility issues (reusable elements/components), category, various product pages, customer dashboard, shopping cart, checkout process, and more to the success page.
We ran a series of tests. Automatic tests using tools like Axe Accessibility Testing Tools by Deque, used by companies like Microsoft or Google, but also our own proprietary tools, help us identify common accessibility issues, and manual tests conducted with keyboard navigation and screen readers to ensure a user-friendly experience for keyboard and AT users. We then documented the results in a public spreadsheet to streamline the work and allow the Hyvä team to review them.
The audit identified a staggering 159 accessibility violations within Hyvä, categorized under various aspects of the topic. Some notable areas of improvement included navigation, search, shopping cart, login/registration, product pages, and dashboard, where we improved keyboard support and visibility for assistive technology (AT) users. We also made product swatches and options accessible, and improved semantic structure, headings, and action labels.
What else can merchants do to ensure a great review?
Using an accessible template does not guarantee that the entire site is accessible and WCAG compliant. Remember that the site's structure is just the beginning, and the content, such as text, images, videos, and language, must also be accessible. Throughout the customization process, it is important to check that accessibility is not being compromised and to correct any problems as they arise. 10 Simple Tips for Your Ecommerce Website is a good place to start, and it is always a good idea to test with and get feedback from users with disabilities. Accessibility is not a one-time audit with a checklist of code fixes, but an ongoing process.
The result
As a result of our efforts, Hyvä has become much more accessible. It now offers basic keyboard and screen reader support, uses semantic and unambiguous code, and follows accessibility best practices. This means that a wider range of users, including those with disabilities, can comfortably navigate and interact with Hyvä-powered stores.
While the basic accessibility work is complete, there is still much room for improvement to make Hyvä even more user-friendly and compatible with various ATs. Additional improvements are marked for future development because, as we mentioned before, accessibility is an ongoing process.
