The 5 Quick Wins
Accessibility is how your platform
actually works for everyone.
It is a priority.
If you’re building an EdTech platform, you already know accessibility matters. But between feature deadlines and compliance checklists, it keeps landing in the “we’ll get to it” column.
You don’t need a six-month audit to start making improvements. These are five fixes that I see missing most often and that your team can implement this week. By making these practical changes, you will improve your platform for the 1 in 5 Americans living with a disability, and consequentially for everyone else.
And the urgency is real: accessibility lawsuits and OCR complaints targeting ed-tech have surged. Now is the time to unlock the budget for fixes your team already knows are right.
Add Meaningful Alt Text to Instructional Images
When a screen reader encounters an image without alt text, it either skips it entirely or reads the file name — something like "IMG_4023.png."
Instructional images carry core content. When these have no alt text — or vague alt text like "graph" — students with visual disabilities lose access to the actual lesson.
Why it matters in education
A student can't complete their assignment, follow a lecture, or pass an assessment. The stakes are academic outcomes, not just user experience.
The Solution
| ❌ Before | Image | ✅ After |
|---|---|---|
| alt="diagram" Screen reader says: "diagram, image" |
alt="The water cycle: evaporation from ocean surfaces rises to form clouds through condensation, then returns to earth as precipitation" | |
| alt="math problem" Screen reader says: "math problem, image" |
alt="Equation: the area of a triangle equals one-half base times height, shown with a right triangle where base is 6 cm and height is 4 cm" |
Decorative images
Informational images
1–2 hours per page
for an experienced team
Make Video Keyboard-Navigable with Captions On by Default
Most custom or embedded video players have two critical gaps:
Keyboard users can't operate them. Volume, captions, seek bar, and fullscreen controls are often unreachable without a mouse.
Captions are off by default. A deaf or hard-of-hearing student has to find and activate captions every time. On some players, that button itself isn't keyboard accessible.
Why it matters in education
Video often carries content that doesn't exist anywhere else. If a student can't operate the player or read captions, that content is locked away.
The Solution
Keyboard test steps
- Tab to the player — does focus land on it?
- Press Space or Enter to play/pause
- Tab to volume; adjust with arrow keys
- Tab to caption toggle and activate it
- Tab to seek bar; skip forward/backward
- Tab to fullscreen and toggle it
If any step fails, that's a barrier.
Quick checklist
- All player controls reachable via Tab
- Play/pause works with Space and Enter
- Volume adjustable with arrow keys
- Captions toggled on by default
- Caption text is accurate (not unreviewed auto-generated)
- Focus indicator visible on every control
Make captions the default. Most platforms support enabling captions on load — it's a configuration change, not a code change.
2–4 hours depending
on video player & backlog
Fix Color Contrast on Interactive Elements
Most teams check contrast on body text and call it done. But buttons, form inputs, error messages, and links fail contrast requirements most often.
What slips through: light text on medium buttons, faint placeholder text, light-red error messages, links distinguished only by color, and invisible disabled states.
Why it matters in education
Interactive elements are where learning happens. If these are hard to see, students disengage or make errors unrelated to their understanding.
The Solution
Minimum ratios (WCAG 2.2 AA)
| Body text (under 18pt) | 4.5:1 |
|---|---|
| Large text (18pt+ or 14pt bold) | 3:1 |
| UI components & graphics | 3:1 |
| Placeholder text | 4.5:1 |
❌ Fails
Body text example
1.8:1 ratio
✅ Passes
Body text example
13.4:1 ratio
Checklist — test each in all states
- Primary buttons (default, hover, focus, disabled)
- Secondary/outline buttons (all states)
- Form input labels & placeholder text
- Error messages and validation text
- Links (ensure non-color indicator like underline)
- Focus indicators (visible against background)
- Icons that convey meaning
For students with low vision, color blindness, or learning in bright classrooms, poor contrast makes interactive elements disappear entirely.
2–3 hours per template;
mostly CSS changes
Add Visible Focus Indicators to Every Interactive Element
Keyboard users press Tab to move between interactive elements. The focus indicator — a visible ring around the active element — is how they know where they are.
The problem: most CSS resets include outline: none in their base styles, removing the default focus ring.
Why it matters in education
Students using keyboards or switch devices rely on visible focus to navigate content, complete quizzes, and submit work. Without it, they can't tell what they're about to activate.
The Solution
The fix (copy & paste this)
/* Show ring on keyboard focus only */
:focus-visible {
outline: 3px solid #1a73e8;
outline-offset: 2px;
}
Customizing the ring
- • Contrast with background by at least 3:1
- • 2–3px width is ideal
- • outline-offset: 2px adds a gap
- • Light ring for dark bg; dark for light bg
Test it: Load any page, put your mouse aside, press Tab repeatedly. Every button, link, input, and dropdown should show a clear indicator.
15 min for the CSS;
1–2 hours to test
Structure Content with Proper Heading Hierarchy
Screen reader users navigate by headings — pressing "H" jumps to the next one, like a built-in table of contents.
Most EdTech platforms choose headings for visual size, not structure — skipping from H1 to H4, or styling <div>s as headings that assistive technology ignores.
Why it matters in education
Without proper heading structure, screen reader users can't jump to practice questions or skip back to objectives — they must listen through everything sequentially.
The Solution
✅ Correct structure
H2: Learning Objectives
H2: Key Concepts
H3: Evaporation
H3: Condensation
H3: Precipitation
H2: Practice Questions
H2: Submit Your Work
❌ Common mistakes
H4: Learning Objectives ← skipped levels
H2: Key Concepts
<div>Evaporation</div> ← not a heading
H6: Practice Questions ← wrong level
Rules of thumb
- One H1 per page — it's the page title
- Never skip levels — H1 → H2 → H3, not H1 → H4
- Use actual heading elements — <h2>, not a styled <div>
- Headings describe content — not just visual decoration
- Be consistent across pages — same level for same content type
1–3 hours per template;
longer for legacy markup
Verify your headings
Install the free HeadingMap browser extension. It shows your page's heading outline at a glance. If that outline doesn't make sense, it won't make sense to a screen reader user either.
Your Quick Wins Checklist
All five wins on one page — print this, share it, check things off.
1. Alt Text
- ☐ Decorative images use
alt="" - ☐ Informational images describe what the image communicates
- ☐ Top five pages audited and verified with a screen reader
2. Video & Captions
- ☐ All player controls reachable via Tab
- ☐ Play/pause works with Space and Enter
- ☐ Captions on by default
- ☐ Caption text reviewed and corrected (especially STEM content)
3. Color Contrast
- ☐ Buttons meet contrast ratios in all states (default, hover, focus, disabled)
- ☐ Form labels and placeholder text pass 4.5:1
- ☐ Error messages and links have non-color indicators
4. Focus Indicators
- ☐
:focus-visibleCSS rule added globally - ☐ Tab-tested on primary pages — every element shows a visible ring
- ☐ Modals and dropdowns tested for focus traps
5. Heading Hierarchy
- ☐ One H1 per page
- ☐ No skipped heading levels (H1 → H2 → H3)
- ☐ Styled divs replaced with actual heading elements
- ☐ HeadingMap extension check passed
These five fixes are just the start.
These quick wins will make a real, measurable difference for learners on your platform.
But accessibility is a spectrum, not a checkbox. Every platform has unique challenges — custom components, third-party integrations, authoring workflows — and that's where a professional evaluation comes in.
What comes next? Form error handling — quizzes, enrollment, and login flows where errors use color alone or clear student input on failure. It's one of the biggest remaining barriers in ed-tech, and exactly what my Essential Evaluation covers.
Want to assess your platform?
I offer a free Accessibility Scorecard — a focused expert review of one key page against 10 critical accessibility criteria. No commitment, no strings attached.
Get Your Free Scorecard →Your learners deserve a platform that works for all of them.
Let's make that happen.