Building BigCommerce for Accessibility

Designing with Accessibility in mind is crucial in today’s eCommerce world. In order to deliver the best possible shopping experience for all users, BigCommerce is excited to announce new updates available to our Cornerstone theme. With these accessibility updates, you and your clients will have the tools necessary to comply with Web Content Accessibility Guidelines (WCAG) standards.

In this article, we will explore the accessibility features that are available on the BigCommerce platform that you as a developer should be aware of and implement in your store. We’ll cover using alt text, text accessibility, keyboard accessibility, and customization.

Accessibility and Ecommerce

Accessible websites allow shoppers with disabilities the ability to navigate the eCommerce site and have a better shopping experience. Designing and building sites with inclusivity in mind is a critical consideration for all web developers. Among the many benefits to accessibility, this approach also improves SEO and increases the potential reach for market penetration.

Accessibility on BigCommerce

Alt Text

Alt text also referred to as “alt tags” or “alt descriptions” refers to descriptions given to an image that technology like screen readers use to assist visually impaired users. A good rule of thumb should be — if you’re adding an image, don’t forget to always add in the alt text.

To add alt text descriptions in BigCommerce, you have three options. Developers can add descriptions in Page Builder, directly add alt text in your code, or use Aria-label attributes.

Adding alt text in BigCommerce Page Builder:

Go to Storefront > My Theme in the control panel, then click Customize.

Once in Page Builder, select the image widget and expand the SEO option at the bottom of the list.

Enter the alt text.
Click Save.

Adding alt text in your code

When inserting an image, in the image tag, make sure you include the alt attribute so that it looks like the following:

<img src=”” alt=”Image description”>

Adding alt text in with Aria-label attributes

This method uses an ID reference value that matches the ID element attribute to associate an element with text. Using this method circumvents having to add an alt attribute to each image by setting this description at a high level.

Example:

<div role=”img” aria-label=”Description of the overall image”>

     <img src=”graphic1.png” alt=””>

     <img src=”graphic2.png”>

</div>

For a more in-depth look at this method, please refer to Mozilla on ARIA: IMG role.

Text Accessibility

Another important accessibility consideration for eCommerce sites is making sure your content is readable and understandable by all potential audiences and shoppers. In order to make your text more accessible, developers should keep in mind the following:

1. Color Contrast

Choosing which colors you use is essential for visual accessibility. According to WCAG 2.1, you must have a minimum color contrast ratio of at least 4.5:1 for standard text and 3:1 for large text.

Below is a good graphic that should help you find the combination that would work best for you:

Exceptions

It is important to note that color contrast and text size can affect each other. There are three exceptions to the 4.5:1 contrast standard.

The first is using large text. When you are using large text, the contrast requirement drops down to 3:1, because the larger text is easier to read.

The second is incidental text, which comes in 3 different flavors.

Inactive text, such as text used in a disabled button.
Text that is used purely for decorative purposes, like any kind of text that appears in the background that is not really meant for the user to read. Its presence is solely for esthetics.
Text that was intentionally meant to be hidden. A good example of this is skip links. Read more here on what a skip link is.

The final exception is logotypes. This is the text that is part of any logo or brand name.

A few other resources that can choose the right color combination:

2. Text Headings

Text Headings allow developers and site builders to organize content and provide a good structure for your page. Proper use of headings allows screen readers to easily navigate the site based on the headers used. In a survey conducted by WebAIM, almost 70% of users on screen readers stated that they use headings to navigate through a site.

Below is an example that illustrates the proper and improper use of headings:

As you can tell from the example above, it is important to follow a hierarchical pattern.

Your main heading should be H1 and indicate the main content
H2 should be used for subtopics
Don’t skip or alter headings

To see an example video on the best way to create text headings, see How Headings Help Screen Reader Users.

3. Text Size and Alignment

Contrast, text size, and alignment are also important accessibility considerations that help the readability of your web content.

As a developer, you should consider:

Using white space around blocks of text
Using left-aligned text
A font size of 14px
Using 55–65 characters per line
Using sans serif fonts

These, of course, are best practice suggestions and every site may demand different settings. When in doubt, check out the WebAIM article on Typefaces and Fonts for more information.

4. Text Links

Links, as we all know, are a very common element in any site, but there are a few details on what text you use that we will need to examine to make sure we get the accessibility correct.

When you are creating a link on your site, do not include the word “link” in it. This will result in most screen readers displaying the phrase “link” before each one. Adding the word “link” makes it redundant and a potentially confusing user experience.

Developers should also aim to use text that is more descriptive than “click here” or “click for details.” This is another use case where the user of the screen reader will have no context for what the link is about. To avoid running into this issue, written text links should be unique and meaningful when read out loud.

Here is a list of suggestions to keep in mind:

Use unique link text where possible
Avoid using a URL as the link text. Consider using the page title or description of the page
Don’t use the word “link” in your link text.
Don’t capitalize links.
Keep link text concise.
Don’t link directly to downloads
Provide a warning when link text opens a new window
Remove broken or empty links

Keyboard Accessibility

Keyboard accessibility gives users the ability to navigate your eCommerce site using the keyboard, instead of a mouse or trackpad. As a developer, you can ensure that users are able to access all links, menus, buttons, and form fields using only a keyboard.

On any website, in order to enable an element to participate in keyboard navigation, use the tabindex global attribute. The tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation. This can be added to any HTML element. In the example below, we are adding it to an anchor tag.

Example:

<a href=”http://www.google.com/" tabindex=”1">Google</a>

Another important keyboard functionality is skip navigation. This allows users the ability to bypass the long list of navigation links and sub-links that usually reside at the top of every page. This is especially advantageous to users that have motor disabilities.

One of the best ways to implement this feature on your website is to use invisible links. You can read more about the different ways to implement the “skip navigation” feature here.

You can find more information below:

Customization

There are also scripts or code that you can add to your BigCommerce site to improve its accessibility. I’ve listed a few below:

Add a script or plugin to allow mobile, tablet, or desktop viewing. Use responsive design to match user technology to accommodate different zoom states and viewport sizes.
Add multi-factor authentication or alternative methods besides CAPTCHA to verify identity. Visual CAPTCHA does not allow alt text, and therefore visually impaired users cannot use it.
Add hidden titles that can be accessed by a screen reader.

In the example below, developers can add additional color contrast to menu buttons.

In the Footer.html file of your Cornerstone theme files, you can drop in this styling code snippet and it will enhance the visibility of your menu options.

<style>
.mobileMenu-toggle .mobileMenu-toggleIcon, .mobileMenu-toggle .mobileMenu-toggleIcon:after, .mobileMenu-toggle .mobileMenu-toggleIcon:before {
background: #fff;
}
</style>

Conclusion

We look forward to seeing what you build on BigCommerce and how you utilize these features and best practices to build a more accessible eCommerce experience.

Related Resources

To learn more about customizing your BigCommerce sites for accessibility, check out our Developer Documentation.

We also recommend several apps, located in the Site Tools category in the BigCommerce App Marketplace. We’ve partnered with eSSential Accessibility and AccessiBe in order to prove you and your merchants more tools to implement accessibility features on your sites.

Blog