PHPackages parvion/accessibility - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. parvion/accessibility ActiveLibrary[Utility & Helpers](/categories/utility) parvion/accessibility ===================== An enterprise-grade, zero-dependency, highly configurable accessibility toolbar for PHP applications. v1.0.3(2mo ago)216MITJavaScriptPHP ^8.1 Since May 17Pushed 2mo agoCompare [ Source](https://github.com/AnandKumar2002/accessibility)[ Packagist](https://packagist.org/packages/parvion/accessibility)[ RSS](/packages/parvion-accessibility/feed)WikiDiscussions main Synced 3w ago READMEChangelogDependencies (3)Versions (6)Used By (0) Parvion Accessibility ===================== [](#parvion-accessibility) [![PHP Version](https://camo.githubusercontent.com/119488a2741d93f203be891f27dcc4e80a88c70159923f85050f91a95178433d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253545382e312d383839324246)](https://php.net)[![Laravel](https://camo.githubusercontent.com/e6c348de52be9b1322cbd21a1f88fc446194890e4a720fa01507a04ba4d38a42/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c61726176656c2d31302532302537432532303131253230253743253230313225323025374325323031332d4646324432303f6c6f676f3d6c61726176656c266c6f676f436f6c6f723d7768697465)](https://laravel.com)[![License: MIT](https://camo.githubusercontent.com/1e64768fef09f35b66921728160f533208fd2e3e792a2755187d16c25d535511/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d3232633535652e737667)](LICENSE)[![Changelog](https://camo.githubusercontent.com/b1e1d00cef4334604482247128c2158554fef6e952f0ac2e6bae488607f5d246/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6368616e67656c6f672d4348414e47454c4f472e6d642d306561356539)](CHANGELOG.md)[![Contributing](https://camo.githubusercontent.com/91418e41d9135648e8186cb30a8a24f712560231ff9177bed5673f08a6ad2334/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f6e747269627574696e672d434f4e545249425554494e472e6d642d663539653062)](CONTRIBUTING.md) An enterprise-grade, zero-dependency, highly configurable accessibility toolbar for PHP applications. Provide your users with critical cognitive, visual, and motor accessibility tools instantly. Designed to integrate seamlessly into any PHP, Laravel, Vue, Livewire, or static HTML application with **zero build-time overhead**. --- ⚡ Features at a Glance ---------------------- [](#-features-at-a-glance) - **Zero Dependencies:** Pure Vanilla JS and scoped CSS. No Vue, React, Tailwind, NPM, or Vite required. - **Keyboard Shortcut System:** Every feature has a configurable keyboard shortcut with full modifier support (`alt`, `ctrl`, `shift`, `meta`). - **Tooltip Support:** Hovering any button shows the configured shortcut (e.g. `Alt+C`). - **State Persistence:** User preferences are automatically saved to `localStorage` across sessions. - **Dynamic Layouts:** Right Drawer, Left Drawer, Bottom Sheet, or Center Modal. - **Advanced Screen Reader:** Web Speech API integration with multi-voice support and language filtering. - **Cognitive Support:** Reading Masks, Calm Mode (Stop Animations), and Dyslexia Fonts. - **Visual Filters:** Mathematical SVG matrix filters for Protanopia, Deuteranopia, and Tritanopia color blindness. - **SPA Support:** Automatically re-initialises on `livewire:navigated` and `turbo:render` events. --- 🚀 Installation -------------- [](#-installation) ### Laravel (Recommended) [](#laravel-recommended) ``` composer require parvion/accessibility ``` Publish the configuration file: ``` php artisan vendor:publish --tag=accessibility-config ``` ### Standard PHP / Static HTML [](#standard-php--static-html) Download the assets from the `assets/` directory and host them on your server. See the **Static HTML Usage** section below. --- 🛠️ Usage -------- [](#️-usage) ### Blade Directive [](#blade-directive) Place `@accessibility` anywhere in your layout file (e.g. `resources/views/layouts/app.blade.php`): ``` {{-- Your content --}} @accessibility ``` The directive automatically injects the CSS, widget HTML, and deferred JavaScript via framework routes. ### Static HTML [](#static-html) Link the stylesheet in your `` and load the script with `defer`: ``` ``` Place the widget `` anywhere inside ``: ``` ``` --- ⚙️ Configuration ---------------- [](#️-configuration) All options live in `config/accessibility.php`. ### Colors [](#colors) Override the widget's CSS variables to match your brand: ``` 'colors' => [ 'primary' => '#00205b', // Header background, section labels 'hover-primary' => '#00143a', // Hover state for primary elements 'secondary' => '#ff7402', // Trigger button, active state, reset bar 'hover-secondary' => '#e06600', // Hover state for secondary elements 'background' => '#ffffff', // Panel background ], ``` ### Theme [](#theme) ``` 'theme' => 'default', // Options: 'default', 'dark', 'glass', 'minimal', 'neon', 'soft' ``` ### Position [](#position) ``` 'position' => 'bottom-right', // Options: 'bottom-right', 'bottom-left', 'top-right', 'top-left' // Set to false or 'inline' to render the button exactly where @accessibility is placed. ``` ### Store Settings [](#store-settings) ``` 'store_settings' => true, // Save user preferences to localStorage across page reloads ``` ### Panel Layout [](#panel-layout) ``` 'panel_layout' => 'right_drawer', // Options: 'right_drawer', 'left_drawer', 'bottom_sheet', 'center_modal' ``` - **`right_drawer` / `left_drawer`:** Slides in from the side. - **`bottom_sheet`:** Slides up from the bottom. Ideal for mobile. - **`center_modal`:** Fades in at the center with a backdrop. ### Theme Switcher [](#theme-switcher) ``` 'theme_switcher' => true, // Show theme selector UI inside the panel ``` --- ⌨️ Keyboard Shortcuts --------------------- [](#️-keyboard-shortcuts) Every feature supports a configurable keyboard shortcut. The engine reads all shortcuts from config — nothing is hardcoded in the JavaScript. ### Shortcut Config Shape [](#shortcut-config-shape) **Single-key features** (toggle on/off): ``` 'high_contrast' => [ 'enabled' => true, 'shortcuts' => [ 'enabled' => true, 'modifiers' => ['alt'], // 'ctrl', 'alt', 'shift', 'meta' — use an array for multiple 'key' => 'c', ], ], ``` **Directional features** (font size uses up/down keys): ``` 'font_size' => [ 'enabled' => true, 'shortcuts' => [ 'enabled' => true, 'modifiers' => ['alt'], 'keys' => [ 'up' => ']', // Alt+] increases font 'down' => '[', // Alt+[ decreases font ], ], ], ``` To **disable** a shortcut, set `'enabled' => false`: ``` 'skip_to_content' => [ 'enabled' => true, 'shortcuts' => ['enabled' => false], ], ``` ### Global Widget Shortcuts [](#global-widget-shortcuts) ``` 'global_shortcuts' => [ 'toggle_panel' => [ 'enabled' => true, 'modifiers' => ['alt'], 'key' => 'a', // Alt+A — open / close the panel ], 'reset_settings' => [ 'enabled' => true, 'modifiers' => ['alt'], 'key' => '0', // Alt+0 — reset all settings ], ], ``` ### Default Shortcut Reference [](#default-shortcut-reference) FeatureShortcutFeatureShortcut**Toggle Panel**`Alt+A`**Reset All**`Alt+0`**Font Size ↑**`Alt+]`**Font Size ↓**`Alt+[`**High Contrast**`Alt+C`**Grayscale**`Alt+G`**Invert Colors**`Alt+I`**Protanopia**`Alt+1`**Deuteranopia**`Alt+2`**Tritanopia**`Alt+3`**Dyslexia Font**`Alt+F`**Text Spacing**`Alt+S`**Line Height**`Alt+L`**Underline Links**`Alt+U`**Focus Mode**`Alt+M`**Reading Mask**`Alt+B`**Highlight Links**`Alt+H`**Big Cursor**`Alt+K`**Hide Images**`Alt+O`**Calm Mode**`Alt+Q`**Enhanced Focus**`Alt+E`**Read Page**`Alt+R`**Read Selected**`Alt+X`**Hover Speech**`Alt+W`**Stop Reading**`Alt+Z`**Voice Selector**`Alt+V`> **Note:** Shortcuts are skipped when focus is inside an ``, ``, or `` element. --- 🔊 Screen Reader & Voices ---------------------------- [](#-screen-reader--voices) ``` 'read_page' => ['enabled' => true, 'shortcuts' => ['enabled' => true, 'modifiers' => ['alt'], 'key' => 'r']], 'read_selected' => ['enabled' => true, 'shortcuts' => ['enabled' => true, 'modifiers' => ['alt'], 'key' => 'x']], 'hover_speech' => ['enabled' => true, 'shortcuts' => ['enabled' => true, 'modifiers' => ['alt'], 'key' => 'w']], 'stop_reading' => ['enabled' => true, 'shortcuts' => ['enabled' => true, 'modifiers' => ['alt'], 'key' => 'z']], 'voice_selector' => ['enabled' => true, 'shortcuts' => ['enabled' => true, 'modifiers' => ['alt'], 'key' => 'v']], 'voice_languages' => ['en'], // Filter voices by language. Empty array [] shows all voices. ``` --- 🎨 Custom CSS & Overrides ---------------------------- [](#-custom-css--overrides) The widget uses strictly scoped CSS. All classes are prefixed with `acc-`. Override anything in your own stylesheet: ``` /* Trigger button */ #accessibility-widget .acc-trigger { width: 60px !important; height: 60px !important; bottom: 30px !important; right: 30px !important; } /* Active feature button */ #accessibility-widget .acc-btn.is-active { background: #4f46e5 !important; border-color: #4f46e5 !important; } ``` ### Feature Body Classes [](#feature-body-classes) When a feature is active, a class is applied to `` (or `` for global filters). Use these to write custom overrides: ``` /* High Contrast customisation */ body.acc-high-contrast { background-color: #000 !important; } body.acc-high-contrast p { color: #ffcc00 !important; } /* Enhanced Focus Ring */ body.acc-enhanced-focus *:focus-visible { outline: 4px dashed #ff0000 !important; outline-offset: 4px !important; } ``` FeatureClass AppliedHigh Contrast`body.acc-high-contrast`Grayscale`html.acc-grayscale`Invert Colors`html.acc-invert`Protanopia`html.acc-cb-protanopia`Deuteranopia`html.acc-cb-deuteranopia`Tritanopia`html.acc-cb-tritanopia`Dyslexia Font`body.acc-dyslexia-font`Text Spacing`body.acc-text-spacing`Line Height`body.acc-line-height`Underline Links`body.acc-underline-links`Reading Mask`body.acc-reading-mask`Focus Mode`body.acc-focus-mode`Highlight Links`body.acc-highlight-links`Highlight Headings`body.acc-highlight-headings`Big Cursor`body.acc-big-cursor`Hide Images`body.acc-hide-images`Stop Animations`body.acc-stop-animations`Enhanced Focus`body.acc-enhanced-focus`--- 📋 Full Feature List ------------------- [](#-full-feature-list) FeatureCategoryDefault ShortcutDescription**Font Size**Text`Alt+]` / `Alt+[`Increase or decrease global text size dynamically.**High Contrast**Color`Alt+C`Dark background with bright yellow text for maximum readability.**Protanopia**Color`Alt+1`SVG matrix filter for red-blind color vision.**Deuteranopia**Color`Alt+2`SVG matrix filter for green-blind color vision.**Tritanopia**Color`Alt+3`SVG matrix filter for blue-blind color vision.**Grayscale**Color`Alt+G`Removes all colors, rendering the site in black and white.**Invert Colors**Color`Alt+I`Mathematically inverts all colors for light sensitivity.**Dyslexia Font**Text`Alt+F`Overrides fonts to a heavier, dyslexia-friendly typeface.**Text Spacing**Text`Alt+S`Increases letter and word tracking for easier reading.**Line Height**Text`Alt+L`Increases vertical spacing between lines.**Underline Links**Text`Alt+U`Forces underlines on all hyperlinks.**Skip to Content**Focus—Injects a skip link for keyboard navigation.**Focus Mode**Focus`Alt+M`Highlights the block-level element under the cursor.**Reading Mask**Focus`Alt+B`A horizontal window that follows the cursor, dimming the rest of the page.**Highlight Links**Focus`Alt+H`Places a high-contrast highlight behind all hyperlinks.**Highlight Headings**Focus—Places a high-contrast highlight behind all headings.**Big Cursor**Focus`Alt+K`Replaces the default cursor with a large, high-contrast pointer.**Hide Images**Focus`Alt+O`Hides all images and videos to reduce visual clutter.**Calm Mode**Focus`Alt+Q`Stops all CSS animations, transitions, and smooth scrolling.**Enhanced Focus**Focus`Alt+E`Renders a large, high-contrast outline on keyboard-focused elements.**Read Page**Speech`Alt+R`Reads the entire page text content aloud.**Read Selected**Speech`Alt+X`Reads any text the user highlights with their mouse.**Hover Speech**Speech`Alt+W`Reads any element the user hovers over.**Stop Reading**Speech`Alt+Z`Instantly halts any active text-to-speech.**Voice Selector**Speech`Alt+V`Shows a dropdown of available system voices.--- 📄 License --------- [](#-license) MIT License — see [LICENSE](LICENSE) for details. ### Health Score 39 — LowBetter than 84% of packages Maintenance87 Actively maintained with recent releases Popularity10 Limited adoption so far Community6 Small or concentrated contributor base Maturity46 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 4 Last Release 66d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/b84ce931c7243cd3a15fdb641abf1443a66fd4635b68470eed5df38d99d20359?d=identicon)[AnandKumar2002](/maintainers/AnandKumar2002) --- Top Contributors [![AnandKumar2002](https://avatars.githubusercontent.com/u/139989819?v=4)](https://github.com/AnandKumar2002 "AnandKumar2002 (7 commits)") --- Tags phpsymfonylaravelwordpressjavascripttoolbarhtmllivewirewidgetaccessibilitywcaga11yscreen readerWCAG 2.1vanilla-jsada-compliance ### Embed Badge ![Health badge](/badges/parvion-accessibility/health.svg) ``` [![Health](https://phpackages.com/badges/parvion-accessibility/health.svg)](https://phpackages.com/packages/parvion-accessibility) ``` ### Alternatives [psalm/plugin-laravel Psalm plugin for Laravel 3345.3M347](/packages/psalm-plugin-laravel)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9762.4M133](/packages/roots-acorn)[laravel/mcp Rapidly build MCP servers for your Laravel applications. 77922.3M186](/packages/laravel-mcp)[api-platform/laravel API Platform support for Laravel 58174.6k17](/packages/api-platform-laravel)[webcrafts-studio/lens-for-laravel A local-first WCAG accessibility auditor for Laravel with axe-core, source mapping, CI workflows, and optional AI fixes. 452.8k](/packages/webcrafts-studio-lens-for-laravel) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)