WCAG resource

start

for Instructional Designers

WCAG standards simplified

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.

Web Content Accessibility Guidelines

WCAG stands for

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

WCAG standards are divided into four sections.

Course overview

navigate this course.

Content Type

Brief summary of the WCAG standard

WCAG standard section number

How to

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

allow format adjustment.

Features

Don't impose time limits

Allow learners to adjust text formatting

Allow learners to adjust text size and spacing

Allow learners to enlarge text

Include portrait and landscape modes

SC 2.2.1

SC 1.4.8

SC 1.4.12

SC 1.4.4

SC 1.3.4

Features

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

keep visual content clear.

Color & Structure

Let learners find the same content in multiple ways

Organize content in a logical order

Choose colors with sufficient contrast

Do not use colors alone to convey meaning

SC 2.4.5

SC 1.3.2

SC 1.4.11

SC 1.4.1

Color and Structure

Dark grey is easier eyes.

ADA Site Compliance Checker

WebAIM

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

Text size contributes to accessibility too.

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

Low contrast is challenging.

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

higher contrast is USUALLY better.

Ideal contrast ratio for accessibility

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

help navigate content smoothly.

Labels

Use descriptive headings

Add descriptive page titles

Use consistent naming identifications

Label input fields clearly

Write clear instructions and button labels

SC 2.2.1

SC 2.4.2

SC 3.2.4

SC 1.3.5

SC 1.3.3

Labels

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

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

We all benefit!

build accessible courses with easier to understand WCAG standards.

Now you are ready to