WCAG resource

WCAG standards simplified

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

navigate this course.

Content Type

WCAG standard section number

Brief summary of the WCAG standard

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

SC 1.4.12

SC 1.4.8

SC 2.2.1

SC 1.3.4

Allow learners to adjust text size and spacing

Allow learners to enlarge text

Allow learners to adjust text formatting

Don't impose time limits

Include portrait and landscape modes

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

SC 1.3.2

SC 2.4.5

SC 1.4.1

Choose colors with sufficient contrast

Organize content in a logical order

Let learners find the same content in multiple ways

Do not use colors alone to convey meaning

Ideal contrast ratio for accessibility

higher contrast is USUALLY better.

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.

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

Text size contributes to accessibility too.

Dark grey is easier eyes.

ADA Site Compliance Checker

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

WebAIM

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

SC 3.2.4

SC 2.4.2

SC 2.2.1

SC 1.3.3

Use consistent naming identifications

Label input fields clearly

Add descriptive page titles

Use descriptive headings

Write clear instructions and button labels

Now you are ready to

build accessible courses with easier to understand WCAG standards.

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!