EAA 2025: Checkout Compliance (hidden)

What is the EAA 2025?

The European Accessibility Act (EAA) is an EU directive aimed at improving the accessibility of products and services. It ensures that people with disabilities can access digital content and services on an equal basis. The EAA references WCAG 2.1 Level AA as the standard for digital accessibility.

Deadline for Compliance

To help meet these requirements, SCAYLE provides a default checkout that aligns with WCAG 2.1 Level AA standards.

However, if any of the additional customizations are applied to the checkout, please review your implementation to ensure your shop is fully compliant by the deadline.

• Styling of checkout frontend colors and fonts
• Custom code
• Third-party extensions added to the checkout as slots

Guidelines for Tenants Using SCAYLE Checkout

To ensure compliance with the European Accessibility Act:

• Review Customizations: Additional configurations added to your checkout should be carefully tested, as they may affect compliance.
• Run Accessibility Tests: Perform accessibility validation. Test recommendations are outlined in this documentation.
• Report Issues: If any compliance-related issues are identified, please report them to your SCAYLE Account Manager.

• Pre-launch Responsibility: For new and upcoming tenants, before going live, you shall review your implementation together with your SCAYLE Account Manager and ensure it meets accessibility requirements in accordance with the EAA.

Accessibility Capabilities in the Default Checkout

The default checkout includes several built-in features designed to ensure accessibility for a wide range of users, including those relying on assistive technologies.

Time-based Notifications

All notification types shown in the checkout—warning, information, success, and error—include a visual indicator of their display duration and a button to pause the countdown.

• The notification automatically closes when the progress bar completes, unless the user has paused it.
• When the user clicks the pause button or presses the space bar while the notification is active, the pause control is replaced with a close button.

• When multiple notifications are displayed, pressing the space bar will pause all of them simultaneously.

Keyboard Navigation

• All interactive elements are reachable and operable via keyboard alone.
• Keyboard users can easily identify focused elements through visible indicators.

The images below illustrate the difference in visual focus indicators between mouse navigation and keyboard navigation.

Screen Reader Support

• The checkout includes ARIA labels, visible labels, and semantic HTML to ensure screen readers can properly interpret content and controls.
• All functional images in the checkout are provided with descriptive alternative text to convey their purpose to users who cannot see them.

Screen Magnifiers

Font sizes adjust correctly when using browser or system-level zoom settings.

Visual Presentation

The default checkout uses font sizes and color contrast ratios that meet WCAG 2.1 Level AA standards, ensuring sufficient contrast between text and background to enhance readability for users with visual impairments.

Compliance Risk and Responsibilities for Tenants

While the default SCAYLE Checkout settings are designed to be EAA compliant, tenants need to be mindful of potential impacts when customizing their checkout experience. Specifically:

Theme Adjustments

When customizing the checkout to match your shop’s theme—especially colors and fonts—you must ensure that the contrast meets at least WCAG 2.1 Level AA requirements.

Customizations and Extensions

Any custom code or third-party extensions added to the Checkout via slots should also comply to EAA accessibility guidelines.

Surrounding HTML Structure

Review the HTML elements surrounding the SCAYLE Checkout web component for potential accessibility issues. Be aware that certain configurations—such as an incorrectly set <viewport> meta tag (e.g., maximum-scale=1)—can impact the entire page by preventing zooming and reducing overall accessibility.

Using Skip Links to Bypass Repetitive Content

If your code has skip links implemented and they are also present in the checkout page, this may try to redirect the user to an element that does not exist. Below is an example of how skip links can appear:

html

Copy

<a href="#page-content-wrapper" id="skip-link">
  <span>Skip to Main Content</span>
</a>

To prevent this, you can either remove the skip link from the checkout page, or adjust it to direct the user to the scayle-checkout element. Here is an example on how to adjust it:

html

Copy

<a href="#page-content-wrapper" id="skip-link">
  <span>Skip to Main Content</span>
</a>

const checkout = document.querySelector('scayle-checkout');
checkout.setAttribute('id', 'my-checkout');


const skipLink = document.getElementById('skip-link');
skipLink.setAttribute('href', '#my-checkout');

If you are unsure whether a skip link is present on the Checkout page, here is one way to check:

• Open the Checkout
• Click into the browser’s address bar
• Press the Tab key

If a skip link appears but does nothing when activated (e.g., it does not move or navigate to the main content), this indicates an accessibility issue that needs to be addressed.

Recommendations for Testing Checkout Compliance

To validate that the checkout meets accessibility standards, we recommend conducting a combination of automated testing and manual checks in all the checkout pages (shipping and payment pages, and the order review page if you have express checkout enabled in the shop).

Below are some of the tools used by SCAYLE to verify accessibility in our default checkout implementation. Please ensure you reviewed your checkout customizations prior to the tests.

We encourage you to explore additional tools that may be more suited to your specific shop's needs and verify compliance using various resources available.