Accessibility Widget 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);
})
Copy text

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
    })
})
Copy text