StorefrontStencilThemesAccessibility

WCAG Compliance Levels

This article demonstrates how Cornerstone satisfies Web Content Accessibility Guidelines (WCAG) 2.1 across compliance levels. You can apply similar techniques to your site regardless of your compliance level. For detailed implementation information, see Implementing WCAG Guidelines.

Accessibility principles

WCAG organizes accessibility guidelines into four principles.

Perceivable. Users can comprehend the information being presented. The information cannot be invisible to all their senses.

Operable. Users can perform actions using interface components and navigate the site. The interface cannot require interaction that a user cannot perform.

Understandable. The information and operation of a user interface are understandable. The operation of interface or information cannot cause confusion or discomfort for users.

Robust. Users can perform a wide variety of technologies. The content cannot cause content inaccessibility.

We encourage you to create content that addresses all four principles. If any principle is missing, users with disabilities will not be able to successfully use and access web content.

Accessibility guidelines

Each principle contains guidelines, the goals you should work towards to achieve a certain conformance level.

The guidelines featured below are not a complete list and were chosen to highlight possible solutions for how to meet requirements. This article demonstrates how Cornerstone meets the success criteria for the following guidelines.

Perceivable

LevelGuideline 1.1: Text AlternativesCornerstone technique
Level ANon-text ContentAlt text is available in all areas of the theme (blogs, white pages, banners, product editor, category pages, page builder, etc.).
LevelGuideline 1.3: AdaptableCornerstone technique
Level AMeaningful SequenceThe links in the navigation bar form a meaningful sequence. Search, Sign In or Register, and Cart buttons appear above all other content because many visitors will want to perform these actions.
Level AAOrientationThe theme is fully responsive, meaning it automatically adapts to your device (desktop, tablet, and mobile).
Level AAAIdentify PurposeThe option to add your own fonts and icons in the navigation of a site to load symbols and vocabulary familiar to users.
LevelGuideline 1.4: DistinguishableCornerstone technique
Level AUse of ColorMultiple carousel images are indicated by dots below the carousel and next and previous arrows appear on carousel images.
Level AAContrast (Minimum)All text and images have a contrast ratio of at least 4:5:1 except for the exempted items stated in WCAG.
Level AAAContrast (Enhanced)All text and images have a contrast ratio of at least 7:1 except for the exempted items stated in WCAG.

Operable

LevelGuideline 2.4: NavigableCornerstone technique
Level ABypass BlocksThe option to add a visible ‘Skip to Main’ link to all pages on your site that sends users to the start of the main content of each page. Bypass Blocks example
Level AAMultiple WaysThe search bar is in the top right by default; however, you can receive search results on both the quick-search bar and when you press Enter on the search results page.
Level AAALocationBreadcrumbs are allowed on a web page. Location example

Understandable

LevelGuideline 3.1: ReadableCornerstone technique
Level ALanguage of PageThe ability to customize your display in any one language of your choice by using the lang attribute on the HTML element.
Level AALanguage of PartsThe option to translate your theme into multiple displayed languages.
Level AAAUnusual WordsA mechanism is available for users to perceive content as a single control for a distinct function. Unusual words example.
LevelGuideline 3.2: PredictableCornerstone technique
Level AOn InputYou are required to click a submit button to perform an action.
Level AAConsistent Navigation* There is a consistent presentation and layout for users who interact with repeated content.
* Navigation menus are always in the same place.
* The Search box is in the same location on all pages.
Level AAAChange on RequestUsers are automatically redirected from an old page to a new page in such a way that they never realize the redirect has occurred.
LevelGuideline 3.3: Input AssistanceCornerstone technique
Level AError IdentificationUsers receive an error message when they fail to include an @ in the email address.
Level AAError SuggestionPrevent errors with the use of a checkbox and a submit button.
Level AAAHelp* A help link is on every web page.
* Text instructions are at the beginning of a form or set of fields that describes the necessary input.