parvion/laravel-accessibility 问题修复 & 功能扩展

解决BUG、新增功能、兼容多环境部署,快速响应你的开发需求

邮箱:yvsm@zunyunkeji.com | QQ:316430983 | 微信:yvsm316

parvion/laravel-accessibility

最新稳定版本:v1.1.0

Composer 安装命令:

composer require parvion/laravel-accessibility

包简介

A customizable floating accessibility toolbar for web projects with font size control, high contrast mode, dyslexia support, and more.

README 文档

README

Packagist License PHP Version

A floating accessibility toolbar for Laravel. Helps users adjust font size, colors, and use screen reader. No external dependencies - uses inline SVG icons.

Quick Start

composer require parvion/laravel-accessibility

Add this in your layout:

<div id="accessibility-toolbar"></div>

Done! 🎉

Features

Category Features
Font Font Size, Dyslexia Font, Text Spacing, Line Height
Colors High Contrast, Grayscale, Invert Colors
Content Highlight Links, Highlight Headings, Big Cursor, Hide Images
Screen Reader Read Page, Read Selected, Hover Speech, Stop

Requirements

  • PHP ^7.4 or ^8.0+
  • Laravel 8.0+

Installation

composer require parvion/laravel-accessibility

That's it! The package auto-injects CSS and JS when it finds the div.

Usage

Add this empty div where you want the toolbar to appear:

<div id="accessibility-toolbar"></div>

The package automatically handles everything.

Customization (Optional)

Want to change colors or disable features?

Step 1: Publish Config

php artisan vendor:publish --provider="Parvion\LaravelAccessibility\AccessibilityServiceProvider" --tag=accessibility-config

Step 2: Edit Config

Edit config/accessibility.php:

<?php

return [
    // Customize toolbar colors
    'colors' => [
        'primary' => '#00205b',    // Header color
        'secondary' => '#ff7402',  // Button color
        'background' => '#ffffff', // Panel background
    ],

    // Enable/disable features
    'features' => [
        'font_size' => true,
        'high_contrast' => true,
        'grayscale' => true,
        'invert_colors' => true,
        'dyslexia_font' => true,
        'text_spacing' => true,
        'line_height' => true,
        'underline_links' => true,
        'highlight_links' => true,
        'highlight_headings' => true,
        'big_cursor' => true,
        'hide_images' => true,
        'screen_reader' => true,
    ],
];

How It Works

  1. Add <div id="accessibility-toolbar"></div> in your layout
  2. Middleware detects the div and injects:
    • CSS in <head>
    • JavaScript before </body>
  3. JavaScript renders the toolbar with all features

License

MIT License

统计信息

  • 总下载量: 0
  • 月度下载量: 0
  • 日度下载量: 0
  • 收藏数: 0
  • 点击次数: 19
  • 依赖项目数: 0
  • 推荐数: 0

GitHub 信息

  • Stars: 0
  • Watchers: 0
  • Forks: 0
  • 开发语言: JavaScript

其他信息

  • 授权协议: MIT
  • 更新时间: 2026-05-14