Today, almost everyone is shopping online. But are all your shoppers the same? Might be not! Some might be able to browse through your site quickly; while some might not. Since every shopper is different, so are their needs. One such need that online stores must cater to is implementing web accessibility standards. Why? Your store might receive a diverse audience flow, including those with some sort of limitations. Failing to implement web accessibility standards, stores stand the risk of facing legal to ethical implications. So, as a Magento store owner, if you want to avoid such implications, ensure web accessibility standards are in place. In this blog post, let’s walk you through eCommerce web accessibility and how it can help your business.
After months of dedicated effort, Hyvä team have released Hyvä Themes 1.3.0. This latest release is going to assist merchants in achieving better compliance with Accessibility standards and requirements.
Web Accessibility
What is web accessibility? Well, web accessibility ensures that websites and online content are crafted in a way that everyone, regardless of their capabilities, can access them. It’s a crucial step towards building a digital space where everyone feels included and can engage fully.
The World Health Organization (WHO) states that about 1 in 6 people globally, totaling 1.3 billion individuals, live with some form of disability.
Types of Disabilities
People with visual challenges might find it hard to browse items or understand product details on websites that lack clear contrast or don’t offer image descriptions. This can hinder tasks like registering, logging in, checking out, or even selecting product variations.
Those with hearing challenges might miss out on the essence of videos or audio clips if there aren’t any captions or written transcripts available. For individuals with mobility issues, a website that isn’t keyboard-friendly can be a maze, making navigation a daunting task.
Moreover, people with cognitive challenges might get overwhelmed by intricate designs, perplexing product details, or a convoluted site structure. By crafting user-friendly eCommerce platforms, businesses can ensure that their offerings are accessible to everyone. (Source: Hyvä)
How Common Are These Disabilities?
To understand how many people suffer from disabilities and their type, let’s look at the table.
| Disabilities | People Suffering in Million |
| Difficulty walking/climbing stairs | 30.6 million |
| Require assistance from others with everyday tasks | 12.0 million |
| Vision difficulty | 8.1million (Partial or Total) |
| Hearing difficulty | 7.6 million |
| Using a wheelchair | 3.6 million |
| Alzheimer’s, senility, or dementia | 2.4 million |
(Source: Hyvä)
As we age, the likelihood of experiencing disabilities such as vision, hearing, or mobility issues increases. These challenges can make it difficult to use computers or phones in the manner we’re accustomed to.
Hence, online stores should make their stores accessible to all. Simply by prioritizing eCommerce web accessibility features during the early stages of design.
Why is eCommerce Web Accessibility So Vital?
Before diving into the specifics of Hyvä 1.3.0’s eCommerce accessibility update , it’s crucial to understand why eCommerce web accessibility is so vital.
Imagine a world where a significant portion of online users, including those with disabilities, find it challenging to navigate your website.
Not only do these present ethical concerns, but businesses also miss out on a vast potential audience. This is where Hyvä Themes 1.3.0 with Accessibility updates steps in. This update ensures that websites are not only user-friendly but also inclusive and compliant with the WCAG 2.1 level AA requirements.
Hyvä’s Commitment to Accessibility
Hyvä, a leading name in Magento themes, has always been at the forefront of innovation. They have always ensured that websites aren’t just beautiful to look at but also user-friendly for everyone.
Hence, their recent focus on enhancing the eCommerce accessibility feature is a testament to their commitment to creating a more inclusive digital space. And Wagento, as a proud partner of Hyvä, believes that this release sets a new benchmark for the online merchants looking to incorporate inclusiveness.
Magento merchants cater to a vast and diverse audience. This includes users with permanent or temporary limitations who lean on assistive technologies (AT) to access web content.
Hence, by recognizing the importance of implementing eCommerce web accessibility features for eCommerce stores, Hyvä Themes has taken a monumental step with its 1.3.0 release. The latest Hyvä Themes 1.3.0 release incorporates top-tier accessibility features. Thus, ensuring compliance with the Web Content Accessibility Guideline requirements.
Hyvä Theme 1.3.0: What This WCAG Compliance Is About?
The recent release, version 1.3.0, of the Hyvä Default Theme and the Hyvä Theme Module stands out with its myriad of enhancements. These improvements are specifically targeted at achieving commendable WCAG level compliance.
What does that mean? Well, WCAG stands for Web Content Accessibility Guidelines. Basically, it’s a set of rules that ensure websites are easy to use for everyone, including people with disabilities.
Now, with Hyvä Themes 1.3.0, meeting these WCAG guidelines, accessing websites would be easy for people with any disabilities.
Key eCommerce Accessibility Features
The Hyvä Theme release 1.3.0 and higher is going to come with the following supported accessibility features. They are:
- Seamless keyboard navigation
- Full compatibility with Assistive Technologies
- Thoughtfully chosen colors, spacings, and font styles
- Adaptive design that fits various devices and screen sizes
- Provision of alternative content for diverse user needs
Changelog: Hyvä 1.3.0 Update
As businesses strive to cater to a global audience, ensuring that their online platforms are inclusive and accessible to all is paramount. Enter Hyvä Themes 1.3.0 – a game-changer in the realm of eCommerce web accessibility.
Hyvä Default Theme
Hyvä Themes, a leader in this space, has recently rolled out a series of eCommerce web accessibility enhancements in its 1.3.0 release that significantly boost web accessibility, particularly for users relying on Assistive Technology (AT) and Screen Readers (SR).
Release Date
31.08.2023
What’s Changed?
The following things have changed. They are:
- Introduced a ‘skip navigation’ link that becomes visible upon focus.
- Enhanced top-menu sub-menus to support both hover and keyboard navigation.
- Optimized mobile menu for AT users.
- Improved header search input focus across all browsers.
- Enhanced header search toggle button label and role.
- Restored focus after closing the search form using the ESC key.
- Introduced button elements with proper area attributes for the customer menu toggle.
- Enabled the ESC key to close the customer menu.
- Fixed the shopping cart link to be focusable but disabled when the cart is empty.
- Corrected the logo label to provide clarity on its destination.
- Addressed the incorrect order of headers in the footer.
- Improved the description of the link to Twitter in the default footer.
- Enhanced the color contrast of success and warning messages for better visibility.
- Enabled flash messages to be announced for AT when displayed.
- Optimized slider navigation to prevent users from navigating through all items before proceeding.
- Added alt text to mini cart product images for better understanding.
- Added missing labels for mini cart action buttons and hid images from SR.
- Improved focus management for keyboard navigation when the mini cart is open.
- Hidden default homepage hero image from SR for a cleaner experience.
- Enhanced product rating summary labels with product names.
- Made product rating summaries focusable.
- Announced product rating dates as dates for AT on the rating listing page.
- Optimized product rating form radio buttons for accessibility.
- Removed duplicate labels from various elements to avoid redundancy.
- Enhanced product swatches with accessible labels.
- Announced color changes for AT when a swatch is selected.
- Added product names to ‘Add to Cart’ and ‘Add to Wishlist’ button aria labels on the product grid.
- Indicated items already added to the cart or wishlist on the product grid.
- Added a unique landmark to the sidebar and hid it from SR if empty.
- Changed the sidebar ‘Shop By’ title to an h2 heading for better hierarchy.
- Made expanded category and search results page filters accessible for AT.
- Announced active category and search results page filters for AT.
- Announced active grid/list mode on the Product Listing Page (PLP).
- Improved color contrast on list/grid mode selection in the PLP toolbar.
- Added product names to actions on the product comparison table.
- Fixed various issues related to product images, labels, and announcements for AT.
- Improved focus and labeling for various product-related elements.
- Enhanced the structure and labeling of elements on the cart page for better clarity.
- I made various improvements to the customer dashboard for better accessibility.
- Used semantic markup for tables in customer account pages, including order history, downloadable product list, and recent orders.
- Made tooltips accessible and focusable on various pages.
- Improved password-related elements for better accessibility on account-related pages.
What Was Removed?
No features were removed in this update.
Hyvä Themes’ commitment to enhancing eCommerce web accessibility is evident in these updates. By addressing a wide range of issues and introducing numerous improvements, they are ensuring that online shopping is a seamless and inclusive experience for all users.
Hyvä Theme Module
Let’s take a dive into it.
Release Date
31.08.2023
What’s Added?
The new additions are:
- Integrated aria-live and aria-state attributes to the validation library.
- For SVG icons, if missing, a title child node and a role=”img” attribute have been incorporated.
- Introduced a ViewModel to showcase payment titles in order info when available. This is facilitated by the class: \Hyvä \Theme\ViewModel\Sales\PaymentInfo.
- A new ViewModel has been set up to format radio option price adjustments, made possible by the class: \Hyvä \Theme\ViewModel\Product\RadioPriceRenderer.
What’s Modified?
No alterations were made to this accessibility update.
Any Deletions?
No features were taken away in this phase.
Hyvä 1.3.1: Another Changelog Coming Up
Interestingly, Hyvä is planning for another version release, 1.3.1. Let’s look at this upcoming version. This will help us understand how it is going to be different from 1.3.0.
Hyvä 1.3.1 Default Theme
Let’s see what’s in store.
Release Date
It is in the unreleased stage.
New Inclusions
The new additions are:
- Introduced the capability to set specific width and height dimensions for primary category images.
- Should there be configurations for category_page_category_image in etc/view.xml, these attributes will now be displayed on the category’s img tag. This enhancement aims to minimize the CLS (Cumulative Layout Shift) value.
Updates
The following changes have been made.
- Resolved the issue of the mini-cart surpassing the screen height and becoming non-scrollable. This rectifies a problem that emerged in release 1.3.0.
- Addressed the issue of repeated DOM element IDs in sliders, a result of caching.
- Enhanced the design for subcategories belonging to non-anchor categories.
- Adjusted to only activate the review summary JS when reviews are active.
- Modified to omit products that are solely visible during a search from the product sliders.
Any Deletion
Nothing has been deleted yet.
Hyvä 1.3.1: Theme Module
Let’s see what’s in store.
Release Date
It is in the unreleased stage.
New Inclusions
Nothing new has been added to this version 1.3.1.
Updates
- Enhanced the dispatch of messages from cookies during the alpine:initialize process to ensure compatibility with Safari on iOS. This addresses a potential race condition on cached pages that might have previously prevented messages from displaying on Safari for iOS devices.
- Introduced the default product price renderer block when it’s missing. In situations where custom Ajax requests render an individual block without activating the default layout, the price renderer block wasn’t initialized. This used to result in the absence of a displayed price during such requests.
Any Deletion
Nothing has been deleted yet.
Why Magento Merchants Should Prioritize Digital Inclusivity with Hyvä?
Digital inclusivity isn’t just about compliance; it’s about ensuring every potential customer can navigate and purchase from an online store with ease. Hyvä Themes not only understands this but actively promotes it. Thereby, making digital inclusivity an essential tool for Magento merchants aiming for comprehensive eCommerce web accessibility.
The Business Benefits of Having an Accessible Website
First, an accessible website built with eCommerce web accessibility features means more people can use it. Think about it: If everyone, regardless of their abilities, can shop on your site, that’s a whole lot of potential customers! And more customers often mean more sales.
But there’s more. Websites powered by Hyvä Themes eCommerce accessibility are not just user-friendly; they’re also search engine friendly. This means your site can rank higher in search results, bringing even more visitors.
And with Hyvä ‘s latest release, ensuring your website is accessible is easier than ever.
Plus, there’s the reputation boost. When customers see that you care about accessibility, they’re more likely to trust and support your business.
It shows you value all your customers, and in today’s world, that’s a big deal.
In short, an accessible website isn’t just good for users; it’s great for business. With Hyvä ‘s latest release with eCommerce web accessibility features, you have all the tools you need to make your online store shine for everyone.
Embarking on the Accessibility Journey with Hyvä
Understanding accessibility is the first step towards implementing eCommerce accessibility. Hyvä aids this accessibility journey by publishing a series of enlightening blog posts on their website. These posts delve deep into the importance of accessibility in eCommerce. Plus, they also offer actionable insights and tips for Magento merchants to build a fully accessible online store.
Navigating eCommerce Accessibility with Hyvä
Hyvä’s approach to Magento accessibility is holistic, ensuring that every element of the Magento store is optimized for all users. From using semantic HTML for better content structure to implementing live regions for dynamic content updates, Hyvä provides a suite of tools that make accessibility integration seamless.
Starting from version 1.3.0, Hyvä introduced dedicated eCommerce accessibility features. When tailoring Hyvä to your needs, it’s crucial to maintain these accessibility standards. This applies to both the extensions you plan to add and any modifications to the theme.
For an inclusive shopping experience, always integrate and uphold accessibility features in your theme adjustments. Here are some tricks to achieve that.
Semantic HTML Usage
Move beyond just ‘div’ and ‘span’. Use HTML landmarks, headings, buttons, links, lists, paragraphs, and tables in the right order for enhanced semantics.
Labeling Buttons and Links
For buttons or links without visible text, employ the ‘aria-label’ or ‘aria-labelledby’ attributes or use visually hidden text for clear labeling.
Focus Management Enhancements
Ensure every focusable element has a visible outline. Maintain a logical focus order, especially for modals. Hyvä’s JavaScript methods, Hyvä .trapFocus and Hyvä .releaseFocus, are instrumental in this.
Hyvä Themes 1.3.0 brings a plethora of out-of-the-box eCommerce web accessibility features. However, as you customize your Magento store, integrating extensions or tweaking theme elements, it’s vital to retain these accessibility features.
Beyond the Template: A Holistic Approach to Accessibility
While Hyvä Themes 1.3.0 offers an impeccable frontend template, remember that true eCommerce web accessibility goes beyond just the template. Every aspect of an eCommerce store, from content to customizations, must adhere to accessibility standards.
Right from the language in text content and alternative text for images to audio transcriptions and video captions, every element should meet accessibility standards. Regularly test these components, especially after design or functionality customizations.
Testing Your Store’s Accessibility
Hyvä doesn’t stop at providing features; it guides Magento merchants in auditing their store’s accessibility. In fact, Hyvä emphasizes the importance of continuous testing.
Foundational Web Accessibility Testing
- Utilize tools like the axe devtools browser plugin for automated web accessibility checks.
- Navigate and shop on your site solely with your keyboard. This helps ensure that all features, especially the new or modified ones, are accessible without the need for a mouse or trackpad.
- Dive into DevTools to inspect your code. Examine the accessibility tree and the properties it generates to ensure web accessibility standards are met.
Advanced Web Accessibility Assessments
- Engage with screen readers such as VoiceOver (for Mac), NVDA (for Windows), or the ChromeVox browser plugin to understand the user experience.
- Employ the ANDI Accessibility Testing tools for a hands-on manual review of web accessibility features within your browser.
Is My Store Built with Hyvä Themes Aligned with WCAG 2.1 Level AA Standards?
Many merchants out there reading this post might have this question in mind. Well, Hyvä Themes offers a foundation that’s designed with accessibility in mind.
But it’s essential to understand that this is just the starting point. An accessible eCommerce platform goes beyond just the frontend template. For a store to be genuinely accessible and compliant with WCAG 2.1 Level AA standards, every aspect of its content must be accessible.
This includes using straightforward language, providing alternative text descriptions for images, offering transcriptions for audio content, and including captions for videos.
Moreover, any modifications or customizations made to the template, whether they pertain to design or functionality, should undergo rigorous accessibility testing. Only then can a store claim to offer a fully inclusive shopping experience for all its users.
Next, you might wonder how you can ensure your store meets eCommerce web accessibility standards. We’ll guide you on that also.
Tips for Ensuring eCommerce Accessibility
Making your online store friendly for everyone is essential. Here are some simple tips to make your Magento store more accessible. Plus, you can follow them to make your store adhere to eCommerce web accessibility standards.
Let’s dive into the tips.
Website Accessibility Checker
Website accessibility is crucial for reaching all potential customers. Tools like WAVE, Axe Dev Tools, etc., are designed to scan your website and check if it meets accessibility standards.
These tools highlight areas that need improvement, ensuring that everyone, including those with disabilities, can navigate and understand your site. Regularly checking your site with these tools ensures that all users have a seamless experience.
Clear and Understandable Language
When creating content, simplicity is key. Avoid using complex words or technical jargon that might confuse readers. Instead, aim for clarity and directness. This ensures that even individuals who aren’t experts in your field or those with learning disabilities can grasp your content easily.
Use Headings and Subheadings
Headings and subheadings structure your content, making it easier to read and understand. They act as signposts, guiding readers through the information. This is especially helpful for screen readers, which use these headings to help users navigate.
Add Alt Text to Images
Images enhance user experience, but what if someone can’t see them? Alt text is a brief description of the image, assisting visually impaired users. It’s essential to be descriptive and accurate, ensuring that the content is accessible to all.
High-Contrast Colors
Color choices play a significant role in readability. Ensure there’s a high contrast between text and its background. This is vital for users with visual impairments, ensuring they can read your content without strain.
Captions and Transcripts for Video
Videos are engaging, but not everyone can hear them. Captions are on-screen text versions of the audio, while transcripts are separate written records of the audio and video. Both ensure that deaf or hard-of-hearing users can access the content.
Don’t Justify the Text
While justified text might look neat, it can create irregular spaces between words, making reading challenging. Left-aligned text provides a consistent reading flow, especially beneficial for those with reading disabilities.
Be Careful with Emojis
Emojis add flair, but screen readers vocalize them. For instance, a smiley face might be read out as “smiling face emoji.” Use emojis sparingly and ensure they enhance, not hinder, understanding.
Provide Accessible Forms and Checkout Process
Online forms, especially during checkout, should be straightforward. Use clear labels for fields, provide concise error messages, and ensure the entire process is keyboard-navigable. This ensures everyone, including those with mobility issues, can use your site.
Use Semantic HTML
Semantic HTML tags provide information about the structure and meaning of content. For instance, using <header>, <nav>, or <article> helps screen readers understand the content’s layout, ensuring a better experience for users with visual impairments.
For businesses looking to future-proof their online presence and ensure they cater to all users, implementing the latest Hyvä Themes and the aforementioned tips is the way forward.
Conclusion
Hyvä ’s latest theme release; it’s a reflection of Hyvä ‘s unwavering commitment to fostering an inclusive web environment. As the digital realm continues to expand and evolve, it’s very reassuring to witness industry leaders like Hyvä championing the cause of web accessibility by focusing on Magento accessibility.
Now, it’s your turn. If you’re building or revamping a website, you must think about eCommerce accessibility. Think about the wide range of people who might visit your site. And if you want a theme that’s not just stylish but also inclusive, consider Hyvä Themes 1.3.0 that focuses on eCommerce web accessibility features.
Our Thoughts
In the ever-evolving digital landscape, ensuring that your Magento store is accessible to all users is not just a legal necessity but a moral imperative.
As a proud partner of Hyvä, we’re excited about the latest advancements in web accessibility brought up by the Hyvä team. Hopefully, this eCommerce web accessibility update can significantly help merchants in making their stores compliant with the Accessibility standards.
So, if you want to add Hyvä Themes 1.3.0 to your eCommerce store and ensure it meets the eCommerce web accessibility standards, we are just a call away. Our team will reach out to you and help you to make your store not only beautiful but also accessibility compliant.
