Title here
Summary here
Accessibility Widget
Add a floating accessibility widget that lets visitors customize their viewing experience. Users can adjust font size, enable high contrast mode, increase spacing, and more — all without you needing to build accessibility features from scratch.
Use Cases
- Help users with visual impairments read your content comfortably
- Provide dyslexia-friendly font options for better readability
- Offer dark mode and high contrast options for light-sensitive visitors
- Demonstrate your commitment to inclusive, accessible web design
- Improve WCAG compliance with user-controlled accessibility options
How It Works
- Enable the module and configure basic settings
- A floating button appears on your site (default: bottom-right)
- Visitors click to open the accessibility panel
- They adjust settings to their preferences
- Settings are saved and restored on future visits
Where to Find It
Location: Configure in Switchboard settings. The widget appears as a floating button on all frontend pages.
Available Features
The widget provides these accessibility controls to your visitors:
Font Size
| Option | Effect |
|---|---|
| Small | 14px body text |
| Normal | 16px body text (default) |
| Large | 18px body text |
| X-Large | 22px body text |
All text scales proportionally, including headings.
Line Height
| Option | Line Spacing |
|---|---|
| Normal | 1.5 (default) |
| Medium | 1.8 |
| Large | 2.2 |
Increases space between lines for easier reading.
Letter Spacing
| Option | Spacing |
|---|---|
| Normal | Default |
| Wide | 0.05em |
| Wider | 0.1em |
Helps users who benefit from more space between letters.
Color Schemes
| Scheme | Description |
|---|---|
| Normal | Your site’s default colors |
| Dark Mode | Dark background, light text |
| High Contrast | Black background, white text, yellow links |
| Grayscale | Removes all color (monochrome) |
Additional Options
| Feature | Description |
|---|---|
| Readable Font | Switches to dyslexia-friendly fonts |
| Underline Links | Underlines all links for visibility |
| Highlight Links | Highlights links on hover |
| Hide Images | Removes images for text-only view |
Cursor Size
| Option | Cursor Size |
|---|---|
| Normal | Default system cursor |
| Large | 32px custom cursor |
| X-Large | 48px custom cursor |
Text Alignment
| Option | Effect |
|---|---|
| Left | Align all text left |
| Center | Center all text |
| Right | Align all text right |
| Justify | Justify all paragraphs |
Settings
| Setting | Default | Description |
|---|---|---|
| Display Widget | Yes | Show/hide the widget |
| Position | Bottom Right | Widget button location |
| Button Text | “Accessibility” | Text shown on the button |
| Widget Title | “Accessibility Options” | Panel header title |
| Primary Color | #2271b1 | Button and accent color |
| Custom CSS | Empty | Additional styling |
Position Options
| Position | Best For |
|---|---|
| Bottom Right | Most sites (recommended) |
| Bottom Left | If right side is busy |
| Top Right | If footer has elements |
| Top Left | Alternative placement |
Persistence
User preferences are saved in browser localStorage and automatically restored on future visits. Settings persist across:
- Page navigation
- Browser sessions
- Device (per browser)
Keyboard Accessibility
The widget itself is keyboard accessible:
- Tab: Navigate between controls
- Enter/Space: Activate buttons
- Escape: Close the panel
FAQ
Will this break my site’s design?
The accessibility features are carefully designed to work with any theme. They modify specific properties (font size, colors) while preserving your layout.Does the widget itself get affected by the settings?
No, the widget is specifically excluded from all transformations so it remains readable and usable regardless of what settings the user chooses.Is this enough for WCAG compliance?
This widget helps with WCAG compliance but isn’t a complete solution. Full compliance requires proper semantic HTML, alt text, color contrast in your base design, and more.Can I customize which features are shown?
Currently, all features are shown. You can use Custom CSS to hide specific sections if needed.Does this affect mobile users?
Yes, the widget works on mobile devices. It’s fully responsive and touch-friendly.What if my theme already has dark mode?
Users can use either. The widget’s dark mode works independently of theme features.Position the widget where it won’t conflict with other floating elements like chat widgets or cookie banners. Bottom-right is standard but adjust as needed.
This widget demonstrates accessibility commitment but shouldn’t replace fundamental accessible design practices. Ensure your base theme has good color contrast, semantic HTML, and proper alt text.
PRO
Upgrade to Pro
Get access to all 147 modules with a single license