Kristi's Ed Tech Projects

✅ What's Working Now

Both sites have improved significantly:

• Full navigation — All 7-8 sections accessible
• Dark/light mode — Proctoring has theme toggle
• Interactive calculator — Cost estimation works
• localStorage checklist — Caption compliance saves state
• Print styles — Both are print-friendly
• Research citations — Frontiers in Education, MIT Tech Review
• Countdown timer — April 24, 2026 deadline visible

🔍 Proctoring — Colony Breakdown

Grove leads at 95 — Outstanding research with academic citations. Flow and Crystal need work — Keyboard accessibility gaps.

📝 Caption Compliance — Colony Breakdown

Beacon leads at 92 — Excellent step-by-step guidance structure. Forge strong at 88 — localStorage, print styles, clean code.

🔧 Remaining Fixes for 90+

📋 Copy-Paste Fixes

1. Focus States (CSS)

:focus-visible {
    outline: 2px solid #4ECDC4;
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible {
    border-radius: 4px;
}

2. Skip Link (HTML + CSS)

<!-- Add as first child of body -->
<a href="#main" class="skip-link">Skip to content</a>

<style>
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #4ECDC4;
    color: #000;
    padding: 8px 16px;
    z-index: 9999;
    font-weight: 600;
}
.skip-link:focus { top: 0; }
</style>

3. Keyboard Accordion (JS)

// Add to each FAQ button
button.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        toggleFaq(item);
    }
});

// Add ARIA attributes
button.setAttribute('aria-expanded', 'false');
button.setAttribute('aria-controls', `faq-${index}`);