JavaScript widget

JavaScript configuration reference

Complete reference for every property in the window._cyA11yConfig object. Covers position, language, appearance, modules, features, and the keyboard shortcut.

Updated April 24, 2026

In this article: Every property available in window._cyA11yConfig, its type, accepted values, and default.

The widget reads configuration from the global window._cyA11yConfig object before it initialises. Set this object before the widget script tag loads. Any property you omit falls back to its default value.

Full configuration object

window._cyA11yConfig = {

  // ── Appearance ────────────────────────────────────────
  iconId:      'default',   // Widget button icon shape
  color:       '#1863DC',   // Widget button background colour (hex)
  size:        48,          // Widget button diameter in pixels
  buttonLabel: 'Accessibility widget', // Accessible name (screen readers)

  // ── Position ──────────────────────────────────────────
  position: {
    desktop: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
    mobile:  'bottom-right',
  },

  // ── Offset ────────────────────────────────────────────
  offset: {
    desktop: { horizontal: 20, vertical: 20 }, // pixels from screen edge
    mobile:  { horizontal: 20, vertical: 20 },
  },

  // ── Language ──────────────────────────────────────────
  language: {
    default:  'en',  // ISO 639-1 code — widget always loads in this language
    selected: [],    // Languages available in the visitor's language switcher
  },

  // ── Keyboard shortcut ─────────────────────────────────
  keyboard: {
    enabled: false,  // true to register the shortcut
    key:     'a',    // Letter key — pressed with Alt (Windows/Linux) or Option (Mac)
  },

  // ── Modules ───────────────────────────────────────────
  modules: {
    statement: {
      enabled: false,  // Show an accessibility statement link in the widget
      url:     '',     // Full URL of your accessibility statement page
    },
  },

  // ── Features ──────────────────────────────────────────
  // Set any feature to false to hide it from the widget panel.
  // All features are enabled by default.
  features: {
    // Profiles
    seizureSafeProfile:    true,
    lowVisionProfile:      true,
    adhdProfile:           true,
    cognitiveProfile:      true,

    // Content adjustments
    fontSize:              true,
    readableFont:          true,
    highlightTitles:       true,
    highlightLinks:        true,
    letterSpacing:         true,
    lineHeight:            true,
    fontWeight:            true,
    alignLeft:             true,

    // Colour and contrast
    darkContrast:          true,
    lightContrast:         true,
    highContrast:          true,
    highSaturation:        true,
    lowSaturation:         true,
    monochrome:            true,

    // Navigation tools
    readingGuide:          true,
    pauseAnimations:       true,
    bigCursor:             true,
  },

};

Property reference

`iconId`

The icon displayed inside the widget button.

Value	Description
`'default'`	Standard accessibility person icon (default)
`'icon-2'`	Alternate style 2
`'icon-3'`	Alternate style 3
`'icon-4'`	Alternate style 4

`color`

The background colour of the floating widget button. Accepts any valid CSS hex colour value.

Property	Type	Default
`color`	`string` (hex)	`'#1863DC'`

The button icon is white. Choose a colour with at least 3:1 contrast ratio against white to meet WCAG 2.1 AA for UI components. You can check contrast ratios at webaim.org/resources/contrastchecker.

`size`

The diameter of the floating button in pixels.

Property	Type	Default	Minimum recommended
`size`	`number`	`48`	`44`

WCAG 2.5.8 (Target Size, AA) recommends a minimum touch target of 24×24 px. WCAG 2.5.5 (Target Size, AAA) recommends 44×44 px. The default 48px exceeds both thresholds. Only reduce the size if space is genuinely constrained.

`buttonLabel`

The accessible name of the widget button, announced by screen readers when a visitor focuses the button. This text is not visible on screen.

Property	Type	Default
`buttonLabel`	`string`	`'Accessibility widget'`

Change this if your site is in a language other than English and you are not using the language feature. For example, set 'Widget d'accessibilité' for a French-language site.

`position`

Controls where the floating button appears on the screen. Desktop and mobile are set independently.

position: {
  desktop: 'bottom-right',
  mobile:  'bottom-right',
}

Value	Description
`'bottom-right'`	Bottom-right corner (default)
`'bottom-left'`	Bottom-left corner
`'top-right'`	Top-right corner
`'top-left'`	Top-left corner

Set a different position for desktop and mobile if your layout has fixed elements (such as a chat launcher or cookie banner) occupying one corner on only one device type.

`offset`

The distance in pixels from the button to the nearest screen edges. Configured separately for desktop and mobile.

offset: {
  desktop: { horizontal: 20, vertical: 20 },
  mobile:  { horizontal: 20, vertical: 20 },
}

Property	Type	Default
`offset.desktop.horizontal`	`number`	`20`
`offset.desktop.vertical`	`number`	`20`
`offset.mobile.horizontal`	`number`	`20`
`offset.mobile.vertical`	`number`	`20`

Increase the offset if the widget overlaps a sticky footer, cookie banner, or other fixed element. Values between 16 and 40 are typical for most layouts.

`language`

Controls the language the widget displays in and which languages visitors can switch to.

language: {
  default:  'en',
  selected: ['en', 'fr', 'de'],
}

Property	Type	Default	Description
`language.default`	`string` (ISO 639-1)	`'en'`	The language the widget loads in
`language.selected`	`string[]`	`[]`	Languages offered in the visitor’s language switcher. An empty array hides the switcher.

When selected contains more than one language code, a language dropdown appears at the top of the widget panel. Visitors can switch language and their choice is saved to localStorage.

Supported language codes (selection):

Code	Language	Code	Language
`ar`	Arabic	`it`	Italian
`zh`	Chinese (Simplified)	`ja`	Japanese
`zh-TW`	Chinese (Traditional)	`ko`	Korean
`hr`	Croatian	`nl`	Dutch
`cs`	Czech	`pl`	Polish
`da`	Danish	`pt`	Portuguese
`nl`	Dutch	`pt-BR`	Portuguese (Brazil)
`en`	English	`ro`	Romanian
`fi`	Finnish	`ru`	Russian
`fr`	French	`sk`	Slovak
`de`	German	`es`	Spanish
`el`	Greek	`sv`	Swedish
`he`	Hebrew	`tr`	Turkish
`hi`	Hindi	`uk`	Ukrainian
`hu`	Hungarian	`vi`	Vietnamese

AccessYes supports 50+ languages in total. Contact accessyes@cookieyes.com if your language is not listed.

`keyboard`

Registers a keyboard shortcut that opens the widget without clicking the button.

keyboard: {
  enabled: true,
  key: 'a',
}

Property	Type	Default	Description
`keyboard.enabled`	`boolean`	`false`	Whether the shortcut is active
`keyboard.key`	`string`	`'a'`	The letter key, pressed with Alt (Windows/Linux) or Option (Mac)

The default shortcut Alt + A / Option + A is the most common choice. Choose a key that does not conflict with browser or operating system shortcuts on your target platforms.

Accessibility note

A keyboard shortcut makes the widget discoverable for keyboard users without requiring them to tab to the button. It is especially useful on long pages where the widget button may be far from the current focus position.

`modules.statement`

Controls the accessibility statement link shown inside the widget panel.

modules: {
  statement: {
    enabled: true,
    url: 'https://example.com/accessibility-statement/',
  },
}

Property	Type	Default	Description
`modules.statement.enabled`	`boolean`	`false`	Show the statement link in the widget
`modules.statement.url`	`string`	`''`	Full URL of your accessibility statement

When enabled is true and a url is provided, a link appears in the widget footer. If url is empty, the link does not appear even if enabled is true.

An accessibility statement is required for public sector websites in the UK and EU and is considered best practice for any organisation publicly demonstrating accessibility compliance.

`features`

Controls which tools are visible in the widget panel. Set any feature to false to hide it from all visitors. All features are true by default.

features: {
  fontSize:    true,   // show the feature
  darkContrast: false, // hide the feature
}

Important

Hiding a feature prevents all visitors from using it, including those who rely on it. Only disable a feature if it causes a genuine technical conflict with your site. Hiding features because they alter your visual design is not recommended.

Profiles

Key	Default	What it does
`seizureSafeProfile`	`true`	Reduces flashing colours and motion
`lowVisionProfile`	`true`	Increases font size, contrast, and cursor size
`adhdProfile`	`true`	Reduces distractions and focuses reading area
`cognitiveProfile`	`true`	Simplifies layout and improves readability

Content adjustments

Key	Default	What it does
`fontSize`	`true`	Lets visitors increase or decrease text size
`readableFont`	`true`	Switches to a dyslexia-friendly typeface
`highlightTitles`	`true`	Adds visual emphasis to headings
`highlightLinks`	`true`	Underlines and highlights all links
`letterSpacing`	`true`	Increases spacing between characters
`lineHeight`	`true`	Increases spacing between lines
`fontWeight`	`true`	Increases font weight for improved legibility
`alignLeft`	`true`	Overrides justified or centred text to left-align

Colour and contrast

Key	Default	What it does
`darkContrast`	`true`	Dark background, light text
`lightContrast`	`true`	Light background, dark text
`highContrast`	`true`	Maximum contrast between text and background
`highSaturation`	`true`	Increases colour intensity
`lowSaturation`	`true`	Reduces colour intensity
`monochrome`	`true`	Strips all colour from the page

Key	Default	What it does
`readingGuide`	`true`	Overlays a horizontal line that follows the cursor
`pauseAnimations`	`true`	Stops CSS animations and transitions
`bigCursor`	`true`	Replaces the default cursor with a larger one

Minimal embed example

Only position and language configured — everything else uses defaults:

<script>
(function(w,d,s,u){
  w._cyA11yConfig = {
    position: { desktop: 'bottom-left', mobile: 'bottom-left' },
    language: { default: 'fr', selected: [] },
    modules:  { statement: { enabled: false, url: '' } }
  };
  var js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
  js.src = u;
  js.async = true;
  fjs.parentNode.insertBefore(js, fjs);
})(window, document, 'script',
   'https://cdn-cookieyes.com/widgets/accessibility.js?id=YOUR_WIDGET_ID');
</script>

Full configuration example

<script>
(function(w,d,s,u){
  w._cyA11yConfig = {
    iconId:      'default',
    color:       '#0F4C9A',
    size:        48,
    buttonLabel: 'Accessibility widget',
    position: {
      desktop: 'bottom-right',
      mobile:  'bottom-left',
    },
    offset: {
      desktop: { horizontal: 24, vertical: 24 },
      mobile:  { horizontal: 16, vertical: 80 },
    },
    language: {
      default:  'en',
      selected: ['en', 'fr', 'de', 'es'],
    },
    keyboard: {
      enabled: true,
      key:     'a',
    },
    modules: {
      statement: {
        enabled: true,
        url:     'https://example.com/accessibility-statement/',
      },
    },
    features: {
      seizureSafeProfile:    true,
      lowVisionProfile:      true,
      adhdProfile:           true,
      cognitiveProfile:      true,
      fontSize:              true,
      readableFont:          true,
      highlightTitles:       true,
      highlightLinks:        true,
      letterSpacing:         true,
      lineHeight:            true,
      fontWeight:            true,
      alignLeft:             true,
      darkContrast:          true,
      lightContrast:         true,
      highContrast:          true,
      highSaturation:        true,
      lowSaturation:         true,
      monochrome:            true,
      readingGuide:          true,
      pauseAnimations:       true,
      bigCursor:             true,
    },
  };
  var js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
  js.src = u;
  js.async = true;
  fjs.parentNode.insertBefore(js, fjs);
})(window, document, 'script',
   'https://cdn-cookieyes.com/widgets/accessibility.js?id=YOUR_WIDGET_ID');
</script>

JavaScript embed: quick start — getting the widget on your site in under five minutes
Plugin settings reference — the equivalent reference for WordPress users
Accessibility statement — how to generate and publish a statement

Full configuration object

Property reference

iconId

color

size

buttonLabel

position

offset

language

keyboard

modules.statement

features

Profiles

Content adjustments

Colour and contrast

Navigation tools

Minimal embed example

Full configuration example

Related articles

`iconId`

`color`

`size`

`buttonLabel`

`position`

`offset`

`language`

`keyboard`

`modules.statement`

`features`