Visualize how your site works with assistive technologies to improve accessibility using tota11y.
The internet is a wonderful place but not all websites are accessible to everyone. This plugin aims to help WordPress website owners test, check, and QA their websites for improvements on making them accessible.
What does it do?
This plugin adds tota11y®, an accessibility visualization toolkit, to the frontend of your website for site admins so you can easily see it marked up with annotations on where your site fails and succeeds in addressing accessibility.
What is Tested?
Headings
Highlights headings (<h1>, <h2>, etc.) and order violations
Contrast
Labels elements with insufficient Contrast
Link Text
Identifies links that may be confusing when read by a screen reader
Labels
Identifies inputs with missing labels
Image alt-text
Annotates images without alt text
Landmarks
Labels all ARIA landmarks
Screen Reader Wand (Experimental)
Hover over elements to view them as a screen reader would
Screenshots
Close-up of the tota11y widget
Screenshot of author's homepage with a red arrow drawn over to point to the widget fixed to the bottom left of the browser window
Screenshot of the author's homepage with the tota11y widget menu opened showing the available features to test: headings, contrast, link text, labels, image alt-text, landmarks and screen reader wand (experimental)
Screenshot of the author's homepage with the headings feature enabled. The screenshot is annotated with a red circle over the headings option in the menu showing it is checked and red arrows pointing to the headings summary along with the display of headings on the page itself that match the indented list in the summary tab.
Screenshot of the author's homepage with the contrast feature enabled. The screenshot is annotated with a red circle over the contrast option in the menu showing it is checked and red arrows pointing to the contrast ratio calcuations that appear around various elements. A calcuation in green shows that it passes validation while one in red shows it fails.
Screenshot of the author's homepage with the landmarks feature enabled. The screenshot is annotated with a red circle over the landmarks option in the menu showing it is checked and red circles around the yellow labels displaying landmarks discovered on the webpage.
An animated GIF image showing the author's homepage with the screen reader wand enabled. The looping GIF image shows a cursor moving around the page, showing how a blue box highlights various elements on the page while it also displays the screen-reader friendly text from that element in the bottom right box.
Screenshot of the settings screen in the WordPress backend. It shows the default settings where "Enabled" is turned on, "Allowed User Roles" is set to "administrator" and "Debug Mode" is turned off.
How do I use it?
Simply install/activate the plugin and view the frontend of your WordPress website! The widget will appear as a small, black block with a pair of white sunglasses fixed to the bottom-left of your browser. Click on the widget to open its menu for the different types of tools you can use.
Who can see the testing widget?
By default, the widget will only appear for WordPress administrators, so your site’s viewers will not see the widget.
How does it work?
This plugin uses an accessibility visualization toolkit called tota11y.
Can I turn it off if I don’t have access to the plugin page?
Yes! You can turn it on or off from the settings screen under Settings > Accessibility Checker. It is the first setting labled Enabled
How can I enable this for my editors?
On the settings screen under Settings > Accessibility Checker, you can edit the text field for Allowed User Roles to be something like administrator,editor to allow users with the editor role to see the widget when it’s enabled. This also works for custom user roles too. The default value is set to administrator and is inclusive of super admins for multisite installations.
How can I make it so it’s only enabled if `WP_DEBUG` is set to true?
On the settings screen under Settings > Accessibility Checker, simply toggle the setting for Debug Mode to on and save your settings.
Can I set these settings using constant variables in my wp-config.php?
Yes! Whether you want to force all websites in a multisite installation to use the same settings or easily push settings from one installation to another, you can do so with these constant variables.
define('AURISE_ACCESSIBILITY_CHECKER_ENABLED', true); // Display the widget for allowed roles
define('AURISE_ACCESSIBILITY_CHECKER_ALLOWED_ROLES', 'administrator'); // Comma-separated list of user roles allowed to see the widget
define('AURISE_ACCESSIBILITY_CHECKER_DEBUG_MODE', true); // If true, only show the widget to the allowed user roles when WP_DEBUG is also set to true
Is this the official tota11y WordPress plugin?
No, this WordPress plugin is not a product of tota11y or its creators, the Khan Academy. It was developed by an independent and disabled web developer that wants to bring more accessibility to the digital space.
ChangeLog
1.0.1
Release Date: April 20, 2024
- Update: Utilized the new feature to defer load the script in the footer.
- Marked compatible with WordPress core 6.5.
1.0.0
Release Date: February 15, 2023
- Major: First release to the public!
