Sir Tim Berners-Lee once said that “Access (to the Web) by everyone regardless of disability is an essential aspect”. We, as developers, always strive to create a website which looks and feels good on a wide range of devices, resolutions, operating systems, network speeds, etc., but how often do we consider designing or creating a website for a wide range of people? In this article, we’re going to cover some basic frontend principles of improving accessibility and what that means in context of a Magento website.
Testing Accessibility
Understanding how people with disabilities browse the web is an important part of testing the accessibility of the site and, ultimately, improving it. For example, people with physical disabilities may only use the keyboard when browsing the website. Another example would be people with low vision who use browser accessibility options and narration software to improve readability of the website. We can also use various OS-default accessibility tools, browser accessibility options and basic keyboard navigation with TAB button to assess the website’s accessibility on a basic level.
I would personally recommend two very basic and simple ways of testing the accessibility your Magento store. Try to do the following in your store by navigating the store using your keyboard and, after that, navigating the store using your keyboard and OS-default narration software while having your eyes closed:
- Log into your store account. Navigate through the Homepage and select a category from navigation (or Sitemap, if navigation is not accessible).
- Navigate through the category page (select at least 2 filters from the layered navigation, if possible), sort the results by Price from low to high (if possible) and change the view from grid to list or vice versa (if possible).
- On a product page, configure the product (if configurable) and change the quantity, add the product to cart. Try to find more info on the product and cycle through the images before adding a product to a cart.
- Add several products to your cart
- On a cart page, remove one of the products on a cart page, change quantity of another product, apply a promo code and calculate shipping (if available).
- Proceed to checkout, enter your test data and try to successfully check out.
- Check your order status in your Account page and try to change your account settings (newsletter subscription, addresses, password, etc.).
- Test any features and pages which are unique for your store if you are using a custom theme or any of the extensions which affect the frontend.
W3C specifies three level accessibility checklist for developers. Priority 1 covers important basic accessibility requirements, while Priority 2 and Priority 3 cover UX improvements for people with disabilities. You can refer to this checklist while you’re developing a website from the scratch or when you are testing and improving the accessibility of an existing website.
For more information on types of disabilities and how they impact web browsing experience, you can also read W3C’s Web Accessibility Initiative guidelines on disabilities and diversity of Web users.
Skip to content
People with certain disabilities primarily use keyboard to navigate a website and providing them with “Skip to content” link makes accessing your main content easier for them. This way, user can access the main content quickly and skip the navigation links which are, usually, located between the link and the main content. In the context of navigation on Magento websites, this also means that the user can easily navigate the products on a category page without having to skip numerous links in the left sidebar (layered navigation and filters) to reach the product list.
Adding “Skip to content” link
Adding and testing a “Skip to content” link that turns visible only for people who navigate the site using a keyboard consists of the following steps:
1. Add a following link somewhere in your header. The “tabindex = 1” attribute allows this link to be first one selected (in focus) when user presses TAB key.
<a class="skip-to-content" tabindex="1" href="#content">Skip to content</a>2. Add the id=”content” to the element with which contains main content (class=”col-main“ by default) in your layout files
3. Add the following CSS code
.skip-to-content {
box-sizing: border-box; // remove this if you added border-box globally
position: absolute;
overflow: hidden;
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
}
.skip-to-content:focus {
z-index: 5; // change to z-index that fits your theme
color: #000000; // change to the color which fits your theme
background: #efefef; // change to the color which fits your theme
text-align: center;
width: 100%;
min-height: 2em;
padding: 0.5em 1em;
left: 0;
top: 0;
}4. You can test if the link is added properly by pressing TAB key once. If added correctly, the link should turn visible and by pressing ENTER key, the focus should now be on the main content of your website. And, if the link has been configured correctly, on the next TAB key press, the first link from the main content section should be highlighted.
Testing default Magento 1 and Magento 2 keyboard navigation
Magento 1 RWD theme doesn’t have the “Skip to content” link out of the box, while Magento 2 Luma theme has. Magento 2 Luma theme has the “Skip to content” button implemented in a similar way as shown in this section of the article. Even though Magento 1 RWD theme doesn’t have lot of links in the main navigation that separates users from the main content, we can run into 20 and more links in a category page due to the layered navigation in the sidebar which is also comes before the main content.
Main Navigation
Websites with a complex structure, like Magento websites which have lots of stores, categories and subcategories, require a complex navigation with lots of links, dropdown menus and/or mega menus. For example, if we rely too much on mouse hover interaction with our complex menu we have created for our Magento store, we risk severely limiting the navigation for the users who use keyboard for website navigation. Cheapest and fastest way to address this issue is to have an easily accessible sitemap link (usually in the website’s footer).
Another solution would be to create a navigation that is also keyboard accessible in a similar way how the dropdown menus in desktop applications expand on pressing tab key. If you are using Javascript (or any Javascipt libraries like JQuery), it is recommended to expand your functions which trigger on hover to trigger on focus as well to make the navigation element accessible via keyboard. If you prefer using Bootstrap framework for your project, the framework contains bootstrap-dropdown.js which has the dropdown menu accessibility already implemented.
Testing default Magento 1 and Magento 2 main navigation accessibility
Magento 1 does not support keyboard animation for dropdown menus in the main navigation, but Magento 1’s RWD theme provides a sitemap link in footer. Magento 2 Luma Theme default navigation supports keyboard navigation in dropdown, although it is a bit complicated. User is required to select the whole menu bar with keyboard and then use arrow keys and Enter key to navigate the menu. Focused elements aren’t shown too clearly which can cause confusion while navigating the main categories. Keyboard navigation uses Javascript and injecting inline styles into the HTML markup which can be improved by using class overrides, but that’s the matter of personal preference.
Basic accessibility improvements
Here are some basic accessibility features and improvements to consider while designing and working on your project. Accessibility improvements vary on type of content and you can check out W3C documentation for more detailed info and reference. I have included only the basic improvements which I found to be most common and easy for the developers and designers to keep in mind while working on a project.
Provide text equivalent for non-text content
It is very important to provide a text equivalent for non-text content (images, videos, audio content, iframes, etc.) for users with certain disabilities (poor vision, poor hearing, etc.). For more details on how to improve accessibility for a certain type of content, you can check out the W3C accessibility guidelines.
Use plain language
Using plain language in your text content improves clarity of your content, improves readability of your website and helps users easily understand the content on your website. This is an extensive improvement that affects UX of all users. Using plain language, you can significantly decrease user’s uncertainty about your content (global messages, tooltips, error messages, validation error messages, alert message when navigating away from checkout etc.). From accessibility and inclusivity perspective, it is recommended to also use inclusive language when referring to people with disabilities and/or disabilities. In context of a complex site like Magento store, it is vital for users to understand the shopping process on your site, get all necessary information about the products and generally required information (payment options, shipping options, returns, warranties, etc.). General rules to keep in mind for using plain language:
- Use active voice rather than a passive voice
- Use shorter words and sentences
- Explain all uncommon words and acronyms
- Do not make assumptions about the knowledge level of your users
- Use language that respects disabled people (Inclusive language)
Provide keyboard equivalent for mouse functionality
For example, if you have a complex and multi-leveled mega menu in your Magento store (store menu ribbon – category menu ribbon – mega menu containing subcategories), you probably rely on mouse hover event in your Javascript or “:hover” selector in your CSS (if it’s a pure-CSS implementation). In this case you also need to consider implementing keyboard accessibility and narration software support in order to provide good accessibility for your complex navigation. This also applies for all mouse hover-triggered events on your website (popups, tooltips, etc.).
Avoid keyboard focus trap
It is important to make sure that all crucial intractable content (links, buttons, inputs, controls etc.) are accessible via keyboard navigation and that keyboard focus doesn’t get trapped inside an element. Focus trapping is a worst case scenario for keyboard users due to an impossibility of navigating away from the element without closing a browser or a browser tab and, ultimately, leaving your website.
Provide magnifying support
Users with low vision use magnifying tools and in-browser zoom option. It is important to ensure that the website looks good and it is accessible up to 200% zoom. Try zooming into your website 150% and 200% and see if you can still effectively navigate it and go through the checkout.
Be aware of animation style and duration
While animations do look impressive and we can create a wide variety of different graphical effects using the CSS animations and transitions, we have to keep in mind how excessive use of animation, flickering and blinking can affect accessibility. Animations can be very distracting for some users and some blinking (or flashing) animations can trigger an epileptic seizure. It is recommended to limit the animation duration (personally, I would use 5 seconds as a maximum value), add control to the animations (pause, stop, skip) and provide alternative to animated content for accessibility. When evaluating animations on Magento website, make sure loading animations, popup animations, mini-cart animations, global messages animations, etc. aren’t distracting (too complicated or too flashy) and that their duration is within a reasonable limit.
Keep an eye on contrast
At the time of writing this article, W3C specifies the minimum contrast ratio between the text color and solid color background of 4.5:1 for normal-sized text and 3:1 for larger-sized text, and a 7:1 contrast between text color and image background. For reference, the contrast between black and white color is 21:1 which is also maximum possible contrast. You can use any of the many online tools to calculate the contrast ratio or you can find the formula for calculating the ratio manually in the previously linked W3C specification. Ensuring that your website supports these contrast ratios results in better text readability for people with low vision.
Providing extra content for screen readers
Users with poor sight or other visual disabilities use screen readers for navigation websites and they might require additional context for the content on your website. For example, you might want to give extra context or info about your links or give those users special information when filling out a form. Or if your store relies on symbols (product quality, warning labels, award ribbons, etc.) or abbreviations and visual representation to convey some information that your users find useful or critical when deciding on making a purchase.
It is very much recommended to have a CSS class which would hide extra context from sighted users, but it would still be accessible to screen readers. This way, we can provide extra context or extra information for people with visual disabilities. We avoid using “display: none;” CSS property while hiding the content from sighted users because some screen readers might ignore the content with that CSS property.
.screen-reader-text {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
height: 1px;
width: 1px;
}In the following example, we will provide extra context for screen readers which is not needed for sighted users for whom we provide visual context using CSS.
<table class="data-table table-schedule">
<thead>
<tr class=”row-months”>
<th>Jan<span class=”screen-reader-text”>uary</span></th>
<th>Feb<span class=”screen-reader-text”>ruary</span></th>
<th>Mar<span class=”screen-reader-text”>ch</span></th>
</tr>
</thead>
<!-- ... -->
</table>ARIA in Magento 1 and in Magento 2
Accessible Rich Internet Applications (or ARIA, for short) defines ways to make Web content more accessible to people with disabilities. ARIA is a set of special accessibility attributes which can be added to HTML markup. Magento 2 recommends usage of ARIA in the official documentation and considers it a best practice while developing Magento 2 store. As of date of writing this article, Magento 1 wasn’t updated with ARIA markup, meaning that Magento 1 has poor accessibility from the start and requires additional development for adding ARIA support.
Conclusion
This article covers only the very basic accessibility improvements which is, in itself, an extensive and intricate field. W3C specifications cover accessibility improvements in detail for various types of content for users with various disabilities and I recommend the use of W3C specification if you need more details or for another type of content (video, audio, etc.). As for Magento 1 and Magento 2 default themes, Magento 2 default Luma theme is definitely a step up from the Magento 1 RWD theme in terms of accessibility and recommended best practices which cover accessibility, but there is still room for minor improvements.
Feel free to share your thoughts, ideas and experience while working on projects regarding accessibility and projects with accessibility requirements, and feel free to share some more tips for improving accessibility of eCommerce websites by leaving a comment below this article.
