Skip to main content
Version: 1.0.0

Accessibility

Online stores are available to all users of the world wide web, including users with temporary or permanent limitations using assistive technologies (AT) to access web content.

The YSCP implements accessibility (a11y) features according to WCAG (Web Content Accessibility Guideline) 2.1 level AA requirements.

Supported accessibility features:​

  • Keyboard support
  • Support for Assistive Technologies
  • Colors, spacing, and fonts
  • Responsiveness – the page adjusts for different devices and various screen widths
  • Alternative content

How to work with accessibility in YSCP?​

Care needs to be taken not to degrade accessibility while customizing YSCP. This is true both for installed plugins and theme-related changes.

To ensure your store is accessible for all users, a11y features should be implemented and maintained in your theme customization.

Here's a list of tips you may find useful:

Use semantic HTML​

Don't use only div and span to build the front end. Instead, use HTML landmarks and headings in proper order. Use buttons and links instead of divs or spans with an onclick event. Use lists, paragraphs, and tables. Such semantic tags indicate the role and function of an element without additional code.

Buttons and links without visible text (with image or icon content) require a label​

Use the aria-label or the aria-labelledby attribute or visually hidden text (via the sr-only class) to supply textual labels. Remember to translate it.

Focus management​

All elements that can receive focus should have a visible outline to indicate their focus state. Focus order should be logical and consistent. For modals, remember to move focus inside a modal after it opens and move back to trigger when it closes.

Aria-expanded for collapsible elements​

When content in a collapsible component is displayed, use the aria-expanded attribute on the trigger element to indicate if the element is collapsed or expanded.

Live region​

When you update a section dynamically on the client side (without page reload), use the aria-live attribute on the container to indicate changes and announce them to AT users. One example of this is the price of bundled products.

How to test the accessibility of your Store?​

Base accessibility testing during development:​

  • Check your store using automatic tests in your browser using axe devtools browser plugin.
  • Shop on the site only using your keyboard - check if new or customized features can be used without a mouse or trackpad.
  • Review your code in DevTools - check what the accessibility tree looks like and what properties are generated.

More advanced tests:​

  • Test with a screen reader - VoiceOver for Mac, NVDA for Windows, or ChromeVox as a browser plugin
  • Use ANDI Accessibility Testing tools to check accessibility features in your browser manually

Does a store built with YSCP comply with WCAG 2.1 level AA? Is it fully accessible?​

Not exactly. The YSCP theme provides an accessible frontend template, but that is only part of what makes up a store. To make an eCommerce store fully accessible, you need to ensure that all content is accessible too (simple language, alternative text for images, audio transcription, and video captions). All template customizations, both regarding design and functionality, should be tested for accessibility, too.