The official accessibility helper widget from helptheweb.org, adding features like font size adjustment, contrast modes, and more.
<script src="https://unpkg.com/@helptheweb/helper"></script>
<!-- Then initialize with default settings -->
<script>
const accessibilityHelper = new AccessibilityHelper.Helper();
</script>
<!-- Or initialize with custom options -->
<script>
const accessibilityHelper = new AccessibilityHelper.Helper({
defaultFontSize: 18,
buttonColor: '#000000'
});
</script>
npm install @helptheweb/helper
import { Helper } from '@helptheweb/helper';
// Initialize with default settings
const accessibilityHelper = new Helper();
// Or initialize with custom options
const accessibilityHelper = new Helper({
defaultFontSize: 18,
buttonColor: '#000000'
});
npm install @helptheweb/helper
const { Helper } = require('@helptheweb/helper');
// Initialize with default settings
const accessibilityHelper = new Helper();
// Or initialize with custom options
const accessibilityHelper = new Helper({
defaultFontSize: 18,
buttonColor: '#000000'
});
Option | Type | Default | Description |
---|---|---|---|
defaultFontSize |
number | 16 | The base font size in pixels |
buttonColor |
string | '#1e232f' | The color of the accessibility toggle button |
- Increase: Enlarges text by 2px increments
- Decrease: Reduces text by 2px increments (minimum: 8px)
- Reset: Returns to default font size
- Greyscale: Converts all colors to grayscale
- High Contrast: Increases contrast by 150%
- Negative Contrast: Inverts colors
- Underline Links: Forces underlines on all link elements
- Readable Font: Switches to Arial font family
You can programmatically control the helper through its methods:
// Font size controls
accessibilityHelper.increaseFontSize();
accessibilityHelper.decreaseFontSize();
accessibilityHelper.resetFontSize();
// Toggle individual settings
accessibilityHelper.toggleSetting('greyscale');
accessibilityHelper.toggleSetting('highContrast');
accessibilityHelper.toggleSetting('negativeContrast');
accessibilityHelper.toggleSetting('underlineLinks');
accessibilityHelper.toggleSetting('readableFont');
// Reset all settings
accessibilityHelper.resetAll();
The helper is compatible with modern browsers including:
- Chrome
- Firefox
- Safari
- Edge
- Initialize the helper as early as possible in your application lifecycle
- Ensure the toggle button remains visible and doesn't conflict with existing UI elements
- Test the helper with various screen sizes and viewport dimensions
MIT License
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
For support, please visit helptheweb.org or open an issue in the GitHub repository.