Accessibility Toolbar

The Accessibility Toolbar lets visitors adapt the presentation and operation of a page to their needs. Its preferences are reversible and apply only in the visitor’s browser. The Toolbar does not repair missing semantics, labels, keyboard operation, or other source-code defects, and it does not make an otherwise inaccessible website WCAG-conformant.

How the Toolbar works

A floating trigger opens one modal Toolbar dialog. The overview contains the available tools; functions with several choices open a detail view inside the same dialog. They do not create a dialog inside another dialog.

• Profile: Default means that no visitor preference is active. Profile: Custom means that at least one preference differs. The profile status is a button that opens profile management.
• In a detail view, the row containing Back, the function icon, title, and description replaces the regular Toolbar title in the fixed header. Back returns to the overview and restores focus to the card that opened it.
• Done closes the Toolbar while keeping the selected preferences.
• Escape and the close button dismiss the complete Toolbar and restore focus to the floating trigger.
• Reset all restores every Toolbar preference, stops Read aloud, exits Reading mode, and offers one Undo action. In the opened Toolbar, the notice occupies its own row directly below the Header and never covers function cards. A colored countdown bar shows the remaining 12 seconds; pointer presence or keyboard focus pauses the countdown. If the Toolbar closes while it is visible, the notice remains as a centered page toast and both the bar and dismissal continue from the same remaining time.
• When at least one function is adjusted, the green status box shows the count. Show details reveals compact entries containing the function and its current value or active sub-options. The X on an entry disables only that function, immediately updates the count and function card, and offers Undo. Entries and their X actions are fully keyboard-operable, and focus remains at a meaningful visible position after removal.
• Active states always use written text and a symbol, border, or shape change; color alone never communicates the state.

On desktop, the Toolbar uses an intrinsic grid that can show four, two, or one column according to the actual panel width. At and below the configured mobile breakpoint it opens as a safe-area-aware bottom sheet. Two compact columns are preferred around 390 px; at 320 px, with long translations, or under high zoom, the controls reflow to one column. Only the body scrolls, while the header and footer remain stable. Every control is at least 44 by 44 CSS pixels, and transitions become effectively immediate when reduced motion is requested.

Defaults on a fresh install

The Toolbar, desktop display, mobile display, and all listed visitor tools are available. Visual customization starts with Basic, and the score tooltip starts with Plus. A visitor begins with neutral presentation settings:

• Text size 100%
• Standard contrast and original colors
• Link and control emphasis off; media excluded from color filters
• Reading mode and Read aloud inactive
• Additional focus aids off
• Images visible
• No visitor-selected reduction of motion; an operating-system reduced-motion preference is still respected

The footer is hidden until an administrator explicitly selects an accessibility-statement link or EZZE branding.

Available functions

Text size

Separate minus and plus buttons move through 100, 110, 125, 150, and 200%. The resulting value is announced, and the corresponding button is disabled at the minimum or maximum. The Toolbar changes real text sizes and line heights so content can reflow; it does not visually zoom the page with transform: scale(). Original values are restored exactly, and content added later is handled while scaling remains active. Toolbar view changes and Read aloud progress updates never apply the selected step again to text that is already enlarged.

Contrast

The Contrast detail view offers:

• Standard
• Increased light
• Increased dark
• System

These modes use semantic foreground, background, link, border, form, and focus colors instead of globally inverting the page. Images and videos remain natural unless the administrator exposes the media option and the visitor deliberately enables it. Theme-owned menu, navigation, and scroll icons remain visible: image-based button backgrounds are preserved, while single-color masks and hamburger bars adopt the mode’s semantic text color.

Original, Muted colors, and Grayscale can be combined with a contrast mode. Selecting Custom colors returns Contrast to Standard because both settings control the page foreground and background. The Toolbar announces and stores this precedence consistently.

Colors

Opening Colors does not immediately alter the page. It opens four equal preview cards backed by a native single-choice group. The active mode is identified by a stronger border, soft background, and check mark:

• Original — leaves page colors unchanged
• Muted — reduces intense page colors
• Grayscale — removes page color information
• Custom colors — uses a chosen text and background color

Custom colors appear in one dedicated surface with two labelled peer cards for text and background. Each card combines a large swatch with an editable six-digit hexadecimal value. A shared row below both cards shows a real sample, the numeric contrast ratio, and a plain-language rating: Very easy to read, Easy to read, Suitable only for large text, or Difficult to read.

Either swatch opens the same Toolbar-contained color picker with keyboard-operable Hue, Saturation, and Lightness controls. Apply commits the draft; Cancel, Close, or Escape discards it and restores focus to the invoking swatch. The picker flips when space is limited and constrains its own height so controls are not cropped at a browser edge. Direct hexadecimal entry remains an equivalent path. An invalid draft remains visible with an error and does not replace the last valid applied color. A visitor may deliberately retain a combination below 4.5:1 after a clear warning; the Toolbar itself remains conformant and unchanged.

Under Additional adjustments, three compact selectable cards use native checkboxes instead of permanent On/Off switches:

• Underline links
• Emphasize controls
• Include media

The media preference is off by default. Its card remains visible but is labelled Unavailable in Original and Custom colors because only Muted and Grayscale can apply the filter to photos, illustrations, or videos. Selecting a compatible mode enables the card immediately. Reset colors restores Original colors and these three checkbox preferences without changing unrelated Toolbar preferences.

Reading mode

The detail view offers sans-serif or serif text, narrow/medium/wide line length, normal/large line spacing, and light/warm/dark backgrounds. On desktop, these four settings use a compact 2×2 grid; narrow views stack them vertically. The backgrounds include visual previews. A summary shows the current choices beside the content-width start button and updates after every change; the button uses the available width in narrow views. Start reading mode closes the Toolbar and opens a separate full-screen reader dialog; it is never nested inside the open Toolbar. When the Reader closes, Reading mode is no longer marked or counted as an active function. Its last presentation choices remain preselected for the next start and can still be cleared with Reset all.

The reader prefers the page’s main element, then [role="main"], then the strongest readable article. If those semantic regions are missing, it checks established WordPress and page-builder content wrappers and finally the filtered page body. It copies meaningful headings, paragraphs, lists, quotations, links, tables, captions, and non-duplicated informative image alternatives. Content hidden only until a recognized scroll or reveal animation starts is included without requiring the visitor to scroll first. Headers, navigation, sidebars, footers, dialogs, Toolbar UI, semantically or permanently CSS-hidden content, variants hidden at responsive breakpoints, closed disclosure content, scripts, styles, forms, advertisements, and cookie overlays remain excluded from the fallback. Duplicate IDs, event attributes, and unsafe interactive state are removed from the copy. The original page is not rewritten. If the filtered fallback also contains no meaningful content, the Toolbar stays open and reports the problem. Closing Reading mode restores focus to the Toolbar trigger.

Read aloud

Opening Read aloud never starts audio. The ready view first lets the visitor choose:

• Main content
• From current section
• Selected text, when a non-empty selection exists inside the main content
• Speed
• Available voice

The three start-point controls use compact cards that remain at least 76px high. Two-line translations, the selected check, disabled treatment, and visible keyboard focus remain fully available. Until suitable text has been selected, its guidance appears directly inside the Selected text card and disappears when a valid selection is available. At full width the cards occupy one complete three-column row and reflow to two or one column according to the Toolbar width. Speed and Voice form one shared settings surface: two equal columns on wide Toolbars and a vertical stack on narrow Toolbars. The same surface remains mounted when the view changes between ready and playback states instead of being rendered twice. Start read aloud spans the available width.

Clicking the floating Toolbar trigger can make the browser clear the visible text selection as focus moves. The Toolbar therefore captures a valid main-content selection before that change. Selected text remains available in the opened Read aloud view; closing the Toolbar discards the snapshot. Removed sources or sources that no longer belong to the main content are never read.

Speech begins only after Start read aloud. “From current section” starts at the readable block that contains keyboard focus. Otherwise it uses the first block crossing a line 35% down the viewport, then the first block below that line, and finally the first readable segment. Headings, paragraphs, list items, quotations, captions, useful image alternatives, and table content form a bounded queue. Each segment retains the closest page language.

During playback, the player shows the content title, a separate segment-position line, progress bar and written percentage, current text, and controls for Previous, Pause/Resume, Next, Stop, and Go to current paragraph. The shared Speed and Voice surface remains visible and operable below it. Speed uses the same Minus/value/Plus stepper at every width, with an announced value and disabled limit buttons. The header replaces the setup description with the written playback status. Current text appears in a fixed-height reading window: short text leaves the reserved space in place, while long text remains complete and can scroll within the window. This keeps the four equal rectangular playback buttons stationary; Pause or Resume is emphasized as the active primary action. During playback, the footer shows segment status, Stop read aloud, and Close toolbar instead of the generic actions; on narrow Toolbars it retains only the full-width Stop read aloud action because Back and Close remain available in the fixed header. The current paragraph receives a soft background and a strong leading border without moving keyboard focus as playback advances. Activating Go to current paragraph closes the Toolbar when necessary, keeps the compact player active, centers the original source paragraph in the viewport, and moves focus to it. Where the speech engine provides reliable boundary events, the current word or sentence can also be highlighted; paragraph highlighting always remains the fallback.

On devices with a mouse or another precise pointer, neutral controls in the full and compact players receive a soft blue hover surface with an accent border. The blue primary control uses a stronger accent on hover; disabled controls remain unchanged.

Under Page position, Go to current paragraph remains available as a separate one-time jump. Beside it, Follow automatically appears as a persistent setting with helper text, a written On/Off state, and a switch; the same setting is also available in the compact player. Enabling it reveals the source page; afterwards it centers a newly read paragraph only when that paragraph leaves the comfortably visible middle region of the viewport. Keyboard focus remains on the last control, pausing causes no movement, and the reduced-motion preference is respected.

Closing the Toolbar does not stop speech. A compact labelled player remains visible and keyboard-operable. It uses the same arrangement on desktop and phone: Previous, Pause/Resume, and Next form one connected group; Stop, Go to current paragraph, and the slightly wider Follow automatically action sit beside it with a written On/Off state and a check while active. On phones, that same player docks across the visible width as a non-modal Bottom Sheet at the bottom of the current browser viewport and respects the device safe area. Every target there remains at least 44px. Both groups remain on one row whenever the available space, including localized states, permits; otherwise only the second group moves below. A bottom-positioned Toolbar trigger moves above the Sheet so both controls remain reachable, while the page remains operable for paragraph navigation. The player uses the same Audio Lines symbol as the Read aloud card, and every action has a visible Lucide icon plus an accessible name or state. Stop, navigation away from the page, an unrecoverable error, or Reset all cancels the queue and removes every highlight. The Toolbar ignores late callbacks from an older playback session.

The first implementation uses the browser or operating system speech service. EZZE WCAG Pro does not send a Read aloud request or the page text to an EZZE endpoint. Depending on the selected browser, operating system, and voice, speech processing may still use an online service controlled by that provider. If the browser exposes no speech synthesis, the Toolbar shows an unavailable state instead of a non-functional start button.

Focus

The Focus detail view groups four independently selectable tiles under Make focus visible and Guide reading. Each tile combines a preview with a short explanation. Inactive tiles remain neutral; an active tile is identified by its accent border, background, and check mark. The underlying checkbox keeps the complete state available to assistive technology and keyboard users:

• High-contrast focus ring — replaces the existing focus indicator with a two-color :focus-visible ring that remains visible on light and dark backgrounds
• Additional yellow focus highlight — adds a yellow halo around the focused control without replacing its focus ring; when both options are active, the halo appears outside the complete two-color ring
• Reading line — provides a horizontal reading guide positioned by pointer, touch, or keyboard
• Reading mask — dims the page above and below a clear reading window that follows pointer, touch, or keyboard without blocking interaction

These preferences do not add tabindex to ordinary page text and never reorder the page’s focus sequence.

Motion

Reduce motion is a direct toggle. It suppresses non-essential animation, transitions, parallax, and smooth scrolling while retaining meaningful progress and state indicators. The Toolbar distinguishes a visitor choice from an operating-system prefers-reduced-motion preference. If the administrator enables optional jQuery suppression, it is installed and removed reversibly.

Images

Hide images remains an optional direct tool. It respects the administrator’s SVG, image, and background exceptions and uses the configured fallback color. It remains separate from Colors because hiding content has a different meaning from changing its color presentation.

Keyboard help

Keyboard help opens a detail view that documents only controls that actually exist: Tab, Shift+Tab, Enter/Space, Escape, and any plugin shortcuts configured by the administrator. Standard keys and configured site shortcuts appear in two clearly labelled sections. Each combination uses separate keycaps beside its explanation; narrow views place the explanation below. The Toolbar does not introduce unconfigurable global letter shortcuts.

Profiles and storage

The Profile: … button in the Toolbar header opens four ready-to-use support profiles. They are starting points rather than diagnoses and apply only tools that the administrator has made available:

• Visual support — 125% text, Increased light contrast, underlined links, emphasized controls, and the High-contrast focus ring
• Reading support — 110% text, a narrow warm Reading mode with large spacing, and the Reading line
• Keyboard and focus — the High-contrast focus ring, Additional yellow focus highlight, and reduced motion
• Low-distraction view — Muted colors, reduced motion, and the Reading mask

Applying a support profile replaces the current Toolbar preferences, updates its selected state, header name, function cards, and active-function details immediately, and offers Undo for 12 seconds. The selected session/device storage scope remains unchanged. The first later manual adjustment changes the header to Profile: Custom. A support profile can also be adjusted and then saved under a personal name.

Visitor preferences support three local scopes:

• This session — active state is kept in sessionStorage
• Remember on this device — active state is kept in localStorage
• Named profile — up to ten profiles with trimmed names from 1 to 40 characters; save, load, rename, and delete are explicit actions

On desktop, the compact storage choices and named-profile manager sit beside each other as two peer panels; a narrow Toolbar stacks them into one usable column. Profiles never leave the browser. Changing between session and device storage moves the current active state and removes the obsolete active record from the other store. Loading a named profile does not change the selected storage scope. Corrupt or unknown stored data falls back safely to defaults, and preferences from the former Toolbar state are migrated automatically where possible. Undo after Reset all restores both the captured preference state and its selected storage scope.

Administrator settings

The Toolbar settings determine which tools visitors see and how the trigger and panel look. Function availability is grouped into Core tools, Reading and focus, and Additional tools. Within each group, the arrangement follows the actual width of the settings area: it stays in one readable column for labels, descriptions, dependent options, and switches, then changes directly to three equal columns only when space is generous. The compact preview represents the overview; the interactive preview uses the real frontend Toolbar and updates immediately. The Read aloud function card also explains that every voice is supplied by the visitor’s browser or operating system, a selected voice may process the text through an online service, and the EZZE WCAG Pro Read aloud function sends neither the read-aloud request nor the page text to its own cloud service.

Basics (Free):

• Enable the Toolbar globally
• Show it on desktop and mobile independently
• Set the mobile breakpoint
• Enable or disable each visitor tool
• Offer the Reading mask separately from the Reading line and configure the height of its clear window
• Hide the footer, add an accessibility-statement link, or explicitly opt in to EZZE branding

Visual customization (from Basic):

• Trigger position, offset, shape, radius, shadow, and icon, background, and border colors
• Panel position, offset, title, close control, and overlay
• A fixed Light or Dark color scheme, radius, shadow, and typography

The opened Toolbar, Toolbar notices, and compact Read aloud player use fixed, contrast-checked palettes aligned with the mockups. The floating trigger remains separately customizable: its icon, background, and border colors apply identically in both previews and on the frontend. Choose combinations with at least 3:1 contrast between the icon and background and between the button boundary and the surrounding page. The visitor Colors tool remains independent and continues to change page content only, never the Toolbar itself.

Score tooltip (from Plus):

• Shows the stored Accessibility Test score while hovering over the closed trigger; it is hidden while the Toolbar is open

Existing installations retain trigger colors, the selected Light or Dark scheme, non-color design values, media exceptions, and image exceptions. Former administrator-defined opened-Toolbar surface, text, accent, internal-border, and overlay colors no longer apply and are removed from the canonical setting during migration.

Visitor actions and closing behavior

• Clicking the trigger again closes an open Toolbar.
• When an overlay is enabled, the trigger remains above it and operable.
• The optional close button, outside click when configured, and Escape provide dismissal paths.
• The compact Hide toolbar button action sits in the stable bottom action row beside Reset all and Keyboard help. On phones it becomes a space-saving labelled icon while retaining its complete accessible name. It hides the trigger for 24 hours, 7 days, or until manual restoration, and its duration choices open above the action row. A brief Undo action appears. Keyboard users can restore the trigger with Alt + Shift + A or the focusable restore control.
• The accessibility-statement footer can use a selected WordPress page or a custom URL and can open in the same or a new browser tab. New-tab links include a visible icon and a screen-reader notice.

Accessibility and testing notes

The Toolbar supports personal presentation preferences related to use of color, contrast, reflow, motion, focus visibility, and reading support. It supplements good implementation; it does not replace accessible semantic HTML, labels, keyboard support, alternatives, captions, or remediation in the website source.

Test the configured Toolbar at desktop, 390 px, 320 px, mobile landscape, and 200/400% zoom. Verify keyboard-only operation, visible focus, long translated labels, reduced motion, forced colors, 44-pixel touch targets, Read aloud controls, profile persistence, and that no preference recolors the Toolbar itself.

Available for: All plans Free

Visual customization: from Basic from Basic

Score tooltip: from Plus from Plus