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.
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.
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.
|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.|
|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|
|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.