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 banners.top}}
  {{#each (limit banners.top_metadata 1)}}
    {{{this.content}}}
  {{/each}}
{{/if}}

HTML output

Location

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="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("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>")
    });
</script>

HTML output