Accessibility Checker

Overview

The editor continuously audits the lesson you are editing against a broad set of WCAG 2.2 checks. As you add or edit bricks, issues surface in two places:

  • A badge on each affected brick — red for errors, amber for warnings — with a tooltip summarizing the first issue.
  • The Accessibility button in the toolbar — shows the lesson's aggregate count and opens the accessibility panel.

The course view also shows a per-lesson badge with the totals for every lesson, computed on the server from the last saved state.

Checks are informative only: they never block saving, exporting, or publishing.

The accessibility panel

The panel lists every issue grouped by brick, in lesson order. Each entry shows:

  • What is wrong — e.g. "Image has no alternative text", with the WCAG success criterion it maps to.
  • How to fix it — concrete remediation guidance.
  • Fix buttons — when a safe one-click fix exists (see below).

Clicking a group title scrolls the editor to that brick.

What is checked

AreaWCAGChecks
Alternative text1.1.1Every active image slot across all brick types (including gallery/carousel items, flashcard faces, match pairs, dialog avatars, game images, carousel covers). Empty alt = explicitly decorative and is valid. Alt texts that look like file names or exceed 150 characters are flagged.
Video1.2.2 / 1.2.3Self-hosted videos need a subtitles file (error). Platform-hosted videos (YouTube/Vimeo) get a reminder to verify captions on the platform. Missing transcripts are a warning.
Audio1.2.1Audio bricks and audio media need a transcript. Dialog line audio is exempt — the line text is its own transcript.
Headings1.3.1 / 2.4.6Level skips (h2 → h4), duplicate top-level headings (the lesson title already renders as the page heading), empty headings, and long lessons without any heading.
Tables1.3.1Tables without a header row or column (error); merged cells (warning).
Contrast1.4.3Effective text and heading colors against the effective background, resolving the full cascade: theme colors → per-type styles → per-brick container overrides → inline color/highlight marks in rich text. Large headings use the 3:1 threshold.
Color as the only cue1.4.1Chart series or trivia categories with nearly identical colors.
Links2.4.4Links with no text, generic text ("click here", "aquí", …), or a raw URL as text.
Embeds4.1.2Iframes without an accessible title (fill the Accessible title field in the embed settings).

One-click fixes

Issues with a safe deterministic fix offer a button that applies it directly (one undo step):

  • Mark as decorative — sets an explicit empty alt.
  • Fix heading level — sets the level the hierarchy expects.
  • Enable header row — for tables without headers.
  • Use character name — as the dialog avatar's alt text.

Contrast issues include a suggested replacement color in the message — the closest color from your theme palette that passes, or a tuned shade of the current color. Theme-level colors are fixed in the theme editor so one change fixes the whole course.

Generate alt text with AI

Image issues offer Generate alt with AI. The image is sent to the model your organization has chosen for Text processing (see AI Models), which returns a short description in the content's language. The suggestion appears in an editable field — nothing is written until you apply it. Each generation is metered with credits, like other AI features.

Limits

  • Backgrounds using gradients, images, or custom CSS cannot be contrast-checked automatically. They surface a single "not verifiable" warning instead of guessing — check those manually.
  • The per-lesson badges in the course view read the last saved state, so they can trail your latest edits by a few seconds.
  • Game bricks (word search, hangman, …) are inherently visual/interactive; the checker validates their images and text, but the game mechanics themselves may need a manual accessibility review.

Reviewing and fixing via MCP

The same checker is available to AI assistants connected through the MCP server: audit_content_accessibility / audit_lesson_accessibility return the report, apply_accessibility_autofix applies a fix, and generate_accessibility_alt_text suggests alt text for images. Useful for a chat-driven "review this course's accessibility and fix what you can" pass.

Accessibility Checker