Implementing WCAG Guidelines

Implementing WCAG Guidelines - Examples

This article provides Cornerstone code snippets which satisfy current WCAG guidelines or code you can add to meet a WCAG requirement.

Bypass blocks

To satisfy the bypass blocks (opens in a new tab) WCAG guideline, Cornerstone has a 'Skip to Main' link on each page. You can find this code in /templates/components/common/header.html.

{{lang 'header.skip_to_main'}} {{#if}}
  {{#each (limit banners.top_metadata 1)}}

HTML output

Skip to Main


To satisfy the Location (opens in a new tab) WCAG guideline, Cornerstone provides breadcrumbs on each page. See an example of breadcrumbs in /templates/components/common/contact-us.html.

{{#partial "page"}} {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
{{#unless theme_settings.hide_contact_us_page_heading}}

HTML output


Unusual Words

To satisfy the unusual words (opens in a new tab) WCAG guideline, add links to your footer categories section in the your theme. We recommend adding links using your store's BigCommerce control panel. Insert a script in the Storefront > Script Manager field. Example code is provided below. Replace each /page-link/ and Add Link Name with the actual links and names.

<script type="application/javascript" src="//"></script>
        $("footer article[data-section-type='footer-webPages'] ul").append("<li><a href='/page-link1/'>Add Link Name1</a></li><li><a href='/page-link2/'>Add Link Name2</a></li><li><a href='/page-link3/'>Add Link Name3</a></li>")

HTML output

footer categories

Did you find what you were looking for?