Skip to main content
VelinStyle v1.3.0
  1. Docs
  2. Accessibility
  3. A11y Dashboard

Accessibility Dashboard demo

An interactive playground to inspect ARIA attributes, visualize keyboard navigation, check contrast ratios, preview screen reader announcements, and simulate user preference media queries. Deutsch: A11y Dashboard

Demo tooling: Use for teaching and exploration — not as CI evidence or WCAG certification. For contracts and matrix see Accessibility and npm run test:a11y:coverage.

When to use

When not

ARIA Inspector

Hover over or focus any element in the left panel. The right panel displays its tag name, ARIA role, all aria-* attributes, tabindex, and accessible name in real time.

Help Link Opens help documentation
⚠ Alert region

Hover or focus an element on the left to inspect it.

Keyboard Navigation Visualizer

Click Start Tour, then press Tab to step through the interactive components below. Each focusable element is numbered to show the tab order.

Button
Dropdown
Tabs
Accordion

Contrast Checker

Pick a foreground and background color to calculate the WCAG contrast ratio. Results show pass/fail for AA and AAA at normal and large text sizes.

The quick brown fox jumps over the lazy dog
Contrast ratio: — : 1
AA Normal: — AA Large: — AAA Normal: — AAA Large: —

Screen Reader Preview

A reference of how VelinStyle components are announced by screen readers, including their ARIA roles and expected keyboard shortcuts.

Component ARIA Role Announced As Keyboard Shortcut
velin-btn velin-btn--primary button "Save, button" Enter / Space
velin-btn velin-btn--ghost link (when <a>) "Learn more, link" Enter
velin-input textbox "Email, edit text, required" Type to input
velin-select combobox / listbox "Country, combo box, collapsed" Alt+↓ to open, ↑↓ to navigate
form-check-input checkbox "Accept terms, checkbox, not checked" Space to toggle
accordion-button button with aria-expanded "Section 1, collapsed, button" Enter / Space
nav-link (tab) tab "Settings, tab, selected, 2 of 4" ←→ between tabs, Enter to activate
dropdown-toggle button with aria-haspopup "Actions, menu button, collapsed" Enter / Space / ↓ to open
dropdown-item menuitem "Edit, menu item" ↑↓ to navigate, Enter to select
modal dialog "Confirm delete, dialog" Esc to close, Tab trapped inside
alert alert "Success! File saved, alert" Announced automatically
progress progressbar "Progress, 65%" N/A (read-only)
toast status / alert "Notification: item added, status" Announced via live region
breadcrumb navigation (aria-label="Breadcrumb") "Breadcrumb, navigation" Standard link navigation

User Preferences Demo

Toggle the switches below to simulate CSS media-query-based user preferences. The demo container updates in real time to show how VelinStyle components respond.

Animation

Transparency

This panel uses a semi-transparent background. Enabling reduced transparency increases opacity for readability.

Components

Badge Warning