WCAG resource

WCAGstandardssimplified

for Instructional Designers

start

WCAG stands for

Web Content Accessibility Guidelines

The WCAG standards represent the best practices in the field of elearning development and are an essential tool for developers who aim to create accessible courses. These standards are maintained by the World Wide Web Consortium (W3C), an organization dedicated to developing open web standards.

Course overview

WCAG standards are divided into four sections.

1. Features
2. Color & Structure
3. Contrast
4. RatioLabels

How to

WCAG standard section number

Brief summary of the WCAG standard

Content Type

WCAG standards are organized into four sections by content type: Features, Colors, Labels, and Structure.

navigate this course.

Click the yellow information tool tip button to reveal a summary of the WCAG standard. Direct link to the Web Accessibility Initiative for full WCAG standards and the level A, AA, or AAA.

Click to show interactive elements.

Features

allow format adjustment.

• Responsive layout includes portrait and landscape modes.
• Zoom in and enlarge text up to 200%.
• Adjust text size and spacing with simple visual styles.
• Adjust text formatting— foreground and background colors, paragraph width, alignment, and line spacing.
• Do not set time limits for activities unless the learner can turn them off, adjust, or extend them.

Features

SC 1.3.4

SC 1.4.4

SC 1.4.12

SC 1.4.8

SC 2.2.1

Include portrait and landscape modes

Allow learners to enlarge text

Allow learners to adjust text size and spacing

Allow learners to adjust text formatting

Don't impose time limits

Make sure learners have the option to view in both portrait and landscape modes. WCAG 2.1 Understanding Docs

Learners should be able to:

• Enlarge text by 200% without cutting off any content or being unable to interact with the course .
• Scale content to 400% without having to scroll excessively.

Learners should be able to change the spacing between text without it cutting off any of the content or preventing them from interacting with the course. Understanding SC 1.4.12:Text Spacing (Level AA)

Allow learners to customize the way text looks—including foreground and background colors, paragraph width, alignment, and line spacing. Understanding SC 1.4.8:Visual Presentation (Level AAA)

Do not set time limits for activities unless the learner can turn them off, adjust, or extend them. Exception: Timing is essential to understanding like in a real life simulation. Understanding SC 2.2.1:Timing Adjustable (Level A)

Color & Structure

keep visual content clear.

• Bold or underline text when using a different color to make a word or phrase stand out.
• Include text or an icon when using color to convey meaning.
• Button and icon contrast ratio of at least 3:1 against background color and nearby items.
• Sufficient color contrast.
• Content in logical order including tabs.
• Learners can find the same content with different methods like the menu or search bar.

Color and Structure

SC 1.4.1

SC 1.4.11

SC 1.3.2

SC 2.4.5

Do not use colors alone to convey meaning

Choose colors with sufficient contrast

Organize content in a logical order

Let learners find the same content in multiple ways

Content should be accessible using several different methods. For example, an e-learning course that you can navigate via the menu, the next/previous buttons, or the search bar. Understanding SC 2.4.5:Multiple Ways (Level AA)

When using a different color to make a word or phrase stand out, also use different formatting— like bolding or underlining. When using color to convey meaning—make sure to also include text or an icon. Understanding SC 1.4.1:Use of Color (Level A)

Buttons and icons need a contrast ratio of at least 3:1 against background color and nearby items. Buttons without space between must be sufficiently contrasted with each other and the background. Understanding SC 1.4.11:Non-text Contrast (Level AA)

When the reading order of content is important to understanding meaning make sure assistive technologies can read content in correct sequence. *Including tabs Understanding SC 1.3.2:Meaningful Sequence (Level A)

Content should be accessible using several different methods. For example, an e-learning course that you can navigate via the menu, the next/previous buttons, or the search bar. Understanding SC 2.4.5:Multiple Ways (Level AA)

Ideal contrast ratio for accessibility

higher contrast is USUALLY better.

Avoid the highest contrast levels likewhite text on a black background or black text on a white background that are too harsh and can cause eye strain.

Low contrast is challenging.

High contrast makes text and UI elements easy to read and understand.

Text size contributes to accessibility too.

Contrast Checker Tools like and help determine accessibility of text size, color contrast, and check visual elements.

WebAIM

ADA Site Compliance Checker

Dark grey is easier eyes.

Labels

help navigate content smoothly.

• Clear instructions and button labels .
• Label input fields clearly (on-screen and alt-text) to easily understand their purpose.

• Use consistent naming identifications—like "search" and "find".
• Add descriptive page titles with a focus on the primary topic to simplify search results.

• Descriptive headings and labels describe the topic or purpose of the interaction.

Labels

SC 1.3.3

SC 1.3.5

SC 3.2.4

SC 2.4.2

SC 2.2.1

Write clear instructions and button labels

Label input fields clearly

Use consistent naming identifications

Add descriptive page titles

Use descriptive headings

Make sure learners can understand how to interact without having to rely on the sensory characteristics of an object—like shape, colors, size, visual location, orientation, or sound. Understanding SC 1.3.3:Sensory Characteristics (Level A)

Make sure any input fields you include that contain personal data are labeled clearly (on-screen and in alt-text) so all learners can easily understand their purpose. Understanding SC 1.3.5:Identify Input Purpose (Level AA)

Interactive items that function the same throughout your e-learning course—such as text/icons on a button—make sure visible labels or icons are consistent and with accessible names like "search" and "find". Consistent Identification: Understanding SC 3.2.4

Learners understand what will be covered on each page before they navigate into page content. Clear page titles with unique names help learners know what content to expect and improve accessibility for screen readers and search results. Understanding SC 2.4.2:Page Titled (Level A)

Let learners know what to expect from a section or slide by having headings that describe the topic or purpose. Labels for interactive items should clearly describe the purpose of the interaction. Understanding SC 2.4.6:Headings and Labels (Level AA)

Now you are ready to

build accessible courses with easier to understand WCAG standards.

We all benefit!

Learners are met where they are most comfortable when accessibility is enhanced.

Extra accommodations help those with permanent physical or neurological impairment AND those with a temporary need imposed by illness or environment.