Cardona CT LabAI Tooling · Design & Accessibility CourseForge
CourseForge · Graded Hotspot · Interactive

Graded Hotspot: accessibility made visible

Answer by clicking a region, or press Tab to move between regions and Enter to select. Every region is a real focusable, labeled button. The panel below surfaces what a keyboard and screen-reader user experiences, so the Section 508 contract is something you can watch, not take on faith.

This mirrors CourseForge's shipped graded-hotspot runtime (focusable regions, fixed attempts, a tiered hint, an off-target catcher, and aria-live feedback). The real block is authored and scored inside the private CourseForge. Back to the CourseForge whitepaper.

What a keyboard and screen-reader user experiences

Nothing focused yet. Press Tab to enter the image.

Live announcements (aria-live)

  • Ready.

The 508 contract

Keyboard operable Focus visible Regions are <button> aria-live feedback Off-target = a miss

Select the portafilter: the handle and basket that lock into the group head.

Side profile of a home espresso machine showing the portafilter, group head, steam wand, drip tray, and reservoir
Not answered