Reimagining Graphs at Khan Academy

Adding accessibility to a legacy experience is never easy. At Khan Academy, however, it was essential to make our graphs accessible for algebra, geometry, and more. Join us as we share how we reimagined our graphs and explore practical steps you can apply to your own architecture.

Transcript

1. Reimagining Graphing at Khan Academy
2. Who we are Mark Fitzgerald, WAS Senior Software Engineer Jeanette Head Engineering Manager, Accessibility Architect Nisha Yerunkar Senior Software Engineer Cat Johnson, CPWA Senior Software Engineer
3. Our mission is to provide a free, world‑class education for anyone, anywhere.
4. Reimagining?
5. • Procured our first ACR in 2025 • Track WCAG conformance as a key outcome for our products • Built up internal expertise by hiring designers and engineers with deep a11y expertise What’s been happening with accessibility at Khan Academy?
7. Interactive Graph
8. Content Creators Learners Indicate all points that represent the solution of f(x) = 0 by placing points in those locations.
9. • Gathered and shared data about how accessibility impacted our sales numbers • Connected this work to a larger project • Built excitement about our vision of a more accessible experience How did we get this prioritized?
10. My philosophy Whether you're plotting points, drawing lines, or exploring quadratic curves, I make math visual, hands-on and fun. About Me • Created in 2013 • Popular in middle school math, algebra and geometry content • Supports 10 main types of graphing Fun fact I have over 2000 unique configurations Interactive Graph Profile
11. Linear function Quadratic function Sinusoid function Circle Point(s) Linear System Polygon Ray Line Segment Angle
12. times per minute ~200
13. Where does this leave us? • Inaccessible • Legacy • Complex • High usage !
14. Graphs, Reimagined
15. Visual Enhancements
16. Color Before After Color Contrast 1.6:1 Contrast 5:1
17. Focus Outline After Before- NONE!
18. Keyboard Interaction
19. Mouse interaction
20. Keyboard interaction Mouse interaction
21. Keyboard interaction
22. DOM Order Last 1st Tab #1 Tab #2 Tab #3 Controls Front Back Visual Order SVG Focus element Display element Keyboard interaction
23. Screen Reader Experience
25. Interactive elements Non-interactive elements
29. Our Graphs Today
31. Results Decrease in skip rates 2% Increase in correct answers 6% Increase in graph use 67% Research sessions completed 3
32. “I can draw shapes!” “It was really easy to interact with it, and I could do all the same things that a mouse user could do.” — Research Participants
33. But… the work continues.
34. • Sonification • Live regions for dynamic, real-time feedback • Improved screen reader instructions • Expanded graph types • And more! Future improvements
35. How to Reimagine your Legacy Experience
36. Consider accessibility throughout your project lifecycle Discover Design Build Test Measure
38. Practice experiences with accessibility features Frequency of users accessing accessible practice experiences Use data to maximize impact 8% 36% 38% 90%
39. (That’s a 54% increase in just two years) 90%
40. How can you apply this to your organization?
41. Invest in your Algebra 1
42. Q&A