Storefront 1.4 – now more accessible!

Written by James Koster on March 31, 2015 News, Product News.

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

We’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.

An example of how we tweaked colors to improve contrast.
An example of how we tweaked colors to improve contrast.

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.

Tabbing through dropdowns now works as expected, yay!
Tabbing through dropdowns now works as expected, yay!

What else is going on with Storefront?

In 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.

Purchase now

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.

Purchase now

Coming soon – a new child theme

Upcoming Storefront child theme
Upcoming Storefront 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.

cta-banner-10-product-page-v2_2x

5 Responses

  1. Bradley Allen
    March 31, 2015 at 8:22 pm #

    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!

    • James
      March 31, 2015 at 8:46 pm #

      I took a look at your site (and now I’m hungry), the new child theme could be a perfect fit 🙂

  2. Nel Tseng
    April 1, 2015 at 7:20 am #

    I am using Storefront on my main website and I’m really love it. Brings efficiency and elegant code.

  3. svplim.com
    April 4, 2015 at 7:28 pm #

    I often use Storefront for my clients sites and I am really delighted that for visually impaired improvement was installed ..Goog Job.!!

  4. Syrehn
    April 28, 2015 at 9:43 pm #

    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. 🙁