VelinStyle
Accessibility Dashboard
An interactive playground to inspect ARIA attributes, visualize keyboard navigation, check contrast ratios, preview screen reader announcements, and simulate user preference media queries.
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.
Hover or focus an element on the left to inspect it.
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.
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 |
|---|---|---|---|
btn btn-primary |
button |
"Save, button" | Enter / Space |
btn btn-link |
link (when <a>) |
"Learn more, link" | Enter |
form-control |
textbox |
"Email, edit text, required" | Type to input |
form-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