Hyvä Themes: A Gateway to Enhanced Accessibility in eCommerce

September 06, 2023

Hyvä Theme Aligning Your Business with WCAG Level Compliance

Web accessibility is no longer a mere afterthought in the world of e-commerce. Today’s digital marketplace is home to diverse user bases, including those with permanent or temporary limitations who rely on assistive technologies for web content accessibility. Hyvä Themes demonstrates a forward-thinking approach by embedding accessibility (a11y) features in its latest releases (1.3.0 and forward), thereby aligning them with the Web Content Accessibility Guideline (WCAG) 2.1 level AA requirements.

The Hyvä Theme underscores the importance of digital inclusivity, making it a staple for businesses seeking an easy route to web accessibility.

Holistic Website Accessibility With Hyvä

Hyvä Themes cater to an assortment of accessibility requirements. These features make the web more user-friendly and facilitate seamless online shopping experiences.

Accessibility Features Guaranteeing a User-friendly Experience

  1. Keyboard Support: Providing easy navigation for users who require keyboard-only functionality.

  2. Support for Assistive Technologies: Ensuring compatibility with specialized software and hardware.

  3. Colors, Spacing, and Fonts: A user-friendly design that ensures content visibility and readability.

  4. Responsiveness: Adapting to different device types and screen widths for a consistent viewing experience.

  5. Alternative Content: Offering text alternatives for visual and audio content ensures everyone can access crucial information.

Your Gateway To Understanding Accessibility

The journey towards building an accessible e-commerce platform commences with understanding the topic. Hyvä offers a series of blog posts that provide an in-depth introduction to accessibility and its importance in the e-commerce business case. These posts offer insights and easy-to-implement tips for building an accessible e-commerce website.

Prioritizing Accessibility in Hyvä Customization

While Hyvä Themes offer out-of-the-box accessibility features, it is essential to maintain these elements during customization. Whether you’re integrating extensions or modifying theme-related elements, you’ll want to ensure the store remains accessible to all users.

Mastering Hyvä Customization for Accessibility

  1. Use of Semantic HTML: Instead of using only ‘div’ and ‘span’, leverage HTML landmarks and headings in the correct order. This includes using buttons and links instead of ‘divs’ or ‘spans’ with an onclick event, and lists, paragraphs, and tables for better semantics.

  2. Supply Labels for Buttons and Links: When buttons or links have no visible text, use the ‘aria-label’ or ‘aria-labelledby’ attribute or visually hidden text to provide textual labels.

Improving Focus Management

  1. Visible Outline for Focused Elements: Any element that can receive focus should have a visible outline to indicate its focus state.

  2. Logical and Consistent Focus Order: The order in which elements are focused should be both consistent and logical.

  3. Focus Management for Modals: The focus should move inside a modal after it opens and move back to the trigger when it closes.

Hyvä has embedded the JavaScript methods hyva.trapFocus and hyva.releaseFocus for this purpose since release 1.2.6.

Aria-Expanded for Collapsible Elements

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

Using Live Region

When a section of your website is dynamically updated on the client side (without a page reload), the ‘aria-live’ attribute can be used on the container to signal the changes and announce them to AT users.

The Hyvä Testing Network

When it comes to auditing your store’s accessibility, Hyvä suggests a variety of tests and tools.

Base Accessibility Testing

  1. Using automatic browser tests with axe devtools browser plugin.

  2. Browsing the site solely using your keyboard – this simulates the user experiences of those without mouse or trackpad functions.

  3. Performing code reviews in DevTools to inspect the accessibility tree and generated properties.

Advanced Tests

  1. Testing with a screen reader – the most common options include VoiceOver for Mac, NVDA for Windows, or ChromeVox as a browser plugin.

  2. Utilizing ANDI Accessibility Testing tools to check accessibility features in your browser manually.

A Fully Accessible Hyvä Store

While Hyvä Themes offer an accessible frontend template, it’s important to remember that web accessibility extends beyond the template alone. An eCommerce store’s accessibility is made up of multiple elements – from the language used in text content to alternative text for images, as well as audio transcriptions, and video captions.

All these components, along with template customizations for design and functionality, need to be continually tested for accessibility. In achieving this, a Hyvä storefront doesn’t just show up on an accessible web, it leads the way, setting the standard in the quest for a more accessible digital world.