@helptheweb/helper

The official accessibility helper widget from helptheweb.org, adding features like font size adjustment, contrast modes, and more.

Installation and Usage

HTML (CDN)

<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>

ESM

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'
});

CommonJS

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'
});

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | defaultFontSize | number | 16 | The base font size in pixels | | buttonColor | string | '#1e232f' | The color of the accessibility toggle button |

Features Explanation

Font Size Controls

• Increase: Enlarges text by 2px increments
• Decrease: Reduces text by 2px increments (minimum: 8px)
• Reset: Returns to default font size

Visual Adjustments

• 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

Programmatic Control

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();

Browser Support

The helper is compatible with modern browsers including:

• Chrome
• Firefox
• Safari
• Edge

Best Practices

1. Initialize the helper as early as possible in your application lifecycle
2. Ensure the toggle button remains visible and doesn't conflict with existing UI elements
3. Test the helper with various screen sizes and viewport dimensions

License

MIT License

Contributing

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.

Support

For support, please visit helptheweb.org or open an issue in the GitHub repository.