a11y_widget
WHAT IS IT?
A11y Widget is a Drupal module that adds an accessibility toolbar to your
website. It helps users with disabilities customize their viewing experience
for better content access.
MAIN FEATURES
1. Visual Adjustments
- Invert Colors: Reverse all colors for better contrast
- Grayscale: Convert page to black and white
- Saturation: Adjust color intensity (low/high)
- Contrast: Multiple contrast levels for readability
2. Text Enhancements
- Font Size: 3 size options (small, medium, large)
- Line Height: Adjust spacing between lines
- Letter Spacing: Increase character spacing
- Text Alignment: Switch between left, center, right
3. Link Highlighting
- 3 different highlight styles for links
- Makes links more visible and easier to click
4. Content Control
- Hide Images: Remove all images to reduce clutter
HOW IT WORKS
1. A floating button appears on your website (left or right side)
2. Users click the button to open the accessibility panel
3. Users select features they need by clicking icons
4. Changes apply instantly to the page
5. Users can save their preferences (stored in browser cookies)
6. Settings persist across page reloads and visits
INSTALLATION
1. Place the module in: web/modules/a11y_widget
2. Enable the module: drush en a11y_widget -y
3. Add the block: Go to Structure > Block Layout
4. Place "A11y Widget block" in your desired region
5. Configure settings: Admin > Configuration > User Interface > Accessibility widget
ADMIN CONFIGURATION
Navigate to: /admin/config/user-interface/a11y_widget_settings
You can:
- Choose widget position (Left or Right side)
- Enable/disable individual features
- Control which accessibility tools are available
PERMISSIONS
One permission available:
- "Administer A11y Widget settings": Access to configuration page
USER EXPERIENCE
- Buttons show with dark background when active
- Progress bars indicate level selections
- Save button: Stores preferences in cookies (365 days)
- Reset button: Clears all settings and preferences
- Both buttons close the widget after action
TECHNICAL DETAILS
- Compatible with: Drupal 8, 9, and 10
- Uses browser cookies for preference storage
- High z-index (999999) ensures always visible
- No page reload required for changes
- Works in all modern browsers
ACCESSIBILITY STANDARDS
Helps meet:
- WCAG 2.1 Level AA compliance
- Section 508 standards
- ADA web accessibility guidelines
SUPPORT
For issues or questions, contact your site administrator or check the module
documentation in the README.md file.