Updating a BigCommerce Site to WCAG 2.1 AA Compliance

Updating a BigCommerce Site to WCAG 2.1 AA Compliance: A Comprehensive Guide

Achieving WCAG 2.1 AA compliance on a BigCommerce site requires a multi-faceted approach. Because BigCommerce themes aren’t inherently accessible, you’ll need to modify both the theme’s code and the content managed through the BigCommerce platform. This guide provides a detailed, step-by-step process to help you bring your BigCommerce store into compliance.

I. Planning and Preparation

1. Understand WCAG 2.1 AA Guidelines:
  • Review the WCAG 2.1 AA guidelines thoroughly. Familiarize yourself with the success criteria. The official WCAG documentation is the definitive resource:
  • [https://www.w3.org/TR/WCAG21/]
  • Understand the four principles of accessibility (POUR): Perceivable, Operable, Understandable, and Robust. These principles underpin all the guidelines.
2.Accessibility Audit:

Conduct a comprehensive accessibility audit of your existing BigCommerce site. Use a combination of automated tools and manual testing.

Automated Tools:
  • WAVE (Web Accessibility Evaluation Tool): A browser extension that identifies accessibility errors and provides guidance.
  • Lighthouse (Google Chrome DevTools): Includes accessibility audits and performance metrics.
  • axe DevTools: A more robust browser extension with detailed reports.
2. Manual Testing:
  • Keyboard Navigation: Ensure all interactive elements (links, buttons, form fields) are accessible using the keyboard alone.
  • Screen Reader Testing: Use a screen reader (e.g., NVDA, JAWS, VoiceOver) to experience the site as a visually impaired user would. 
Pay attention to:
  • Proper heading structure.
  • Alternative text for images.
  • Form labels and instructions.
  • Table structure.
  • ARIA attributes.
  • Color Contrast: Verify sufficient color contrast for text and non-text elements.
  • Zoom Testing: Test the site at 200% zoom to ensure content remains readable and usable without horizontal scrolling.
3.Document Findings and Prioritize:
  • Create a detailed report of all accessibility issues identified during the audit.
  • Prioritize issues based on severity and impact on users. Focus on fixing the most critical issues first.
4.Choose an Accessible Theme (or Prepare to Modify Your Existing Theme):
  • Ideally, select a BigCommerce theme that is designed with accessibility in mind. Look for themes that explicitly state WCAG compliance.  However, even these themes might require customization.

If you’re using an existing theme, be prepared to make significant code modifications. This will likely involve editing HTML, CSS, and JavaScript.

II. Theme Modifications (Code-Level Accessibility)

1.Semantic HTML:
  • Use semantic HTML5 elements ( `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>` ) to structure your content logically. This helps screen readers understand the page layout.
  • Use headings (`<h1>` – `<h6>`) in a logical order to create a clear document outline. Don’t skip heading levels.
  • Use lists (`<ul>`, `<ol>`, `<dl>`) appropriately for lists of items.
  • Use `<figure>` and `<figcaption>` for images with captions.
2.Alternative Text for Images:
  • Provide descriptive alternative text (`alt` attribute) for all images that convey meaning. The `alt` text should describe the image’s content and function.
  • Use an empty `alt` attribute (`alt=””`) for purely decorative images. This tells screen readers to ignore them.
2.Alternative Text for Images:
  • Provide descriptive alternative text (`alt` attribute) for all images that convey meaning. The `alt` text should describe the image’s content and function.
  • Use an empty `alt` attribute (`alt=””`) for purely decorative images. This tells screen readers to ignore them.

  • Context is key: The `alt` text should be relevant to the surrounding content.

3.Color Contrast:
  • Ensure sufficient color contrast between text and background colors. Use a color contrast checker tool (e.g., WebAIM Color Contrast Checker) to verify that the contrast ratio meets WCAG 2.1 AA requirements (4.5:1 for normal text, 3:1 for large text).
  • Don’t rely solely on color to convey information. Use text labels or other visual cues in addition to color.
4.Keyboard Navigation:
  • Ensure all interactive elements (links, buttons, form fields) are focusable and navigable using the keyboard.
  • Use CSS to provide a clear and visible focus indicator for keyboard users. The default browser focus outline is often insufficient. Use the `:focus` pseudo-class to style the focus state.
  • Avoid using `tabindex` unless absolutely necessary. Incorrect use of `tabindex` can disrupt the natural tab order.
  • Implement skip links: Provide a “Skip to Content” link at the top of the page to allow keyboard users to bypass repetitive navigation elements.
5.Forms:
  • Use `<label>` elements to associate labels with form fields. Use the `for` attribute on the `<label>` to match the `id` attribute on the corresponding input field.
  • Provide clear and concise instructions for completing forms.
  • Use ARIA attributes to provide additional information about form fields, such as required fields or error messages. For example, `aria-required=”true”` for required fields and `aria-invalid=”true”` for fields with errors.
  • Provide error messages that are clear, specific, and easy to understand. Display error messages near the corresponding form field.
6.ARIA Attributes:
  • Use ARIA (Accessible Rich Internet Applications) attributes judiciously to enhance accessibility. ARIA attributes provide additional information to assistive technologies about the role, state, and properties of elements.
  • Use ARIA landmarks (`role=”navigation”`, `role=”main”`, `role=”banner”`, `role=”contentinfo”`) to define the structure of the page.
  • Use ARIA roles, states, and properties to make dynamic content and interactive widgets accessible. For example, use `aria-expanded` to indicate whether a collapsible element is expanded or collapsed, and `aria-label` to provide a descriptive label for an element that doesn’t have a visible text label.
  • Avoid using ARIA attributes unnecessarily. Use semantic HTML elements whenever possible.
7.Tables:
  • Use tables for tabular data only, not for layout.
  • Use `<th>` elements for table headers.
  • Use the `scope` attribute on `<th>` elements to indicate whether the header applies to a row or a column.
  • Use the `<caption>` element to provide a title for the table.
8.JavaScript Accessibility:
  • Ensure that JavaScript-based interactions are accessible to keyboard users and screen reader users.
  • Use ARIA attributes to provide information about the state and behavior of dynamic content.
  • Manage focus appropriately when content changes dynamically. Move focus to the new content or provide a visual indication that the content has changed.
  • Avoid using JavaScript to create inaccessible elements or interactions.
9.Video and Audio:
  • Provide captions for all video content.
  • Provide transcripts for all audio content.
  • Provide audio descriptions for video content that contains important visual information.
  • Ensure that video and audio players are keyboard accessible.

III. Content Management (WYSIWYG Editor)

1.Headings:
  • Use the heading styles in the WYSIWYG editor to create a logical heading structure. Don’t use heading styles simply to make text larger or bolder.
  • Avoid skipping heading levels.
2.Alternative Text for Images:
  • Always provide descriptive alternative text for images when inserting them into content areas.
  • Avoid using generic alt text like “image” or “picture.”
3.Links:
  • Use descriptive link text that clearly indicates the destination of the link. Avoid using generic link text like “click here.”
  • Set the `title` attribute on links to provide additional information about the link’s destination (optional, but helpful).
  • Ensure links are visually distinct from surrounding text (e.g., using color and underline).
4.Lists:
  • Use the list formatting options in the WYSIWYG editor to create lists of items.
  • Don’t use manual formatting (e.g., using dashes or asterisks) to create lists.
5.Tables:
  • Use the table formatting options in the WYSIWYG editor to create accessible tables.
  • Add table headers (`<th>`) to identify the columns and rows.
  • Keep tables simple and avoid complex layouts.
6.Color Contrast:
  • Be mindful of color contrast when choosing text and background colors in the WYSIWYG editor. Use a color contrast checker to verify that the contrast ratio meets WCAG 2.1 AA requirements.
  • Avoid using color alone to convey information.
7.Embedded Content:
  • Ensure that any embedded content (e.g., videos, audio players, social media widgets) is accessible. Provide captions, transcripts, and keyboard navigation for embedded media.
  • Use ARIA attributes to make embedded content more accessible to screen reader users.

IV. Testing and Maintenance

1.Regular Testing:
  • Conduct regular accessibility testing to ensure that your site remains compliant with WCAG 2.1 AA.
  • Use a combination of automated tools and manual testing.
  • Involve users with disabilities in your testing process.
2.Content Updates:
  • Train content creators on accessibility best practices.
  • Establish guidelines for creating accessible content.
  • Review content regularly to ensure that it meets accessibility standards.
3.Theme Updates:
  • When updating your BigCommerce theme, be sure to re-test for accessibility. Theme updates can sometimes introduce accessibility issues.
  • Keep your theme up to date to benefit from the latest security and accessibility improvements.
4.Accessibility Statement:
  • Create an accessibility statement on your website that describes your commitment to accessibility.
  • Provide contact information for users to report accessibility issues.

V. Specific BigCommerce Considerations

  • Stencil CLI: Use the Stencil CLI to develop and test your theme locally before deploying it to your live site. This allows you to catch accessibility issues early in the development process.
  • BigCommerce Apps: Be careful when installing third-party BigCommerce apps. Some apps may not be accessible and can introduce accessibility issues to your site. Evaluate the accessibility of any app before installing it.
  • Custom Fields: Ensure that custom fields are properly labeled and accessible to screen reader users.

VI. Tools and Resources

Summary

Updating a BigCommerce site to WCAG 2.1 AA compliance is a significant undertaking, but it’s a worthwhile investment. By following these steps, you can create a more inclusive and accessible online experience for all users, improving your brand reputation and potentially expanding your customer base. Remember that accessibility is an ongoing process, not a one-time fix. Continuous monitoring, testing, and training are essential to maintaining a high level of accessibility over time. Good luck!

Ready to Make Your eCommerce Site Truly Accessible and Inclusive?

Don’t leave your business vulnerable to costly lawsuits, lost revenue, and reputational damage. Choose the complete solution for WCAG 2.1 AA compliance and provide an exceptional online experience for all your customers.
Explore WCAG 2.1 AA Compliance with Enterpristore

Learn how our ecommerce solution ensures accessibility and meets industry standards

Discover Equally AI's Capabilities

Request a demo to see how Equally AI enhances accessibility and user experience

Upgrade Your Platform with Expert Technical Services

Contact us today for a comprehensive quotation to make your ecommerce or WordPress site WCAG 2.1 compliant