ngx-a11y-panel
v0.0.3
Published
Floating accessibility panel for Angular (standalone, no Tailwind, no CDK).
Readme
ngx-a11y-panel
Floating accessibility panel for Angular (standalone, no Tailwind, no CDK).
✔ Floating icon → open panel
✔ Focus trap (keyboard stays inside the panel)
✔ Keyboard navigation (Arrow keys + Tab loop)
✔ Shortcut: Ctrl / Cmd + U
✔ Pure CSS (no Tailwind, no UI framework)
✔ Lightweight & safe for npm distribution
✔ Works well for micro-frontend / iframe scenarios
✨ Features
- Text size increase / decrease
- High contrast
- Saturation control
- Hide images
- Text spacing
- Line height
- Dyslexia-friendly font switch
- Pause animations
- Underline links
- Large cursor
- Text-to-speech (selected text)
- Floating accessibility button
- Keyboard friendly panel
📦 Installation
npm install ngx-a11y-panel⚙️ Requirements
- Angular 20+
- Standalone components enabled
No other dependency is required.
🚀 Usage
1. Import global accessibility styles
Add this line to your global stylesheet (for example src/styles.css):
@import "ngx-a11y-panel/styles/a11y.css";2. Place the panel component in your root layout
import { Component } from '@angular/core';
import { AccessibilityPanelComponent } from 'ngx-a11y-panel';
@Component({
selector: 'app-root',
standalone: true,
imports: [AccessibilityPanelComponent],
template: `
<router-outlet></router-outlet>
<ng-a11y-panel />
`
})
export class AppComponent {}⌨️ Keyboard & Shortcuts
Action Key
Open / close panel Ctrl + U (Cmd + U on macOS) Close panel Esc Move between buttons Arrow keys Tab navigation loop Tab / Shift + Tab
🧠 How it works
The panel only toggles CSS classes on the <html> element and controls:
--a11y-font-scale🎨 Styling
Override from your global CSS:
.a11y-panel { border-radius: 16px; }
.a11y-fab { background: #111827; }🧩 Available global CSS classes
.a11y-contrast
.a11y-saturation
.a11y-hide-images
.a11y-text-spacing
.a11y-line-height
.a11y-dyslexia
.a11y-no-anim
.a11y-big-cursor
.a11y-underline
🔊 Text to Speech
Uses native Web Speech API.
🗂 Persistence
State is stored in localStorage.
🌐 Micro-frontend & iframe safe
Only affects current document.
🖥️ SSR
Works with Angular Universal.
📜 Lisensi
MIT © [EkaH]