Accessibility Tools Component

This Accessibility Tools Component provides users with essential features for improving the accessibility of a website. It includes options for font customization, layout adjustments, color contrast changes, and more, all in a user-friendly, interactive interface.

Table of Contents

1. Features Overview
2. Installation
3. Usage
4. Customization
5. Event Handling
6. Dependencies
7. License

Features Overview

1. Dark Mode

• Description: Allows users to switch between light and dark themes.
• Use: Ideal for users who prefer low-light environments or want to reduce eye strain.
• Improvement for Users: Helps users with sensitivity to bright screens or those working in dimly lit settings.

2. Animations

• Description: Enables or disables page animations.
• Use: Useful for users who may experience discomfort with motion effects.
• Improvement for Users: Provides a more static experience for users with vestibular disorders.

3. Text Reader(revision)

• Description: Activates or deactivates a text reader.
• Use: Beneficial for users with visual impairments or reading difficulties.
• Improvement for Users: Ensures content is accessible via audio feedback.

4. Panel Icons

• Description: Displays or hides icons within the accessibility panel.
• Use: Customizes the visual representation for improved user preferences.
• Improvement for Users: Simplifies navigation and allows for a cleaner interface.

5. Language Selector

• Description: Provides options to select different languages.
• Use: Users can choose their preferred language for the panel.
• Improvement for Users: Enhances inclusivity for non-native speakers.

6. Font Size Adjustment

• Description: Allows users to increase or decrease font size.
• Use: Ideal for users with visual impairments.
• Improvement for Users: Makes content more readable for users with limited vision.

7. Letter Spacing Control

• Description: Adjusts the spacing between letters.
• Use: Helps users who struggle with closely packed text.
• Improvement for Users: Improves legibility for users with dyslexia.

8. Font Weight Adjustment

• Description: Changes the boldness of text.
• Use: Helps users differentiate between different text elements.
• Improvement for Users: Enhances readability, particularly for users with weak vision.

9. Dyslexia-Friendly Font

• Description: Toggles a font designed to aid users with dyslexia.
• Use: Designed to minimize common reading issues associated with dyslexia.
• Improvement for Users: Helps reduce letter confusion and improves reading speed.

10. High Contrast Mode

• Description: Increases contrast between text and background.
• Use: Ideal for users with low vision.
• Improvement for Users: Makes text easier to distinguish and read.

11. Text Alignment Control

• Description: Aligns text to the left, center, or right.
• Use: Allows users to choose their preferred text alignment.
• Improvement for Users: Provides a more personalized reading experience.

12. Line Height Adjustment

• Description: Adjusts the spacing between lines of text.
• Use: Helps users who find tightly packed text difficult to read.
• Improvement for Users: Reduces eye strain and improves focus.

13. Text Color Customization

• Description: Allows users to change the color of text.
• Use: Helps users with color blindness or sensitivity to certain colors.
• Improvement for Users: Enhances readability through personalized color settings.

14. Tooltip Accessibility

• Description: Displays tooltips with helpful information when hovering over elements.
• Use: Provides additional context for users who need explanations.
• Improvement for Users: Assists users in understanding unfamiliar interface elements.

15. Reset Features

• Description: Resets all applied accessibility settings to their defaults.
• Use: Allows users to easily return to the original settings.
• Improvement for Users: Simplifies the process of undoing customizations.

16. Reset Layout

• Description: Reverts any layout changes made by the accessibility panel.
• Use: Restores the original layout of the page.
• Improvement for Users: Ensures users can quickly fix any undesired layout adjustments.

Installation

1. Include the required CSS and JavaScript files using the following CDN links:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cbs-accessibility-panel@1.0.2/dist/styles.min.css">

<script src="https://cdn.jsdelivr.net/npm/cbs-accessibility-panel@1.0.2/dist/index.min.js"></script>
<script>AccessibilityPanel.initAccessibilityPanel({});</script>

2. Add the accessibility panel's container to your page where the panel should render:

<div id="panel-container"></div>

Usage

You can configure the accessibility panel using the following options in the initAccessibilityPanel method:

export const initAccessibilityPanel = ({
  panelLocation = "#panel-container", // The location where the panel will be rendered
  theme,                               // Custom theme configuration (optional)
  environment = "production",          // Set environment (e.g., 'development', 'production')
  language,                            // Default language setting (optional)
}) => {
  AccessibilityPanel.initAccessibilityPanel({
    panelLocation,
    theme,
    environment,
    language
  });
};

Example initialization:

initAccessibilityPanel({
  panelLocation: "#custom-panel-container", // Custom container
  theme: { path: './customeTheme.css' },                            // Custom theme path
  environment: "development",                // Development mode
  language: "en"                             // Default to English
});

Customization

You can customize the look and feel of the accessibility panel by overriding its default styles using CSS.

Example CSS Override

.accessibility-panel {
    background-color: #f0f0f0;
    border-radius: 8px;
}

.accessibility-button {
    color: #333;
    font-size: 14px;
}

Dependencies

• CSS: Custom styling for layout and design.
• JavaScript: Handles interaction and dynamic updates.
• Icons: Font icons or SVG icons for enhanced accessibility.

License

This project is licensed under the MIT License. Feel free to use and modify it in your projects.