accessibility-totem

What problem does it solve?

Makes event check-in totems usable for people with visual, motor, cognitive, and color-vision differences by addressing small touch targets, poor color contrast, missing focus indicators, inaccessible ARIA usage, and exclusionary timeout behaviors.

Core Features & Use Cases

• Touch target guidance: recommend minimum interactive sizes (48x48px minimum, 64x64px+ preferred) and generous spacing for motor accessibility.
• Color and contrast rules: enforce WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text and UI components) and combine color with icons/text for status.
• Focus and semantics: encourage visible focus indicators, semantic HTML elements for interactive controls, and skip links for navigation.
• ARIA patterns and feedback: use aria-live regions for status, role=status for camera readiness, aria-busy for loading, aria-invalid and role=alert for errors, and role=progressbar for progress.
• Motion and reduced-motion support: respect prefers-reduced-motion and avoid mandatory auto-animating content.
• Timeout and extensibility: provide countdown announcements, allow users to extend time, and avoid abrupt returns to the menu.
• Testing checklist: keyboard-only navigation, focus styles, contrast checks, screen reader announcements, scalable text, reduced-motion behavior, and touch target verification.

Quick Start

Ensure the totem UI uses 64x64+ touch targets, WCAG AA contrast, visible focus indicators, ARIA live regions for status updates, and a visible option to extend time before auto-returning.