WCAG Compliance Levels

This article demonstrates how Cornerstone satisfies Web Content Accessibility Guidelines (WCAG) 2.1 across compliance levels. You can perform 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 acheive 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

Level Guideline 1.1: Text Alternatives Cornerstone technique
Level A Non-text Content Alt text is available in all areas of the theme (blogs, white pages, banners, product editor, category pages, page builder, etc.).
Level Guideline 1.3: Adaptable Cornerstone technique
Level A Meaningful Sequence The 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 AA Orientation The theme is fully responsive, meaning it automatically adapts to your device (desktop, tablet, and mobile).
Level AAA Identify Purpose The option to add your own fonts and icons in the navigation of a site to load symbols and vocabulary familiar to users.
Level Guideline 1.4: Distinguishable Cornerstone technique
Level A Use of Color Multiple carousel images are indicated by dots below the carousel and next and previous arrows appear on carousel images.
Level AA Contrast (Minimum) All text and images have a contrast ratio of at least 4:5:1 except for the exempted items stated in WCAG.
Level AAA Contrast (Enhanced) All text and images have a contrast ratio of at least 7:1 except for the exempted items stated in WCAG.

Operable

Level Guideline 2.4: Navigable Cornerstone technique
Level A Bypass Blocks The 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 AA Multiple Ways The 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 AAA Location Breadcrumbs are allowed on a web page. Location example

Understandable

Level Guideline 3.1: Readable Cornerstone technique
Level A Language of Page The ability to customize your display in any one language of your choice by using the lang attribute on the HTML element.
Level AA Language of Parts The option to translate your theme into multiple displayed languages.
Level AAA Unusual Words A mechanism is available for users to perceive content as a single control for a distinct function. Unusual words example.
Level Guideline 3.2: Predictable Cornerstone technique
Level A On Input You are required to click a submit button to perform an action.
Level AA Consistent 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 AAA Change on Request Users are automatically redirected from an old page to a new page in such a way that they never realize the redirect has occurred.
Level Guideline 3.3: Input Assistance Cornerstone technique
Level A Error Identification Users receive an error message when they fail to include an @ in the email address.
Level AA Error Suggestion Prevent errors with the use of a checkbox and a submit button.
Level AAA Help * 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.

Related resources