skills.rest
Fivents
FiventsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

accessibility-totem

Improve event check-in totem accessibility with WCAG AA contrast and ARIA live regions.

Updated Feb 16, 2026
Search Tags:#accessibility#a11y#wcag#aria#touch targets#kiosk#totem
One-click install
npx skills add https://github.com/Fivents/one-id --skill accessibility-totem
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-totem
Source: https://github.com/Fivents/one-id/tree/main/.claude/skills/accessibility-totem
Command: npx skills add https://github.com/Fivents/one-id --skill accessibility-totem

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about accessibility-totem

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make event kiosk check-ins accessible for wheelchair users and visually impaired attendees?▼

Ensure your totem UI uses 64x64px+ touch targets for motor accessibility, WCAG AA contrast ratios (4.5:1 text, 3:1 UI components), and visible focus indicators. Combine color with icons or text for status communication so users with color-vision differences can navigate face, QR, and code-based check-ins independently.

How do I implement accessible ARIA live regions for a self-service check-in kiosk?▼

Implement accessible ARIA live regions by using role=status for camera readiness, aria-busy for loading states, aria-invalid with role=alert for check-in errors, and role=progressbar for processing. These patterns ensure screen readers announce dynamic totem updates during face, QR, and code-based check-ins.

What WCAG AA contrast and touch target standards apply to public totem interfaces?▼

WCAG AA standards for public totems require 4.5:1 contrast for normal text and 3:1 for large text or UI components. Touch targets must be at least 48x48px minimum, with 64x64px or larger preferred, and include generous spacing to accommodate motor impairments in time-constrained check-in environments.

Can I use prefers-reduced-motion to stop auto-animating content on a time-constrained check-in kiosk?▼

Yes, you can and should respect prefers-reduced-motion to avoid mandatory auto-animating content on check-in kiosks. Additionally, provide countdown announcements and allow users to extend time before auto-returning to the menu, preventing abrupt timeouts for users with cognitive or motor impairments.

What is included in an accessibility testing checklist for event check-in totems?▼

An accessibility testing checklist for event check-in totems includes keyboard-only navigation verification, focus style checks, contrast checks, screen reader announcement testing, scalable text review, reduced-motion behavior confirmation, and touch target verification to ensure the kiosk interface is usable by people with visual, motor, and cognitive impairments.

Related Skills

Explore More Design & Creative Skills→
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-accessibility

Analyze web UI structure, semantics, and ARIA usage for accessibility gaps.

Community
Advanced
andrewle9510andrewle9510

fd-accessibility

Audit web interfaces for WCAG 2.1 AA compliance.

Community
Advanced
rsmdtrsmdt
381

accessibility-standards

Apply WCAG 2.1 AA accessible design patterns to digital interfaces.

Community
Advanced
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate