WCAG Compliance Levels
This article demonstrates how Cornerstone satisfies Web Content Accessibility Guidelines (WCAG) 2.1 (opens in a new tab) 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
| Level | Guideline 1.1: Text Alternatives | Cornerstone technique |
|---|---|---|
| Level A | Non-text Content (opens in a new tab) | 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 (opens in a new tab) | 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 (opens in a new tab) | The theme is fully responsive, meaning it automatically adapts to your device (desktop, tablet, and mobile). |
| Level AAA | Identify Purpose (opens in a new tab) | 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 (opens in a new tab) | Multiple carousel images are indicated by dots below the carousel and next and previous arrows appear on carousel images. |
| Level AA | Contrast (Minimum) (opens in a new tab) | 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) (opens in a new tab) | 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 (opens in a new tab) | 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 (opens in a new tab) | 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 (opens in a new tab) | Breadcrumbs are allowed on a web page. Location example |
Understandable
| Level | Guideline 3.1: Readable | Cornerstone technique |
|---|---|---|
| Level A | Language of Page (opens in a new tab) | 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 (opens in a new tab) | The option to translate your theme into multiple displayed languages. |
| Level AAA | Unusual Words (opens in a new tab) | 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 (opens in a new tab) | You are required to click a submit button to perform an action. |
| Level AA | Consistent Navigation (opens in a new tab) | * 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 (opens in a new tab) | 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 (opens in a new tab) | Users receive an error message when they fail to include an @ in the email address. |
| Level AA | Error Suggestion (opens in a new tab) | Prevent errors with the use of a checkbox and a submit button. |
| Level AAA | Help (opens in a new tab) | * 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. |