Example 1: Basic Usage
The accessibility widget is already active on this page. Look for the floating button in the bottom-left corner, or press Alt + A to open it.
Sample Content to Test
This is sample text that you can use to test the accessibility features. Try adjusting the font size, line height, letter spacing, and word spacing to see how this text changes.
You can also try highlighting links like this one or enabling high contrast mode to improve readability.
<!-- Add to your <head> -->
<link rel="stylesheet" href="styles/accessibility-widget.css" />
<!-- Add before </body> -->
<script src="javascript/accessibility-widget.js"></script>
<!-- That's it! The widget auto-initializes -->Example 2: Programmatic Control
Use the JavaScript API to control the widget programmatically:
// Open the accessibility panel
RSL.AccessibilityWidget.open();
// Close the panel
RSL.AccessibilityWidget.close();
// Toggle panel open/closed
RSL.AccessibilityWidget.toggle();
// Reset all settings to defaults
RSL.AccessibilityWidget.reset();Example 3: Setting Individual Options
Control individual settings via the API:
Test the Settings Above
Click the buttons above to apply different accessibility settings to this content. Each setting is applied instantly and saved to localStorage.
Try combining multiple settings: increase the font size, add high contrast, and highlight links all at once!
// Set font size to 120%
RSL.AccessibilityWidget.setSetting('fontSize', 120);
// Set line height to 150%
RSL.AccessibilityWidget.setSetting('lineHeight', 150);
// Enable high contrast mode
RSL.AccessibilityWidget.setSetting('highContrast', true);
// Enable link highlighting
RSL.AccessibilityWidget.setSetting('highlightLinks', true);
// Enable grayscale mode
RSL.AccessibilityWidget.setSetting('grayscale', true);
// Get current value of a setting
const currentFontSize = RSL.AccessibilityWidget.getSetting('fontSize');
console.log('Current font size:', currentFontSize + '%');Example 4: Reading Aids
Test the reading guide and reading mask features:
Reading Aids Demo
The Reading Guide creates a horizontal highlight bar that follows your mouse cursor, making it easier to track which line you're reading.
The Reading Mask darkens everything except a horizontal strip around your cursor, helping you focus on one area at a time.
The Focus Indicator adds a prominent orange outline to any focused element, making keyboard navigation much more visible.
These features are particularly helpful for users with dyslexia, ADHD, or visual processing difficulties.
Example 5: Visual Adjustments
Test different visual modes:
Visual Adjustments Demo
These visual adjustments can help users with different visual needs:
- Invert Colors: Helpful for users who prefer dark text on light backgrounds or vice versa
- Low Saturation: Reduces color intensity for users sensitive to bright colors
- High Saturation: Increases color intensity for users who need more contrast
- Highlight Headings: Makes document structure more visible
A Subheading Example
Subheadings will also be highlighted when that feature is enabled.
Example 6: Images and Motion
Control images and animations:
Images Demo
Toggle "Hide Images" to fade out images on the page. This helps users who find images distracting or have slow connections.
"Stop Animations" disables all CSS animations and transitions on the page, which is helpful for users who experience motion sickness or find movement distracting.
Example 7: Button Position
Move the floating accessibility button to any corner of the screen:
Current position: bottom-left
<!-- Default: bottom-left -->
<script src="javascript/accessibility-widget.js"></script>
<!-- Bottom-right corner -->
<script src="javascript/accessibility-widget.js" data-position="bottom-right"></script>
<!-- Top-left corner -->
<script src="javascript/accessibility-widget.js" data-position="top-left"></script>
<!-- Top-right corner -->
<script src="javascript/accessibility-widget.js" data-position="top-right"></script>// Move button to bottom-right corner
RSL.AccessibilityWidget.setPosition('bottom-right');
// Get current position
const pos = RSL.AccessibilityWidget.getPosition();
console.log('Current position:', pos);
// Get all valid positions
const validPositions = RSL.AccessibilityWidget.getValidPositions();
// ['bottom-left', 'bottom-right', 'top-left', 'top-right']Example 8: Custom Brand Colors
Customize the widget colors to match your brand by overriding CSS variables:
/* Example: Orange brand colors */
:root {
--rsl-a11y-primary: #ff6b35;
--rsl-a11y-secondary: #e85d04;
--rsl-a11y-button-gradient: linear-gradient(135deg, #ff6b35 0%, #e85d04 100%);
--rsl-a11y-header-gradient: linear-gradient(135deg, #ff6b35 0%, #e85d04 100%);
--rsl-a11y-toggle-gradient: linear-gradient(135deg, #ff6b35 0%, #e85d04 100%);
}
/* Example: Blue brand colors */
:root {
--rsl-a11y-primary: #0066cc;
--rsl-a11y-secondary: #004d99;
--rsl-a11y-button-gradient: linear-gradient(135deg, #0066cc 0%, #004d99 100%);
--rsl-a11y-header-gradient: linear-gradient(135deg, #0066cc 0%, #004d99 100%);
--rsl-a11y-toggle-gradient: linear-gradient(135deg, #0066cc 0%, #004d99 100%);
}
/* Example: Green brand colors */
:root {
--rsl-a11y-primary: #28a745;
--rsl-a11y-secondary: #1e7e34;
--rsl-a11y-button-gradient: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
--rsl-a11y-header-gradient: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
--rsl-a11y-toggle-gradient: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}