TeachKit project

TeachKit / Design system

Documentation v0.1 · Released product

Design system contents

Accessibility and content

Keyboard, state and accessible naming

Document source evidence and explicit gaps instead of assuming that visually finished controls are accessible.

On this page

Source evidence

Source evidence
InterfaceImplementedRemaining work
ActionChecklistNative button and local stateButton name and pressed/checked semantics
ToggleFieldHeadless UI SwitchComplete label/description and disabled verification
SidebarNavDropdownHeadless UI ListboxKeyboard traversal, focus return and routing context
CourseCardNamed progressbar and native linksTouch edit discovery, long text and completion announcements
CourseInformationTabsOrdinary buttons and conditional panelSelection semantics and consistent keyboard model
CompletionBarVisible numeric textProgressbar semantics and zero-total guard
FormFieldNative input and focus treatmentError/descriptions, clipboard rejection and announcements
SaveButtonDisabled busy labelFailure recovery and live status
SortingPointer sensors and dnd-kit attributesKeyboard/non-drag equivalent and persistence failure
Provider mediaIframe and aspect wrapperTitle, captions, keyboard entry/exit and provider accessibility

Manual protocol

  • Use keyboard only to reach and operate every control, including phone menus and rich editor toolbar.
  • Check role, name, current/checked/selected state and focus in the accessibility tree.
  • Test 200% zoom and narrow layouts without hiding error or action text.
  • Test a screen reader with actual lesson context, progress changes and failure messages.
  • Test reduced motion and timing-sensitive copy/feedback states. Record browser and assistive technology; do not infer a pass from static code.

Examples from the app

Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.

Fields · Component detail · Light · Desktop · 1920 × 866 px
Fields · Component detail · Light · Desktop · Focus · 1920 × 922 px
Sidebar Menu · Component detail · Light · Desktop · 832 × 218 px
Sidebar Menu · Component detail · Light · Desktop · Open · 832 × 468 px

Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1