Royal Access Documentation
Guide to the Royal Access accessibility toolkit for WordPress. Configure the floating toolbar, automatic fixes, contrast checker, and statement generator.
Getting Started
Royal Access adds a floating accessibility toolbar to your WordPress site, giving visitors control over font size, contrast, spacing, cursor, and more. It also applies automatic code-level fixes for skip links, focus styles, viewport scaling, and screen reader improvements.
Why Accessibility Matters
Legal Requirements
Many jurisdictions require websites to be accessible. ADA, EAA, and WCAG guidelines set the standard.
Wider Audience
15% of the world's population experiences some form of disability. Accessible sites reach more people.
Better SEO
Accessible sites tend to have better structure, which search engines reward with higher rankings.
User Experience
Accessibility improvements like better contrast and keyboard navigation benefit all users, not just those with disabilities.
Requirements
- WordPress 5.9 or higher
- PHP 7.4 or higher
Installation
From WordPress.org
Search for the plugin
In your WordPress admin, go to Plugins > Add New and search for "Royal Access"
Install and activate
Click "Install Now" then "Activate" once installation completes
Configure settings
Navigate to Settings > Royal Access in your admin menu to begin setup
Manual Installation
Download the plugin
Download the ZIP file from WordPress.org
Upload to WordPress
Go to Plugins > Add New > Upload Plugin, select the ZIP file, and click Install Now
Activate the plugin
Click "Activate Plugin" after installation completes
Quick Start
Get accessibility features running on your site in under 2 minutes:
Enable the toolbar
Go to Settings > Royal Access and toggle "Enable Accessibility Toolbar" on
Choose features
Select which toolbar buttons to show (font size, contrast, spacing, etc.)
Enable auto fixes
Toggle on Skip Link, Focus Styles, Viewport Fix, and Read More fixes
Test your site
Visit your frontend and verify the toolbar appears and works correctly
Start with the default settings. All toolbar features and auto fixes are enabled by default. You can selectively disable features you don't need.
Font Size
The Font Size button allows visitors to increase text size across your entire site. It cycles through 3 levels of magnification:
- Level 1 - Increases text by 10%
- Level 2 - Increases text by 20%
- Level 3 - Increases text by 30%
Clicking the button again after level 3 resets the font size back to normal. This feature works by applying a CSS class to the <body> element, ensuring it affects all text content on the page.
Line Height
The Line Height button increases the spacing between lines of text, making paragraphs and content blocks easier to read. This is particularly helpful for users with cognitive disabilities or visual impairments who lose their place when lines are too close together.
Letter Spacing
The Letter Spacing button widens the space between individual characters. This feature is especially beneficial for users with dyslexia, as increased letter spacing reduces the visual crowding effect that makes text difficult to parse.
Contrast Modes
The High Contrast button cycles through three contrast modes to improve readability for users with low vision or light sensitivity:
- Light Mode - High contrast with a light background and dark text
- Dark Mode - High contrast with a dark background and light text
- Inverted - Inverts all colors on the page
Clicking the button again after the third mode returns the page to its original contrast settings.
Highlight Links
The Highlight Links button outlines all clickable links on the page with a visible border, making them easy to identify. This is essential for users who rely on visual cues to distinguish interactive elements from regular text, and it benefits anyone navigating unfamiliar pages.
Big Cursor
The Big Cursor button enlarges the mouse cursor, making it easier to track on screen. This feature is designed for users with motor impairments or low vision who have difficulty locating the cursor.
The enlarged cursor preserves the correct cursor type for interactive elements: pointer cursors appear over links and buttons, text cursors appear over input fields, and the default arrow appears elsewhere.
Reading Guide
The Reading Guide adds a horizontal line that follows the mouse position vertically as it moves down the page. This provides a visual reference line similar to using a ruler or finger while reading printed text.
This feature is particularly helpful for users with attention disorders, dyslexia, or any condition that makes it difficult to track which line of text they are reading.
Hide Images
The Hide Images button hides decorative and content images on the page. This can reduce visual clutter and distractions for users who find images overwhelming or who are using screen readers.
Navigation icons and essential UI elements are preserved to ensure the site remains functional with images hidden.
Dyslexia Font
The Dyslexia Font button switches all text on the page to the OpenDyslexic typeface. OpenDyslexic uses weighted bottoms on characters to help prevent letter rotation and mirroring, which are common reading difficulties for people with dyslexia.
This change applies to all text elements including headings, paragraphs, links, and form fields.
Stop Animations
The Stop Animations button pauses all CSS animations and transitions on the page. This is critical for users with vestibular disorders, epilepsy, or motion sensitivity who may experience discomfort or seizures from moving content.
The toolbar itself is excluded from the animation pause to ensure it remains functional and responsive.
Text Alignment
The Text Alignment button cycles through four alignment options for all text content:
- Left - Aligns text to the left edge
- Center - Centers text horizontally
- Right - Aligns text to the right edge
- Justify - Distributes text evenly across the full width
This feature is useful for users who find certain text alignments easier to read based on their visual processing preferences or reading direction.
Saturation
The Saturation button adjusts the color intensity of the entire page. It cycles through three modes:
- Low Saturation - Reduces color intensity for users who find vivid colors overwhelming
- High Saturation - Increases color intensity for users who need more color differentiation
- Desaturated - Removes all color, rendering the page in grayscale
This benefits users with color vision deficiencies, light sensitivity, or cognitive conditions where color can be distracting.
Page Structure
The Page Structure button displays an outline of the heading hierarchy on the current page. It shows all <h1> through <h6> headings in a nested list, giving users a quick overview of the page content and structure.
This is especially useful for screen reader users who navigate by headings, and for content authors who want to verify their heading structure is logical and properly nested.
Reset
The Reset button clears all active accessibility preferences and returns the page to its original state. All toolbar settings are deactivated and the saved preferences in localStorage are removed.
All toolbar preferences are saved in the browser's localStorage. No cookies are set, no data is sent to any server, and no personal information is collected. This makes Royal Access fully GDPR-friendly out of the box.
Skip Link
When enabled, Royal Access injects a "Skip to content" link immediately after the <body> tag. This link is visually hidden by default and appears only when it receives keyboard focus (when a user presses Tab).
Skip links are a WCAG 2.1 Level A requirement (Success Criterion 2.4.1). They allow keyboard users to bypass repetitive navigation menus and jump directly to the main content area of the page.
Focus Styles
When enabled, Royal Access adds a consistent :focus-visible outline (2px solid blue) to all focusable elements across your site. This ensures keyboard users can always see which element is currently focused.
Many themes remove or suppress default focus styles for aesthetic reasons, making keyboard navigation impossible. This auto fix restores visible focus indicators without affecting mouse users, since :focus-visible only activates during keyboard navigation.
Viewport Scaling
When enabled, Royal Access removes user-scalable=no and maximum-scale=1 from the viewport meta tag. Some themes and page builders add these attributes to prevent users from zooming in on mobile devices.
This is a WCAG 2.1 Level AA requirement (Success Criterion 1.4.4). Users with low vision rely on pinch-to-zoom to read content on mobile devices, and blocking this functionality creates a significant accessibility barrier.
Read More Links
When enabled, Royal Access adds descriptive aria-label attributes to "Read more" links that include the associated post title. For example, a generic "Read more" link becomes "Read more about Introduction to Accessibility" for screen readers.
Without this fix, screen reader users navigating by links hear a list of identical "Read more" links with no context about which post each one leads to. This fix satisfies WCAG 2.1 Level A (Success Criterion 2.4.4 - Link Purpose).
Contrast Checker
The Contrast Checker is an admin tool found in the Royal Access settings page. Enter any two hex color values (foreground and background) to calculate the contrast ratio and check compliance with WCAG standards.
The checker reports:
- Contrast Ratio - The calculated ratio between the two colors (e.g., 4.5:1)
- WCAG AA (Normal Text) - Requires a minimum ratio of 4.5:1
- WCAG AA (Large Text) - Requires a minimum ratio of 3:1
- WCAG AAA (Normal Text) - Requires a minimum ratio of 7:1
- WCAG AAA (Large Text) - Requires a minimum ratio of 4.5:1
Use this tool to verify your theme's color combinations meet accessibility standards before publishing.
Statement Generator
The Statement Generator creates a starting-point accessibility statement for your website. Enter your site name, contact email, and select the accessibility standards you aim to comply with (WCAG 2.1 AA, ADA, EAA, etc.).
The generator produces an HTML block that you can copy and paste into a dedicated accessibility page on your site. The statement includes your commitment to accessibility, the standards you follow, and contact information for reporting issues.
The statement generator creates a template only. It does NOT constitute legal compliance. Have a qualified accessibility professional review your statement and verify your site meets the standards you claim to follow.
Settings
The Royal Access settings page (Settings > Royal Access) is where you configure all toolbar features and automatic fixes. Key settings include:
- Enable Accessibility Toolbar - Master toggle to show or hide the toolbar on your frontend
- Toolbar Position - Choose where the toolbar appears (left or right side of the screen)
- Feature Toggles - Enable or disable individual toolbar buttons (font size, contrast, cursor, etc.)
- Auto Fix Toggles - Enable or disable automatic code-level fixes (skip link, focus styles, viewport, read more)
- Contrast Checker - Test color combinations directly from the settings page
- Statement Generator - Generate an accessibility statement for your site
Troubleshooting
Toolbar not showing on the frontend
- Verify that "Enable Accessibility Toolbar" is toggled on in Settings > Royal Access.
- Check your browser console (F12 > Console) for JavaScript errors that may be preventing the toolbar from loading.
- Confirm the plugin is activated in Plugins > Installed Plugins.
- Try clearing any page cache (if using a caching plugin like ForgeCache, WP Super Cache, etc.).
CSS conflicts with theme
- Some themes override cursor styles, font families, or contrast settings with high-specificity CSS rules.
- If the Big Cursor or Dyslexia Font features are not applying correctly, the theme may be using
!importantdeclarations that take priority. - Try switching to a default WordPress theme (like Twenty Twenty-Four) to confirm it is a theme conflict.
- Contact support if you need help resolving a specific theme conflict.
Toolbar overlapping other elements
- The Royal Access toolbar uses
z-index: 999999to ensure it stays above other page elements. - If the toolbar is hidden behind another element (such as a sticky header or chat widget), that element has an even higher z-index.
- Adjust your theme or other plugin's z-index values to resolve the conflict, or contact support for assistance.
Emergency Reset
If a visitor's accessibility preferences cause display issues or if they want to quickly return to default settings, there are two reset methods:
URL Parameter Reset
Add ?raccess-reset=1 to the end of any page URL on your site. This instantly clears all saved toolbar preferences from the browser's localStorage and reloads the page with default settings.
Example: https://yoursite.com/?raccess-reset=1
Keyboard Shortcut Reset
Press the Escape key 3 times quickly (within 1.5 seconds) to reset all toolbar settings back to defaults. This provides a keyboard-accessible way to reset without needing to modify the URL.
These reset methods are useful when a combination of accessibility settings (e.g., inverted contrast + hidden images) makes it difficult to navigate to the toolbar's Reset button. Share the URL parameter method with users who report display issues.
Frequently Asked Questions
Does Royal Access make my site WCAG compliant?
No. Royal Access provides tools that help visitors customize their experience and applies automatic fixes for common accessibility issues. However, full WCAG compliance requires proper HTML markup, logical heading structure, descriptive alt text, accessible forms, and proper content practices. Royal Access is a layer on top of your existing site, not a replacement for accessible design.
Does the toolbar work with page builders?
Yes. The toolbar is designed to work alongside Elementor, Divi, Gutenberg, WPBakery, and other page builders. It applies CSS classes to the <body> element and uses broad selectors that work regardless of the underlying page structure.
Does Royal Access store cookies?
No. All user preferences are saved in the browser's localStorage. No cookies are set, no tracking is performed, and no personal data is collected or transmitted. This makes Royal Access fully GDPR-friendly without requiring additional cookie consent notices.
Will it slow down my site?
No. The toolbar CSS and JavaScript combined are under 15KB. Everything loads asynchronously and does not block page rendering. The performance impact is negligible even on mobile devices.
Can I customize which features appear in the toolbar?
Yes. Each toolbar feature can be individually enabled or disabled from the Settings > Royal Access page. You can show only the features that are most relevant to your audience.
Does the toolbar work on mobile devices?
Yes. The toolbar is fully responsive and works on smartphones and tablets. Some features like Big Cursor and Reading Guide are automatically adapted for touch interfaces.
Need more help?
Search our knowledge base, submit a ticket, or chat with our support team.