Shopping Cart

Your cart is currently empty.

Continue browsing here.

Enable cookies to use the shopping cart

Cart Updated
Variant Title has been added to your shopping cart.    View Cart   or   Checkout Now
Variant Title has been removed from your shopping cart.

E-Commerce Website Accessibility [Part 2]

Growth Spark

What Makes a Website Accessible?

This is the second post in a two-part blog series about accessibility for e-commerce websites. Read Part 1 here. 

Many businesses are working to make their websites easier for everyone to use, including users with a wide range of disabilities.

Accessible design and compliance with the Americans with Disabilities Act (ADA) is a growing topic in web design and development circles - partially because it’s obviously just the right thing to do, but also because, “From a strictly business point of view, your site should be accessible because driving away visitors who have disabilities means lost conversions and revenue for your clients.”

Features of Accessible Websites

People using assistive technologies like screen readers rely on a website’s structural elements to navigate through a page without being able to see it or using a mouse. There are many structural elements to consider when developing a universally accessible website, including the following:

Audio and Video

Coding

  • ARIA landmark roles: Use the eight ARIA (Accessible Rich Internet Applications) landmark roles to help screen reader users quickly jump to a specific section section of a page. The eight ARIA landmark roles are:
    • role=”banner”
    • role=”navigation” (e.g., a menu)
    • role=”main” (the main content of the page)
    • role=”complementary” (e.g., a sidebar)
    • role=”contentinfo” (meta data about the page, e.g., a copyright statement)
    • role=”search”
    • role=”form”
    • role=”application” (a web application with its own keyboard interface)
  • ARIA for web applications: This is markup that can be added to HTML to help screen readers and other assistive technologies better understand the elements on a web page, and enable users to effectively interact with those elements.
  • Use mark-up to convey meaning and structure using HTML5, WAI-ARIA, etc. Coordinate with designers and content writers to ensure consistency.

Navigation

  • Navigation can be triggered using the keyboard. For example, “enter” or “space” to trigger submenus, arrow keys to move through menus in all directions, and close menus with Escape.
  • Navigational links should be grouped together in a list to add structural information to your pages.
  • Provide users with the option to bypass blocks of your site, such as “Skip To Navigation” or “Skip to Main content”.

Headings, Labels, and Tags

  • Form fields (like edits and buttons) require proper labels Tables should be clearly defined using HTML tags to explain the relationships between table headers and cells.
  • HTML headings should follow a logical structure and substructure

Design

  • Color should not be the only characteristic used to convey information. For example, if link text is blue, it should also be underlined so users who are unable to perceive color differences can distinguish links from surrounding text.
  • Color contrast should be within recommended ratios for users who have difficulty perceiving text if there is too little contrast between foreground and background. Use the Colour Contrast Analyser or WebAIM Color Contrast Checker for guidance.
  • Some fonts are by design more readable than others.
  • The display should respond to the user’s technology, including different zoom states and viewport sizes. Avoid horizontal scrolling and clipping content.
  • Give all interactive elements such as menus, mouse-over information, or media players keyboard accessibility.

Text Content

Forms
  • Forms should help users avoid and correct mistakes by providing clear instructions, error messages, and notifications; helping users find the problem; suggesting corrections; and accepting variations in format (ex. Accept phone numbers with or without spaces or dashes).

Growth Spark recently worked with Newbury Comics, a music and pop culture retailer, to strengthen the brand’s online accessibility. The project ensured that Newbury Comics’ Shopify e-commerce store adheres to many of the accessibility best practices described in this post. The brand also added an accessibility page to their site to inform their customers of their actions.

Newbury Comics website accessibility color contrast

The color contrast on the Newbury Comics Shopify e-commerce site is designed to be comfortable for visually-impaired and colorblind shoppers.

The Newbury Comics site currently uses ARIA landmark roles and markup to help screen reader users quickly jump to a specific section of a page and better understand the elements on a web page; conforms to recommended color contrast ratios; and navigation that can be triggered by a keyboard and is grouped in a list to provide on-page structural information.

Newbury Comics e-commerce website accessibility menu

Newbury Comics’ online navigation is grouped in a list to help users with screen readers understand the site organization.

How to Build an Accessible Shopify Website

Shopify has made great strides in building more accessible design into its existing platform, including developing its own design system, named Polaris. Polaris provides design guidelines for all aspects of a Shopify e-commerce site, and meets web accessibility standards. Polaris is available to Shopify Partners, along with a component library and downloadable UI kit.

The Polaris component library includes code with accessible markup, and alternative text for icons, complex images, and actions (like buttons and links) to help people with low or loss of vision. Since this code exists in a single component that gets reused, it’s easier to update. As a result, users get a consistent, accessible experience.

While using Polaris to design a site from scratch is probably best left to the pros, it’s good to know that Shopify uses its guidelines and best practices for all of its own products (themes, apps, etc.). So, when you choose to work with a Shopify product, you can be confident that it will meet web accessibility standards. (However, for third-party developers, it may be difficult to find out whether they use Polaris to design their theme or app.)

Check Your Website’s Accessibility

Just how accessible is your website right now? It’s not difficult to figure out. And once you know, you can take steps to improve it.

Start by:

  1. Testing your application with a screen reader. There are many available screen readers, such asNVA (which is a free download).
  2. Checking your code with HTML validator
  3. Using a keyboard. You should be able to navigate your site and access all interactive features using only the keyboard (i.e. enter, space, arrow keys or other intuitive keystrokes).
  4. Conducting W3C validation tests for HTML

These assessments (and others, such as asking real users to test your site) can help you understand how accessible your site is, and where it needs improvement.

Improving website accessibility can take time and can be costly. It may be worth looking into financial incentives, including a one-time tax credit to cover up to 50 percent of eligible accessibility improvement costs. These tax credits apply to expenses between $250 and $10,250, and cover costs like acquiring or modifying equipment or devices.

Wondering whether your website meets current web accessibility standards? Or want help making the adjustments needed to ensure your online store is accessible to all of your potential customers? Give us a call. At Growth Spark, we know this online accessibility stuff inside and out.

Read more:

(Feature photo at top by Luca Bravo on Unsplash.)

 

Share this