Accessibility
The QuickBox Pro dashboard is built to be usable with a keyboard, a screen reader, and a range of visual and motion preferences. This page summarizes the accessibility support you can rely on across the interface — what works with the keyboard, how the dashboard reads to assistive technology, and the settings it honors from your operating system and browser.
For the story behind these improvements — why they matter and how the dashboard was audited against them — read the companion article, A more accessible QuickBox Pro . This page is the reference; the article is the narrative.
What’s covered
Readable contrast
Text across the dashboard meets the WCAG 2.1 AA contrast minimum on every theme
Full keyboard support
Every interactive element is reachable and operable with the keyboard alone
Visible focus
A clear focus ring shows exactly where you are as you tab through the page
Named controls
Icon-only buttons carry accessible names so screen readers announce their purpose
Safer confirmations
Destructive dialogs open focused on Cancel, so pressing Enter never fires a delete
Reduced motion
Animations are disabled automatically when your system requests reduced motion
Color contrast
Text throughout the dashboard meets the WCAG 2.1 AA contrast minimum (4.5:1 for normal text) on every theme. This was applied comprehensively, including the places low-contrast text most often hides:
- Secondary and muted text — field labels, column headers, captions, timestamps, counts, and empty-state messages.
- Form field placeholder text.
- Danger and error text — validation messages, “failed to load” notices, and danger-zone labels.
- Link and accent text, including active tab and pill labels.
- Brand and primary-colored text.
Each theme was measured against the AA formula and tuned so readable text clears the bar rather than relying on color alone.
Whichever theme you prefer, readable text is tuned to remain legible. Purely decorative elements — icon glyphs paired with a visible label, spinners, separators — follow the non-text contrast guidance instead, which is the correct standard for those.
Keyboard navigation
You can operate the entire dashboard without a mouse.
- Tab order follows the visual reading order of the page.
- A skip-to-content link appears when you first press Tab, letting you jump straight past the sidebar and top bar into the main content.
- Esc consistently closes overlays — dialogs, popovers, side panels, dropdowns, and tooltips.
- Enter and Space activate buttons and toggles.
- The command palette opens with Ctrl+K (or Cmd+K on macOS); arrow keys move through results and Enter opens the selected one.
Settings sections — including their headers and master on/off toggles — are keyboard-operable, so you can expand a section and flip its switch entirely from the keyboard.
Visible focus
Every interactive element shows a clear focus ring when it receives keyboard focus, so you always know where you are. This includes controls that are easy to overlook, such as the close buttons on dialogs and popovers.
Screen reader support
The dashboard uses established ARIA patterns so assistive technology can announce structure and state:
- Dialogs are announced as modal dialogs with their title, trap focus while open, and restore focus when closed.
- Popovers and side panels announce their role, trap focus in modal mode, and return focus to the control that opened them.
- The sidebar is a labeled navigation landmark; its toggle announces whether navigation is expanded or collapsed, and collapsible groups announce their expanded state.
- Icon-only controls — rename, remove, close, copy, and similar buttons that show only an icon — carry accessible names, so a screen reader announces what each one does rather than reading nothing.
- Live regions announce dynamic changes such as toasts, system status, streaming connection state, and form validation, without moving your focus.
Safer destructive actions
Confirmation dialogs for destructive actions — removing an app, deleting a user, and similar — open with focus on the Cancel button by default. That means pressing Enter the instant a confirm dialog appears cannot accidentally trigger the destructive action; it dismisses safely instead. To proceed, you deliberately move to and activate the confirm button.
This is intentional friction on irreversible actions. The confirm button is always reachable — it simply is not the default target, so a stray key press defaults to safety.
Reduced motion
If your operating system or browser is set to reduce motion (prefers-reduced-motion), the dashboard honors it automatically. Entrance animations, spinners’ motion, hover transforms, hero cross-fades, and scroll-snap behavior fall back to static or instant equivalents. Nothing is hidden — the same content and controls are present, without the movement.
Best practices
Do
- Press Tab on first load to reveal the skip-to-content link
- Use Esc to close any overlay quickly
- Enable your system's reduced-motion setting if animations bother you — the dashboard follows it
- Rely on the visible focus ring to track your position when navigating by keyboard
- Pick whichever theme you prefer — readable text stays AA-compliant on all of them
Don't
- Do not assume Enter confirms a destructive dialog — it defaults to Cancel on purpose
- Do not disable focus outlines in a custom browser style — they are your keyboard position indicator
- Do not rely on color alone to interpret status — labels and icons carry the meaning too
FAQ
Related references
Need help?
Join the Community
Media server operators sharing configs, getting support, and shaping the future of QuickBox Pro.