@dockcodes/accessibility-widget

Check our Accessibility Widget.

$3

``bash
npm install @dockcodes/accessibility-widget
`
or
`bash
yarn add @dockcodes/accessibility-widget
`

$3


`ts
import accessibility from "@dockcodes/accessibility-widget"

await accessibility.init("YOUR_TOKEN")

accessibility.setContrast(true)
accessibility.setLanguage("en")
accessibility.setFontSize(4)
accessibility.onMenuOpen(() => {
console.log('Menu opened!')
})
`

$3


| Method | Description |
|---------------------------------------------|-----------------------------------------------|
| toggleContrast() | Toggles the page contrast |
| setContrast(enabled: boolean) | Sets the page contrast on/off |
| toggleInvertColors() | Toggles color inversion |
| setInvertColors(enabled: boolean) | Sets color inversion on/off |
| toggleUnderline() | Toggles link underlining |
| setUnderline(enabled: boolean) | Enables/disables link underlining |
| setFontSize(level: number) | Sets the font size (1–5) |
| increaseFontSize() | Increases font size by 1 |
| decreaseFontSize() | Decreases font size by 1 |
| increaseLetterSpacing() | Increases letter spacing |
| setLetterSpacing(level: number) | Sets letter spacing level (1–5) |
| increaseLineHeight() | Increases line height |
| setLineHeight(level: number) | Sets line height (1–5) |
| increaseSaturation() | Increases color saturation |
| setSaturation(level: number) | Sets color saturation (1–3) |
| toggleTextToSpeech() | Toggles text-to-speech functionality |
| setTextToSpeech(enabled: boolean) | Enables/disables text-to-speech |
| toggleCursorEnlarge() | Toggles enlarged cursor |
| setCursorEnlarge(enabled: boolean) | Enables/disables enlarged cursor |
| toggleHideMedia() | Toggles hiding embedded media |
| setHideMedia(enabled: boolean) | Enables/disables hiding media |
| toggleDisableAnimations() | Toggles disabling page animations |
| setDisableAnimations(enabled: boolean) | Enables/disables animation disabling |
| toggleReadingGuide() | Toggles reading guide (line highlighting) |
| setReadingGuide(enabled: boolean) | Enables/disables reading guide |
| toggleDyslexicFont() | Toggles dyslexic-friendly font |
| setDyslexicFont(enabled: boolean) | Enables/disables dyslexic font |
| toggleProfileMotorImpaired() | Toggles motor impairment profile |
| setProfileMotorImpaired(enabled: boolean) | Enables/disables motor impairment profile |
| toggleProfileLowVision() | Toggles low vision profile |
| setProfileLowVision(enabled: boolean) | Enables/disables low vision profile |
| toggleProfileColorBlind() | Toggles color blind profile |
| setProfileColorBlind(enabled: boolean) | Enables/disables color blind profile |
| toggleProfileDyslexia() | Toggles dyslexia profile |
| setProfileDyslexia(enabled: boolean) | Enables/disables dyslexia profile |
| toggleProfileBlind() | Toggles blind profile |
| setProfileBlind(enabled: boolean) | Enables/disables blind profile |
| toggleProfileEpileptic() | Toggles epilepsy-safe profile |
| setProfileEpileptic(enabled: boolean) | Enables/disables epilepsy-safe profile |
| toggleProfileAdhd() | Toggles ADHD profile |
| setProfileAdhd(enabled: boolean) | Enables/disables ADHD profile |
| toggleProfileCognitive() | Toggles cognitive & learning profile |
| setProfileCognitive(enabled: boolean) | Enables/disables cognitive & learning profile |
| setLanguage(lang: string) | Sets the widget language |
| openMenu() | Opens the accessibility menu |
| closeMenu() | Closes the accessibility menu |
| resetAll() | Resets all widget settings to default |

$3

| Method | Event |
|-------------------------------------------|------------------------------------|
| onMenuOpen(cb) | on open accessibility menu |
| onMenuClose(cb) | on closed accessibility menu |
| onChangeLanguage(cb) | on change widget language |
| onChangePosition(cb) | on change widget position |
| onChangeOption(cb) | on change any of widget option |
| onChangeOptionContrast(cb) | on change contrast |
| onChangeOptionFontSize(cb) | on change font size |
| onChangeOptionInvertColor(cb) | on change invert colors option |
| onChangeOptionUnderline(cb) | on change links decoration |
| onChangeOptionDisableAnimations(cb) | on disable or enable animations |
| onChangeOptionDyslexic(cb) | on enable or disable dyslexic font |
| onChangeOptionEnlargeCursor(cb) | on change cursor size |
| onChangeOptionHideMedia(cb) | on hide or show media |
| onChangeOptionLetterSpacing(cb) | on change letter spacing |
| onChangeOptionLineHeight(cb) | on change line height |
| onChangeOptionSaturation(cb) | on change saturation |
| onChangeOptionShowLine(cb) | on enable or disable reading guide |
| onChangeOptionTextToSpeech(cb) | on enable or disable TTS |
| onChangeProfile(cb) | on change any profile |
| onChangeProfileAdhd(cb) | on change ADHD profile |
| onChangeProfileBlind(cb) | on change Blind profile |
| onChangeProfileCognitiveAndLearning(cb) | on change Cognitive profile |
| onChangeProfileColorBlind(cb) | on change Color blind profile |
| onChangeProfileDyslexia(cb) | on change Dyslexia profile |
| onChangeProfileEpileptic(cb) | on change Epilepsy profile |
| onChangeProfileLowVision(cb) | on change Low vision profile |
| onChangeProfileMotorImpaired(cb) | on change Motor impaired profile |

$3

`javascript
import accessibility from "@dockcodes/accessibility-widget"

await accessibility.init("YOUR_TOKEN")

accessibility.onChangeOption((data) => {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "AccessibilityChange",
optionType: data.type,
optionValue: data.value
})
})
``

$3

👉 https://wcag.dock.codes/my-account/tokens/