Event handling
The accessibility widget emits events in response to user interactions, such as changing options, profile, language, items or opening and closing menus.
Application of Event Detection
Recording of these events enables:
- Site interface integration – dynamically adjust content or styles in response to changes in the widget.
- User interaction tracking – analyzing the use of accessibility features to optimize UI.
- Synchronize settings – e.g., automatically adjust the language of the page when you change the language in the widget.
The following is a list of available events
| Name | Description |
|---|---|
| AccessibilityOnChangeOption | called when any accessibility option is changed |
| AccessibilityOnChangeOptionContrast | change the contrast of the page |
| AccessibilityOnChangeOptionFontSize | change font size |
| AccessibilityOnChangeOptionInvertColor | invert page colors |
| AccessibilityOnChangeOptionUnderline | enable or disable underlining of links |
| AccessibilityOnChangeOptionDisableAnimations | disable animations on the page |
| AccessibilityOnChangeOptionDyslexic | use of font for dyslexics |
| AccessibilityOnChangeOptionEnlargeCursor | cursor enlargement |
| AccessibilityOnChangeOptionHideMedia | hide embedded media |
| AccessibilityOnChangeOptionLetterSpacing | adjust letter spacing |
| AccessibilityOnChangeOptionLineHeight | adjust text line height |
| AccessibilityOnChangeOptionSaturation | adjust color saturation |
| AccessibilityOnChangeOptionShowLine | display a guide for easy reading |
| AccessibilityOnChangeOptionTextToSpeech | activation of text-to-speech conversion function |
| AccessibilityOnChangeProfile | called when any accessibility profile is changed |
| AccessibilityOnChangeProfileAdhd | activation of profile for people with ADHD |
| AccessibilityOnChangeProfileBlind | activation of profile for blind people |
| AccessibilityOnChangeProfileCognitiveAndLearning | profile activation for people with cognitive and learning disabilities |
| AccessibilityOnChangeProfileColorBlind | activate profile for people with color blindness |
| AccessibilityOnChangeProfileDyslexia | profile activation for dyslexia patients |
| AccessibilityOnChangeProfileEpileptic | activation of profile for people with epilepsy |
| AccessibilityOnChangeProfileLowVision | activation of profile for visually impaired |
| AccessibilityOnChangeProfileMotorImpaired | activate profile for people with reduced mobility |
| AccessibilityOnMenuOpen | opening the accessibility widget menu |
| AccessibilityOnMenuClose | close the accessibility widget menu |
| AccessibilityOnChangePosition | change the position of the widget on the page |
| AccessibilityOnChangeLanguage | change the language of the widget |
You can use these events in your application by listening for events like this:
window.addEventListener('AccessibilityOnChangeOption', function (event) {
console.log(event.detail.type, event.detail.value);
})
An example of sending an event to Google Tag Manager:
window.addEventListener('AccessibilityOnChangeOption', function (event) {
window.dataLayer = window.dataLayer || []
window.dataLayer.push({
event: 'AccessibilityChange',
optionType: event.detail.type,
optionValue: event.detail.value
})
})
