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 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 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 WCAG guideline, add links to your footer categories section in 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