WordPress plugin

Accessibility widget overview

What the AccessYes accessibility widget looks like and how it works for visitors. Covers the widget button, menu structure, and how user preferences are saved.

Updated

In this article: A complete tour of the front-end accessibility widget that your visitors interact with. Covers the widget button, the menu layout, each section’s purpose, and how the widget saves visitor preferences.

When a visitor arrives on your WordPress site with AccessYes installed, they see a floating circular button — the widget trigger — positioned in the corner of the screen. Clicking or tapping it opens the accessibility menu, a panel that lets visitors adjust how your site looks and behaves to suit their individual needs.

This article describes what visitors see and experience. For information on configuring the widget as a site owner, see Widget Appearance and Positioning.

The widget button

The widget button is a floating action button that stays visible as visitors scroll. By default it sits in the bottom-right corner of the screen, though you can reposition it to any corner and adjust its distance from the edges.

The button uses your configured primary colour (default: AccessYes blue #1863DC) and displays an accessibility icon. It carries an accessible label of “Accessibility widget” that is announced by screen readers, even though the label is not visible on the button itself.

Visitors can also open the widget using a keyboard shortcut if you have enabled that feature. The default shortcut is Alt + A. See Keyboard Shortcut Setup for details.

The accessibility menu

Clicking the button opens a panel anchored to the same corner. The panel is divided into sections, each grouping a set of related tools. Here is the complete structure from top to bottom:

Language selector

If you have enabled multiple languages, a dropdown appears at the top of the panel. Visitors can switch the widget interface to any of the languages you have made available. The change is immediate and persists across sessions.

Accessibility profiles

Four one-click preset combinations appear at the top of the tools area. Each profile applies a group of settings simultaneously:

  • Seizure safe profile — disables animations and removes flashing elements
  • Low vision profile — combines high contrast, larger font size, and the reading guide
  • ADHD profile — applies settings that support focus and reduce visual noise
  • Cognitive disability profile — increases spacing and applies simplifying adjustments

Profiles are a quick starting point. Visitors can activate a profile and then fine-tune individual tools on top of it.

Content adjustments

Controls that change how text is displayed on the page:

  • Font size — increase or decrease the base font size using + and - buttons
  • Readable font — switches body text to the OpenDyslexic typeface, designed to improve readability for people with dyslexia
  • Highlight titles — adds a visual highlight to all heading elements for easier scanning
  • Highlight links — makes all hyperlinks more visually prominent
  • Letter spacing — widens the space between letters
  • Line height — increases the vertical space between lines of text
  • Font weight — bolds all text across the page
  • Align left — overrides centred or justified text to left-aligned

Colour and contrast adjustments

Controls that change the colour rendering of the page:

  • Dark contrast — dark mode
  • Light contrast — bright, clean light mode
  • High contrast — maximum contrast between text and backgrounds
  • High saturation — intensifies all colours
  • Low saturation — reduces colour intensity, helpful for visitors with light sensitivity
  • Monochrome — renders the page in greyscale

Only one contrast mode can be active at a time.

Assistive tools for reading and navigation:

  • Reading guide — a horizontal line that follows the cursor (or touch position on mobile) to help visitors track which line they are reading
  • Pause animations — stops all CSS animations, transitions, and auto-playing media on the page
  • Big cursor — enlarges the mouse cursor and increases its contrast

At the bottom of the panel is a Reset settings button that reverts all the visitor’s adjustments back to the page defaults in one click. Below it, “Powered by AccessYes” branding is displayed.

Accessibility statement

If you have enabled the accessibility statement feature, a link or inline statement panel appears in the widget footer, giving visitors access to your site’s conformance information.

How preferences are saved

Every choice a visitor makes — their chosen font size, active contrast mode, enabled tools — is saved to their browser’s localStorage. This means:

  • Settings persist when the visitor closes and reopens their browser.
  • Settings carry across pages within your site during the same session and future visits.
  • Settings are stored entirely on the visitor’s device. Nothing is sent to your server or any third party.
  • Settings are cleared if the visitor clears their browser data.

Each visitor’s preferences are independent. There is no user account or login required.

Keyboard and screen reader accessibility

The widget itself is built to be fully accessible:

  • All buttons are keyboard-focusable and operable with Enter or Space.
  • The panel traps focus when open — pressing Tab cycles through controls within the panel rather than the page behind it.
  • Pressing Escape closes the panel and returns focus to the widget button.
  • All interactive elements carry appropriate ARIA labels.
  • The widget is tested with major screen readers including NVDA, JAWS, and VoiceOver.