Description: A tool that allows users to customize the website interface according to specific visual, cognitive, or motor needs, ensuring a more comfortable navigation experience for everyone.
What is it for? (Practical examples)
This tool is essential to ensure that your website is usable by the widest possible audience, including users with temporary or permanent disabilities.
- Improve readability: A visually impaired user can increase text size and activate high contrast with a single click.
- Reduce distractions: A user with dyslexia or ADHD can activate a specific font or a reading mask to better focus on the content.
- Ensure safety: People sensitive to visual stimuli can disable animations and reduce color saturation for safer navigation.
Main features
The accessibility panel can be accessed via a floating icon on the side of the screen and divides its functions into four main categories:
1. Accessibility profiles (Quick settings)
These profiles automatically activate a combination of tools optimized for specific needs, allowing instant configuration of the site. Activating one profile automatically disables the others.
| Profile | Purpose |
|---|---|
| Epilepsy safe | Removes animations, motion effects, and reduces use of saturated colors. |
| For visually impaired | Increases contrast and text size to improve visibility. |
| For cognitive disabilities | Highlights links and main headings to improve focus and orientation. |
| ADHD friendly | Activates tools that reduce visual distractions, such as the reading mask. |
| For blind users | Optimizes keyboard navigation and uses fonts readable by screen readers. |
2. Content adjustment
These tools act directly on text presentation.
- Increase/Decrease text: Adjusts font size across the entire page while maintaining original proportions.
- Readable font: Applies a standard clear font (Arial) to all textual elements.
- Dyslexia font: Applies a font specifically designed to facilitate reading for people with dyslexia.
- Highlight headings: Adds visual highlighting to headings (H1, H2, etc.) to ease page scanning.
- Underline links: Ensures all hyperlinks are clearly underlined.
3. Visual adjustment
These tools modify the color and dynamic appearance of the page.
- Dark contrast: Applies a dark theme (night mode) across the site.
- High contrast: Drastically increases contrast between text and background.
- Low saturation: Reduces color intensity.
- Hide images: Conceals all decorative and photographic images to reduce visual load.
- Reduce animations: Disables transition and motion effects.
4. Navigation and orientation
These tools assist users in following content and interacting with the mouse.
- Magnifying glass: Enlarges text under the mouse cursor.
- Reading mask: Darkens most of the screen, leaving only a narrow horizontal band visible that follows the cursor, helping maintain focus on the current line.
- Reading guide: Provides a horizontal line following the cursor to help track lines of text.
- Large black/white cursor: Increases mouse cursor size and changes its color for better visibility.
How to configure it
The module requires no configuration from the administrator as it is designed for direct use by end-users.
Important note: All settings chosen by the user are saved in their browser. This means that once activated, accessibility preferences will remain active every time the user returns to the site until they are deactivated or reset.
Automatic integrations
Quick access and persistence
The accessibility panel is always available via a floating icon. Selected settings are applied immediately and remain active even after closing and reopening the browser.
Assisted navigation
The module automatically adds a "Skip to main content" link at the top of the page. This is essential for users navigating via keyboard or screen reader, allowing them to quickly bypass navigation elements and access the main page content immediately.
Reset
A Reset button is always available in the panel, which cancels all changes made and restores the site's default appearance.
