Interface Overview
Explore the TabDSP interface interactively. Click any highlighted region to learn what it does. Click again to deselect.
Keyboard Accessibility
TabDSP is fully keyboard-navigable with ARIA support for screen readers. All interactive controls can be operated without a mouse.
Knob and Slider Controls
All rotary knobs (Input Gain, Master Gain, EQ band Frequency/Gain/Q) and range sliders (Compressor, Limiter parameters) support keyboard control:
| Key | Action |
|---|---|
Arrow Up / Arrow Right |
Increase value by 1 step (+0.5 dB for gain knobs) |
Arrow Down / Arrow Left |
Decrease value by 1 step |
Page Up |
Large increase (+3 dB) |
Page Down |
Large decrease (-3 dB) |
Home |
Set to minimum value |
End |
Set to maximum value |
Toggle and Button Controls
| Key | Action |
|---|---|
Enter / Space |
Toggle bypass buttons, open/close popovers, activate buttons |
Tab |
Move focus to next interactive element |
Shift + Tab |
Move focus to previous interactive element |
Module Reordering
Each draggable module (EQ, MB, COMP) has "Move Left" and "Move Right" buttons that appear on focus. These buttons announce the new module position via a live region for screen readers.
Keyboard Shortcuts
| Key | Action |
|---|---|
Tab / Shift+Tab |
Cycle through modules |
A |
A/B comparison toggle |
E |
Bypass EQ |
M |
Bypass Multiband |
D |
Bypass Compressor (Dynamics) |
L |
Bypass Limiter |
1-8 |
Select EQ band (when EQ is active) |
Ctrl+Z |
Undo |
Ctrl+Y |
Redo |
Screen Reader Support
All interactive controls have appropriate ARIA roles and labels:
- Knobs:
role="slider"witharia-valuemin,aria-valuemax,aria-valuenow, andaria-label - Bypass buttons:
role="switch"witharia-checkedreflecting bypass state - Meters:
role="meter"with throttled updates at 1Hz (separate from the 60fps visual loop to avoid screen reader overload) - Module blocks: Dynamic
aria-labelreflecting bypass state (e.g., "EQ module, active" or "Multiband module, bypassed") - Confirm dialogs:
role="alertdialog"with Tab focus trap and focus restoration on close
▶ Gear Head Details: ARIA Implementation
TabDSP implements WCAG 2.1 AA accessibility. Key architectural decisions:
- Meter ARIA updates at 1Hz: A dedicated
setIntervalupdates meteraria-valuenowattributes once per second, separate from the 60fps visual render loop. This prevents screen readers from being flooded with value changes. - Module blocks survive DOM rebuilds: When modules are reordered, the DOM elements are moved (not recreated), so directly-attached keyboard listeners persist without re-registration.
- Floating panel focus management: When an EQ band or multiband floating panel opens, focus is moved to the panel. When closed, focus returns to the trigger element.
- Live region announcements: Module reorder buttons trigger
aria-live="polite"announcements (e.g., "EQ moved to position 2").
Display Modes
TabDSP can be viewed in three modes, accessible via the buttons in the header bar:
Popup
The default view when you click the TabDSP icon in the toolbar. Compact and focused on the current tab. Closes when you click elsewhere. Always targets the active tab.
Sidebar
Docks TabDSP in the browser's side panel for persistent access alongside web content. On Firefox, access via the sidebar button or View > Sidebar > Tab DSP. On Chrome, access via the side panel button or the TabDSP header.
The sidebar targets a specific tab. When you open it from the popup or context menu, it automatically targets that tab. If you switch targets (via popup "Open in Sidebar" or context menu), the sidebar re-initializes for the new tab.
Standalone Window
Opens TabDSP in a resizable, independent window. Useful for multi-monitor setups or when you want the full interface without giving up page real estate. The standalone window automatically closes when its target tab is closed and reloads when the target tab navigates.
Background Tab Behavior
When the tab being processed is in the background (you've switched to a different tab), the sidebar and standalone window show a "Visualization Paused" notification overlay. This happens because browsers stop animation frames in background tabs.
- Audio processing is unaffected — DSP continues running normally in background tabs
- Meters and spectrum stop updating — visual data stops flowing until the target tab is in the foreground
- Automatic resume — visuals resume immediately when you switch back to the target tab
If the target tab is closed, the sidebar shows a "Target Tab Closed" message and automatically retargets to the newly active tab after a short delay.