Access Check

DESIGNER’S STATEMENT

Accessibility deadlines are coming for every public school and college course page, and most teachers have never heard a screen reader read their work. I wanted to build the tool I wish those teachers had: one that answers “Is my page OK, and what do I fix first?” in under a minute, without jargon and without judgment.

The hook is the reviewers. Instead of a wall of codes, four students react to the teacher’s own page. Nora hears “click here” four times and has no idea where the links go. Theo misses a due date marked only in red. Ruth clicks an underlined word three times before realizing it isn’t a link. Sam can’t follow a video without captions. Hearing your own page read aloud badly teaches more than any checklist.

Every reviewer also names who else the fix helps. Clear headings help everyone skim. Captions help students in noisy rooms or learning in a second language. That Universal Design for Learning framing turns compliance into good teaching for every student.

SheBuilds Season 04 drew 900 builders. AccessCheck placed in the top 5 in the Creator, Developer & Research Tools category.

Four Reviewers. One Pasted Page. Three Fixes First.

THE BUILD STORY

Built in 72 Hours, One Prompt at a Time.

AccessCheck was built during SheBuilds Season 04, a 72-hour virtual build event hosted by Lovable, October 15 to 17, 2026. I planned the build day by day, wrote one focused prompt per feature, and tested each feature against a sample course page with known problems before moving on.

The judging rubric shaped every decision: usefulness, functionality, user experience, and originality. Complexity earned no points, so the working rule was simple: cut a feature before shipping it broken.

Three Design Rules

1. The checks are plain code, not AI. They cost nothing to run, give the same answer every time, and can’t invent a problem that isn’t there.
2. AI does one helpful job. It drafts alt text and clearer link wording on request. The teacher reviews and edits every draft. Nothing is applied automatically.
3. AccessCheck must pass its own test. Captions on every video, no autoplay, full keyboard access, and readable contrast throughout.

The Hardest Part? The Last 10 Percent.

The checking engine worked on day one. The polish took the rest of the weekend. Reviewer reaction clips played so fast that no one saw them, so they now wait until the panel scrolls into view. A self-audit found seven accessibility problems in the tool itself, including a keyboard trap inside pasted videos, and all seven were fixed. A security review showed that pasted HTML could run a script, so every paste now passes through a sanitizer first. None of these were visible in a quick demo. All of them would have mattered to a real teacher.

PROJECT METADATA TABLE

Overview Item	Description
Type	Web app | Accessibility feedback tool for educators
Duration	Under a minute per page check
Audience	Anyone who builds course pages in an LMS or website content
Topic	Digital accessibility: links, headings, images, underlines, color and contrast, video captions
Tools Used	Lovable (build), Claude (planning and prompt design), Runway (character images and reaction videos)
Build Method	72-hour hackathon build, one focused prompt per feature, tested against sample pages
Deliverable	Live web app: no login, no install, nothing saved
Status	Live | Top 5, Creator, Developer & Research Tools, SheBuilds Season 04
Role	Product Designer, Instructional Designer, Visual Designer, Prompt Engineer, Accessibility Lead

PROJCT OVERVIEW

The Challenge

Under ADA Title II, public schools and colleges must make online course content meet the WCAG 2.1 AA standard. Larger institutions must comply by April 2027, and smaller ones by April 2028. Most teachers who build course pages have no technical background and maybe ten minutes between classes. Existing checkers return codes and long issue lists that read like a failing grade.

The Solution

A teacher pastes a page, or loads a sample, and clicks Check. The results open with what the teacher did well, then “Fix these 3 first.” Each issue shows the words on the page, why it matters, and how to fix it. The reviewer panel brings the issues to life, and a printable fix list lets the teacher step away and come back later.

❖ For K-12 and higher ed audiences: lead with the April 2027 deadline. For corporate L&D audiences: lead with the reviewer characters and plain-language feedback. For consulting clients: lead with the build story.

THE REVIEWER PANEL

Reviewer	Experience	Checks	Demo
Nora	Blind, uses a screen reader	Links, headings, alt text	“Hear it the way I do”: the page read aloud the way a screen reader might, with each part highlighted
Theo	Red-green color blind	Color used alone, contrast, underlines	“See it the way I do”: side-by-side color-blindness filters
Ruth	Low vision reads at 200% zoom	Contrast, underlined text that isn’t a lin	A 200% zoom view with adjustable blur
Sam	Deaf	Embedded videos and captions	Muted playback, plus three steps to check captions

IMPACT/OUTCOMES

• Catches the most common course-page issues: vague links, skipped or fake headings, missing or filename alt text, underlined text that isn’t a link, low contrast, color used alone, and video without captions
• Leads with “What you did well,” then “Fix these 3 first,” so teachers always know where to start
• Plain-language explanations, with no WCAG codes anywhere in the interface
• AI drafts alt text and link wording on request, limited to 10 per visit, always edited and approved by the teacher
• A printable fix list with the page name and date, for teachers who get interrupted
• Checks run in the browser and nothing is saved; only what a teacher sends for an AI suggestion leaves the browser
• Built to meet WCAG 2.1 AA itself: keyboard access, visible focus, captions, no autoplay, and respect for reduced-motion settings

DESIGN DECISIONS

Decision 1: Characters Over Checklist

A list of violations tells a teacher what is wrong. A reviewer shows what it costs a real student. Each character experiences the teacher’s own content, so the lesson lands as empathy rather than compliance. Every line was written ahead of time, not generated by AI, so the voices stay accurate and respectful.

Decision 2: Praise Before Problems

Results open with what the teacher did well. The summary line reads “You’re closer than you think.” Teachers who feel judged close the tab. Teachers who feel capable fix the page.

Decision 3: Plain Code Checks, AI Only Where It Helps

An accessibility tool can’t afford a false alarm. Rule-based checks give the same answer every time. AI is reserved for the one task it does well, drafting a first version of alt text or link wording, and a human approves every draft.

Decision 4: Every Fix Helps Every Learner

Each reviewer card carries a short “This also helps” line drawn from Universal Design for Learning. Captions help students reviewing for a test. Descriptive links help everyone find the next step. The fixes become good teaching, not a legal chore.

WHAT’S NEXT: THE ACCESS AHEAD COURSE

AccessCheck catches the most common issues on a single page. The Access Ahead course teaches the full standard, step by step, for teachers, coming January 2027. AccessCheck is the quick check before class. Access Ahead is the deep dive that builds lasting habits.

WATCH THE OVERVIEW

EXPLORE THE APP

Live Web App Open AccessCheck in any browser, on a laptop or phone. No login, no install. Choose “Load sample with issues” to meet the reviewers, or paste one of your own pages.

❖ ❖ ❖

Four reviewers. One page.

Fewer barriers for every student.

TECHNICAL SPECIFICATIONS

Overview Item	Description
Platform	React web app built and hosted with Lovable
Checks	Plain-code analysis of pasted HTML: links, headings, images, underlines, color and contrast, video
Read Aloud	Browser built-in speech with play, pause, stop and speed controls
Simulations	Deuteranopia, protanopia, tritanopia and grayscale filters; 200% zoom with blur
AI Helper	Alt text and link wording drafts, 10 per visit, never applied automatically
Security	Every paste sanitized with DOMPurify before display
Privacy	No login, no database, nothing saved
Accessibility	WCAG 2.1 AA self-audit; keyboard-only and 200% zoom tested
Testing	56 automated tests passing
Status	Complete

November 4, 2026