The ‘accessibility-ready‘ tag on the theme directory at wordpress.org is still quite young, but it’s still a shame to see that in a catalog of thousands of themes, only a handful are considered accessibility ready.
It’s probably not the first feature developers consider adding to their theme – we’re guilty of it ourselves. But when you think about it, it’s probably one of the most important features of all. Consider the purpose of your web site. If your design doesn’t meet certain accessibility standards then it’s never going to fulfil it’s purpose at maximum efficiency. Perhaps worst of all, if your web site is your business (IE an online shop), then you’re potentially losing business. Nobody wants to lose business, right?
Enter Storefront 1.4
↑ Revenir en hautWe’re proud to announce that Storefront 1.4 meets the criteria required to be assigned the accessibility-ready tag on wordpress.org. If you’re using Storefront, hit that update button (remember to test first) then pat yourself on the back, you just made your site that bit more accessible.
So what did we actually do? Truth be told, Storefront itself was already doing a good job on the accessibility front, there are several significant improvements though.
Improvements for visually impaired visitors
When selecting a color scheme, it’s easy to just choose colors that look pretty. But it’s also important to think about contrast before putting colors together. If the contrast between your add to cart button text and background color isn’t sufficient certain people may not be able to read it. We’ve addressed all text-on-background colors in Storefront to ensure they meet the Web Content Accessibility Guidelines (WCAG) version 2 guidelines.
Visually impaired visitors may also be browsing your site using a screen reader. To improve Storefront performance when viewed with screen reader software we’ve:
- ARIA landmark roles added to enable landmark based scanning.
- Ensured that no elements are hidden from them (a common practise for example is to hide certain elements with
display: none;). - Made all links contextual. IE « Continue reading » becomes « Continue reading article name ».
- Skip links have been added making it easy for the user to skip directly to your content or navigation.
- Element focus styling has been made more obvious
Improvements for physically impaired visitors
For folks who may not be able to use a mouse, we’ve greatly improved keyboard navigation in Storefront, particularly in the main navigation. Previously, tabbing through links would work until you reached a dropdown. At that point the tab order would continue as expected, but the dropdown would not be visible, so there was no indication of what link was focused. Tabbing through the Storefront navigation now reveals dropdowns and clearly highlights children when focused.
What else is going on with Storefront?
↑ Revenir en hautIn March we released two new extensions: Storefront Product Hero and Storefront Pricing tables.
Storefront Product Hero
The Product Hero extension allows you to elegantly highlight any product at your site, on any page. With a clever combination of imagery you can easily create a powerful conversion tool for your chosen product.
Storefront Pricing Tables
Pricing tables are an effective way of displaying the difference between a small number of products. List features between different subscriptions, or complex products, then give visitors a way to add their chosen product to their cart, with the Storefront Pricing Tables extension.
Coming soon – a new child theme
We’re working on a new Storefront child theme that will be focused on offering a design that contrasts with the default, minimalist Storefront aesthetic. The plan is to offer a great option for small businesses that are looking to communicate more personality and informality in their design. The nature-inspired color scheme will make it a good choice for stores selling arts and crafts, health foods or even gardening equipment.
About
These accessibility improvements are greatly appreciated. I look forward to more information and education about accessibility. The upcoming child theme really catches my eye too. Thanks WooThemes!
I took a look at your site (and now I’m hungry), the new child theme could be a perfect fit 🙂
I am using Storefront on my main website and I’m really love it. Brings efficiency and elegant code.
I often use Storefront for my clients sites and I am really delighted that for visually impaired improvement was installed ..Goog Job.!!
As wonderful as all these extensions that are exclusive to Storefront are it would be ideal to see them added as stand alone WooCommerce/WooTheme extensions.
Example: Storefront Checkout Customiser since it contains the coveted Two Page Checkout should have a WooCommerce extension alternative. Additionally the Storefront Pricing Tables extension should be made available for other WooThemes.
I really hate seeing neat functionality getting locked into a singular Woo Theme. 🙁