WordPress plugin

Navigation tools

Guide to the navigation tools in the AccessiYes widget: reading guide, pause animations, big cursor, page reader, and mute sounds. What each one does and who it helps.

Updated

In this article: What the reading guide, pause animations, big cursor, page reader, and mute sounds tools do, who benefits from each one, and how they work on the page.

The navigation tools section of the AccessiYes widget contains assistive tools that help visitors move around and read content more easily. Unlike the content adjustments or colour modes, these tools are not primarily about visual appearance — they change how visitors interact with and track through a page.

Reading guide

The reading guide overlays a horizontal rule on the page that follows the visitor’s cursor (or touch position on mobile). As the visitor moves their pointer down the page, the guide line stays aligned with it, acting as a visual marker for the current line being read.

Who benefits

The reading guide helps visitors who have difficulty tracking across lines of text, including:

  • People with dyslexia, who may jump to the wrong line or lose their place mid-paragraph
  • People with ADHD, who benefit from a visual anchor that keeps their eye on the current line
  • People with low vision who use the cursor as a reference point when reading
  • Visitors reading long-form content on wide screens, where line lengths can make it easy to slip a line

How it works on the page

The guide is a full-width rule that extends across the visible screen width at the cursor’s vertical position. It updates in real time as the cursor moves. On touch devices it follows the last touch position rather than a cursor.

The guide does not block click or tap interactions — visitors can still click links and buttons with the guide active.

On mobile, the reading guide follows touch events and stays at the position of the last tap. Some mobile visitors find it less useful than on desktop because scroll-based reading is more common on small screens, but the tool remains available.

Pause animations

The pause animations tool stops all CSS animations, transitions, and auto-playing media on the page. This includes:

  • CSS animation and transition effects on elements
  • GIF images (paused at the first frame where supported)
  • Auto-playing <video> and <audio> elements

Who benefits

This tool is valuable for a significant range of visitors:

  • People with photosensitive epilepsy, for whom flashing or rapidly moving content can trigger seizures
  • People with vestibular disorders (inner ear conditions), who experience dizziness or nausea in response to motion on screen
  • People with migraines, who are sensitive to flickering or animated content
  • People with ADHD, who find background motion distracting when trying to focus on content

Important note on WCAG compliance

WCAG 2.1 Success Criterion 2.2.2 (Pause, Stop, Hide) requires that any auto-playing content that lasts more than five seconds can be paused, stopped, or hidden. WCAG 2.3.1 (Three Flashes or Below Threshold) prohibits content that flashes more than three times per second.

Providing the pause animations tool does not make a non-compliant site compliant — the SC requires the mechanism to be available without needing an accessibility widget. But for visitors using AccessiYes on sites that do not natively provide pause controls, this tool gives them back agency.

Big cursor

The big cursor tool replaces the visitor’s default cursor with an enlarged, high-contrast mouse pointer. The larger cursor is easier to see and track on screen.

Who benefits

  • People with low vision who lose track of the standard system cursor on the screen
  • People with tremors or reduced motor precision who benefit from a larger target for their attention
  • Older visitors who find standard cursors small and hard to follow

How it works

The big cursor applies a custom CSS cursor to all elements on the page. The cursor uses a high-contrast design (typically black with a white outline or vice versa) to ensure visibility on both light and dark backgrounds.

The cursor change applies to the entire browser tab — all interactive and non-interactive areas use the enlarged cursor while the tool is active.

Note

The big cursor is a visual tool only — it does not change the size of click targets or interactive areas. If your site has small tap targets, those remain small. WCAG 2.5.8 (Target Size, AA, WCAG 2.2) requires interactive elements to be at least 24×24 pixels. Fixing undersized targets in your theme is preferable to relying on the cursor change.

Page reader

The page reader tool reads the content of the current page aloud using the browser’s built-in Web Speech API. Visitors can activate it from the widget to have visible text on the page narrated to them.

Who benefits

  • Visitors with low vision who prefer audio over visual reading
  • People with dyslexia who find listening easier than reading
  • Visitors in hands-free or eyes-busy situations
  • People who process spoken language more easily than written text

How it works

When activated, the page reader begins narrating the page text using the visitor’s browser and operating system voice settings. Visitors can pause or stop playback at any time by deactivating the tool in the widget. The voice, speed, and language used are determined by the browser and system defaults.

Note

The page reader is not a substitute for a dedicated screen reader. Screen readers provide full keyboard navigation, element announcements, and ARIA support. The page reader is a lightweight text-to-speech convenience tool for sighted visitors who prefer audio.

Mute sounds

The mute sounds tool silences all audio playing on the page, including auto-playing videos, background music, and embedded media.

Who benefits

  • Visitors who find unexpected audio distracting or disorienting
  • People with auditory processing difficulties or sensory sensitivities
  • Visitors in quiet environments where sudden sounds would be disruptive
  • People with ADHD or anxiety who find background noise hard to filter out

How it works

When activated, the tool mutes all <audio> and <video> elements on the page. The visitor’s preference is saved to localStorage and persists across pages, so audio remains muted as they browse the site. Deactivating the tool restores sound.

Can site owners disable these tools?

All navigation tools can be individually enabled or disabled from AccessiYes → Modules in the WordPress admin.

The pause animations tool is also applied as part of the Seizure Safe and ADHD profiles. If you disable pause animations, it will also be removed from those profiles.