aria-accessibility-toolkit
Last commit date
assets
10 months ago
frontend
10 months ago
includes
10 months ago
aria-accessibility-toolkit.php
10 months ago
index.php
10 months ago
readme.txt
10 months ago
readme.txt
250 lines
| 1 | === Web Accessibility Toolkit - ARIA Labels, Roles, Accessibility Checker (WCAG, ADA, EAA) === |
| 2 | Contributors: quicksnail |
| 3 | Tags: ada, accessibility, aria, wcag, eaa |
| 4 | Requires at least: 5.9 |
| 5 | Tested up to: 6.8 |
| 6 | Requires PHP: 7.0 |
| 7 | Stable tag: 1.5.2 |
| 8 | License: GPLv2 or later |
| 9 | License URI: http://www.gnu.org/licenses/gpl-2.0.html |
| 10 | |
| 11 | Scan with the Accessibility Checker, fix ARIA labels, ARIA attributes, landmark roles, contrast, alt tags & more to help comply with WCAG, ADA & EAA. |
| 12 | |
| 13 | == Description == |
| 14 | |
| 15 | **Web Accessibility Toolkit** makes it easy to improve your WordPress website's accessibility. |
| 16 | |
| 17 | Real-time scans of your site using the built-in Accessibility Checker and tools to help you fix accessibility issues. This plugins helps compliance with digital accessibility standards and laws such as WCAG, ADA, EAA, Section 508, EN 301 549, and AODA. |
| 18 | |
| 19 | |
| 20 | [Documentation](https://wcagforwp.com/docs/) | [PRO Plugin](https://wcagforwp.com/downloads/pro-plugin/) |
| 21 | |
| 22 | **Accessibility Features**: |
| 23 | |
| 24 | - Accessibilty Checker - real-time scans of your site for accessibility issues |
| 25 | - ARIA Label & Attributes - easily add aria-label and other attributes |
| 26 | - Landmark Roles - easily add landmark roles |
| 27 | - Image Alt Tags - quickly add missing alt tags to images in bulk |
| 28 | - Contrast Ratio - adjust contrast ratio of individual items |
| 29 | - One-click Fixes - single click fixes for outlines, tab order, viewports & more |
| 30 | - Targeted - fix various issues by targeting with CSS selectors |
| 31 | |
| 32 | |
| 33 | ### Available Accessibilty Fixes |
| 34 | |
| 35 | - **Frontend Accessibility Checker** |
| 36 | Get real-time site scans to identify common accessibility issues using the Accessibility Checker. |
| 37 | |
| 38 | - **ARIA Attributes** |
| 39 | Add ARIA attributes such as `aria-label`, `aria-hidden`, `aria-expanded`, `aria-live`, `aria-level`, and more to any element. |
| 40 | |
| 41 | - **ARIA Roles** |
| 42 | Assign semantic roles like `banner`, `navigation`, `main`, `complementary`, and `contentinfo` to improve screen reader navigation. |
| 43 | |
| 44 | - **Image Alt Tags** |
| 45 | Shows a list of all images that are missing alt tags, and allows you to easily update them all from the one spot. |
| 46 | |
| 47 | - **Contrast Adjustments** |
| 48 | Override text and background colors for low-contrast elements using accessible HEX values. |
| 49 | |
| 50 | - **Skip Link Target** |
| 51 | Add a keyboard/screen-reader-visible “Skip to content” link by defining a main content selector. |
| 52 | |
| 53 | - **Language Override** |
| 54 | Set or override the HTML `lang` attribute for improved screen reader compatibility. |
| 55 | |
| 56 | - **Focus Outline Enhancements** |
| 57 | Ensure visible focus styles are enforced for better keyboard navigation. |
| 58 | |
| 59 | - **Fix Tab Order** |
| 60 | Remove tabindex values greater than 0 to maintain a logical focus order. |
| 61 | |
| 62 | - **Make Viewport Scalable** |
| 63 | Remove user-scalable=no from the viewport meta tag to allow pinch-zooming. |
| 64 | |
| 65 | - **CSS Selector-Based Targeting** |
| 66 | Use any valid CSS selector to apply changes without modifying theme or template files. |
| 67 | |
| 68 | These features help to address many common accessibility issues, but also, a warning: There are many accessibility issues that cannot be fixed by patching them with a plugin. If your WordPress theme is built with accessibility in mind, then your site may only require a few tweaks to bring it up to compliance - this is where the Web Accessibility Toolkit could work great for your site. |
| 69 | |
| 70 | ### Why Use Web Accessibility Toolkit? |
| 71 | |
| 72 | Most WordPress themes don’t include full accessibility support. Web Accessibility Toolkit lets you patch those gaps quickly, keeping your site more inclusive and compliant. |
| 73 | |
| 74 | Whether you're a developer working on a client site or a business owner aiming for better usability, this plugin makes accessibility updates faster and easier. |
| 75 | |
| 76 | ### Compatibility |
| 77 | |
| 78 | - Compatible with all WordPress themes |
| 79 | - Works alongside popular page builders |
| 80 | - Designed with WCAG 2.1 AA standards in mind |
| 81 | |
| 82 | == Frequently Asked Questions == |
| 83 | |
| 84 | = What does this plugin do? = |
| 85 | Web Accessibility Toolkit lets you add ARIA attributes such as aria-label, roles such as role="navigation", contrast fixes, language settings, and more to your site - no code editing required. |
| 86 | |
| 87 | = Can this help me pass WCAG or accessibility audits? = |
| 88 | Yes. While no plugin alone guarantees compliance, this tool helps you meet several key WCAG 2.1 success criteria like semantic structure, sufficient contrast, and accessible navigation. |
| 89 | |
| 90 | = Does it work with any theme? = |
| 91 | Yes. The plugin is designed to work with any WordPress theme, including those built with page builders like Elementor, WPBakery, or Gutenberg. |
| 92 | |
| 93 | = Will it slow down my site? = |
| 94 | No. It’s lightweight and only outputs a small block of CSS (and optionally JavaScript) based on your settings. There's no third-party code or unnecessary overhead. |
| 95 | |
| 96 | = Can I use it without JavaScript? = |
| 97 | Sort of. The plugin uses CSS & PHP where possible. JavaScript is used for the frontend checker and dynamic updates that can't be done with CSS alone. |
| 98 | |
| 99 | = What kind of selectors can I use? = |
| 100 | Any valid CSS selector is supported — including classes (`.my-button`), IDs (`#main-header`), or element types (`nav`, `section`, etc.). |
| 101 | |
| 102 | = Can I apply multiple ARIA attributes to the same element? = |
| 103 | Yes. Simply add another row targeting the same selector with a different ARIA attribute. |
| 104 | |
| 105 | = What is the frontend checker for? = |
| 106 | It shows a small box on your site (admin-only) highlighting common accessibility issues like empty buttons, missing labels, broken ARIA references, and low contrast. |
| 107 | |
| 108 | = What does the “Skip Link” setting do? = |
| 109 | It adds a screen-reader-visible “Skip to content” link at the top of the page for keyboard users. Just define the CSS selector of your main content area. |
| 110 | |
| 111 | = What does the Language option do? = |
| 112 | It sets the `lang` attribute on your `<html>` tag — especially useful if your theme doesn’t already do this. |
| 113 | |
| 114 | = How does the Accessibility Checker work? = |
| 115 | There is an option in the admin to enable the Accessibility Checker and once enabled, admins will see a small box on the frontend of your website with a Scan Page button. Simply click this to start the accessibility scan and a list of issues will be displayed with details on how to fix them. |
| 116 | |
| 117 | = What are the full list of features? = |
| 118 | |
| 119 | The Web Accessibility Toolkit plugin provides tools to help improve frontend accessibility, scan for issues, and add missing ARIA roles, labels, and other enhancements. |
| 120 | |
| 121 | **Free Version Features:** |
| 122 | |
| 123 | 1. Frontend Accessibility Checker panel |
| 124 | 2. Scan for missing `aria-label` and `aria-labelledby` attributes |
| 125 | 3. Detect and highlight empty buttons or ARIA attributes |
| 126 | 4. Detect broken ARIA references (e.g. `aria-describedby` targets not found) |
| 127 | 5. Detect low color contrast issues (text vs background) |
| 128 | 6. Detect skipped heading levels (e.g. jumping from h2 to h4) |
| 129 | 7. Detect missing `alt` text on images |
| 130 | 8. Detect form fields without labels or ARIA labels |
| 131 | 9. Detect duplicate link text with different destinations |
| 132 | 10. Detect use of `user-scalable=no` in viewport meta tag |
| 133 | 11. Detect missing page title |
| 134 | 12. Detect duplicate IDs in the DOM |
| 135 | 13. Detect use of `tabindex` values greater than 0 |
| 136 | 14. Detect non-focusable interactive elements |
| 137 | 15. Live preview: "Show" and "Copy Selector" buttons for each issue |
| 138 | 16. Fix suggestions for supported issues via plugin settings page |
| 139 | 17. ARIA role injection via CSS selectors |
| 140 | 18. Add landmark roles like `navigation`, `main`, `banner`, and more |
| 141 | 19. Add `aria-label` to menu items or custom HTML elements |
| 142 | 20. Set default `lang` attribute on the HTML tag |
| 143 | 21. Add skip link anchor to improve keyboard navigation |
| 144 | 22. Disable animations for motion-sensitive users |
| 145 | 23. Enable high-contrast mode support (coming soon) |
| 146 | 24. Lightweight, modular design — only loads what’s needed |
| 147 | |
| 148 | **PRO Version Features:** |
| 149 | |
| 150 | 1. Form scanning |
| 151 | 1. Automatic form fixes |
| 152 | 1. Unlimited menu targeting for ARIA attributes |
| 153 | 1. Unlimited menu targeting for ARIA roles |
| 154 | 1. Full list of selectable ARIA attributes |
| 155 | 1. Full list of selectable landmark roles |
| 156 | |
| 157 | |
| 158 | Note: Not all issues can be automatically fixed. Some must be addressed in your theme or content. |
| 159 | |
| 160 | = Is there a Pro version? = |
| 161 | Yes! A Pro version unlocks unlimited menu targeting and advanced attribute/role options. Visit [wcagforwp.com](https://wcagforwp.com) to learn more. |
| 162 | |
| 163 | == Installation == |
| 164 | |
| 165 | ### Using the WordPress Dashboard |
| 166 | 1. Navigate to “Add New” in the plugins dashboard |
| 167 | 2. Search for “Web Accessibility Toolkit” |
| 168 | 3. Click “Install Now” |
| 169 | 4. Activate the plugin on the Plugin dashboard |
| 170 | 5. Go to Settings > Web Accessibility to start configuration |
| 171 | |
| 172 | ### Uploading in WordPress Dashboard |
| 173 | 1. Click the download button on this and save “aria-accessibility-toolkit.zip” to your computer |
| 174 | 2. Navigate to “Add New” in the plugins dashboard |
| 175 | 3. Navigate to the “Upload” area |
| 176 | 4. Select “aria-accessibility-toolkit.zip” from your computer |
| 177 | 5. Click “Install Now” |
| 178 | 6. Activate the plugin in the Plugin dashboard |
| 179 | 7. Go to Settings > Web Accessibility to start configuration |
| 180 | |
| 181 | ### Uing FTP |
| 182 | 1. Download the Web Accessibility Toolkit ZIP file |
| 183 | 2. Extract the Web Accessibility Toolkit ZIP file to your computer |
| 184 | 3. Upload the “aria-accessibility-toolkit” directory to the `/wp-content/plugins/` directory |
| 185 | 4. Activate the plugin in the Plugin dashboard |
| 186 | 5. Go to Settings > Web Accessibility to start configuration |
| 187 | |
| 188 | == Screenshots == |
| 189 | |
| 190 | 1. The General Settings section - configure general accessibility options |
| 191 | 2. The ARIA attributes section - configure ARIA attributes options |
| 192 | 3. The Roles section - configure landmark roles options |
| 193 | 4. The Contrast section - configure contrast accessibility options |
| 194 | 5. The frontend accessibility scanner - check your site for accessibility issues |
| 195 | 6. The Images section - update alt tags on your images |
| 196 | |
| 197 | == Changelog == |
| 198 | |
| 199 | = 1.5.2 (2025-08-05) = |
| 200 | * Update frontend accessibility checker with Level, links to the WCAG page and cleaner style |
| 201 | |
| 202 | = 1.5.1 (2025-08-04) = |
| 203 | * Add links to leave a review |
| 204 | |
| 205 | = 1.5.0 (2025-07-31) = |
| 206 | * Major styling update |
| 207 | |
| 208 | = 1.4.2 (2025-07-29) = |
| 209 | * Add new bulk buttons to Image Alt option |
| 210 | * Add Forms tab |
| 211 | * Refactor WCAG frontend checker |
| 212 | * Styling updates to frontend accessibility checker |
| 213 | |
| 214 | = 1.4.1 (2025-07-11) = |
| 215 | * Fix issue with nav_menu_link_attributes filter only passing 3 args |
| 216 | * Minor CSS fixes |
| 217 | * Minor bug fixes to frontend accessibility checker |
| 218 | |
| 219 | = 1.4.0 (2025-07-10) = |
| 220 | * Add "Image Alt Tags" option |
| 221 | |
| 222 | = 1.3.1 (2025-07-09) = |
| 223 | * Add "Fix Tab Order" option |
| 224 | * Add "Make Viewport Scalable" option |
| 225 | * Refactor frontend accessibility checker options & update help text |
| 226 | * Add FIX buttons to frontend accessibility checker |
| 227 | |
| 228 | = 1.3.0 (2025-07-07) = |
| 229 | * Add frontend accessibility checker |
| 230 | * Add "skip link" option |
| 231 | * Add "HTML language override" option |
| 232 | * Add "focus outline" option |
| 233 | |
| 234 | = 1.2.1 (2025-07-05) = |
| 235 | * Minor bug fixes |
| 236 | |
| 237 | = 1.2.0 (2025-07-04) = |
| 238 | * Add new General Options |
| 239 | * General bug fixes and prefixing options |
| 240 | * Correctly enqueue admin JS |
| 241 | |
| 242 | = 1.1.0 (2025-07-01) = |
| 243 | * Naming updates |
| 244 | |
| 245 | = 1.0.1 (2025-06-11) = |
| 246 | * Add all ARIA options to ARIA tab |
| 247 | |
| 248 | = 1.0.0 (2025-06-11) = |
| 249 | * Initial Release |
| 250 |