=== ARIA & Accessibility - ARIA Labels, Attributes & Roles, Accessibility Checker === Contributors: wcagforwp Tags: aria, accessibility, wcag, a11y, contrast Requires at least: 5.9 Tested up to: 6.8 Requires PHP: 7.0 Stable tag: 1.3.1 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Improve accessibility with ARIA attributes & labels, landmark roles, contrast, skip link, accessibility checker & more. Work towards WCAG compliance. == Description == [Documentation](https://wcagforwp.com/docs/) **ARIA & Accessibility Toolkit** makes it easy to improve your WordPress site's accessibility by adding important ARIA attributes, semantic roles, contrast settings and many other small accessibility fixes to assist with WCAG. A lot of of common accessibility issues can not be fixed without editing theme files, and ARIA & Accessibility Toolkit is not intended to make your site compatible with any particluar guidelines, but rather provides features to help your site work towards being compliant. - Works with all themes - Works with all plugins - Lightweight and fast - Ideal for developers, agencies, and accessibility-conscious site owners ### Features of ARIA & Accessibility Toolkit - **ARIA Attributes** Add ARIA attributes such as `aria-label`, `aria-hidden`, `aria-expanded`, `aria-live`, `aria-level`, and more to any element. - **ARIA Roles** Assign semantic roles like `banner`, `navigation`, `main`, `complementary`, and `contentinfo` to improve screen reader navigation. - **Contrast Adjustments** Override text and background colors for low-contrast elements using accessible HEX values. - **Frontend Accessibility Checker** Enable a visual overlay to identify common accessibility issues (admin-only). - **Skip Link Target** Add a keyboard/screen-reader-visible “Skip to content” link by defining a main content selector. - **Language Override** Set or override the HTML `lang` attribute for improved screen reader compatibility. - **Focus Outline Enhancements** Ensure visible focus styles are enforced for better keyboard navigation. - **Fix Tab Order** Remove tabindex values greater than 0 to maintain a logical focus order. - **Make Viewport Scalable** Remove user-scalable=no from the viewport meta tag to allow pinch-zooming. - **CSS Selector-Based Targeting** Use any valid CSS selector to apply changes without modifying theme or template files. ### Why Use ARIA & Accessibility Toolkit? Most WordPress themes don’t include full accessibility support. ARIA & Accessibility Toolkit lets you patch those gaps quickly, keeping your site more inclusive and compliant. 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. ### Compatibility - Compatible with all modern WordPress themes - Works alongside popular page builders - Designed with WCAG 2.1 AA standards in mind == Frequently Asked Questions == = What does this plugin do? = ARIA & 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. = Can this help me pass WCAG or accessibility audits? = 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. = Does it work with any theme? = Yes. The plugin is designed to work with any WordPress theme, including those built with page builders like Elementor, WPBakery, or Gutenberg. = Will it slow down my site? = 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. = Can I use it without JavaScript? = 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. = What kind of selectors can I use? = Any valid CSS selector is supported — including classes (`.my-button`), IDs (`#main-header`), or element types (`nav`, `section`, etc.). = Can I apply multiple ARIA attributes to the same element? = Yes. Simply add another row targeting the same selector with a different ARIA attribute. = What is the frontend checker for? = 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. = What does the “Skip Link” setting do? = 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. = What does the Language option do? = It sets the `lang` attribute on your `` tag — especially useful if your theme doesn’t already do this. = What are the full list of features? = The ARIA & Accessibility Toolkit plugin provides tools to help improve frontend accessibility, scan for issues, and add missing ARIA roles, labels, and other enhancements. **Free Version Features:** 1. Frontend Accessibility Checker panel 2. Scan for missing `aria-label` and `aria-labelledby` attributes 3. Detect and highlight empty buttons or ARIA attributes 4. Detect broken ARIA references (e.g. `aria-describedby` targets not found) 5. Detect low color contrast issues (text vs background) 6. Detect skipped heading levels (e.g. jumping from h2 to h4) 7. Detect missing `alt` text on images 8. Detect form fields without labels or ARIA labels 9. Detect duplicate link text with different destinations 10. Detect use of `user-scalable=no` in viewport meta tag 11. Detect missing page title 12. Detect duplicate IDs in the DOM 13. Detect use of `tabindex` values greater than 0 14. Detect non-focusable interactive elements 15. Live preview: "Show" and "Copy Selector" buttons for each issue 16. Fix suggestions for supported issues via plugin settings page 17. ARIA role injection via CSS selectors 18. Add landmark roles like `navigation`, `main`, `banner`, and more 19. Add `aria-label` to menu items or custom HTML elements 20. Set default `lang` attribute on the HTML tag 21. Add skip link anchor to improve keyboard navigation 22. Disable animations for motion-sensitive users 23. Enable high-contrast mode support (coming soon) 24. Lightweight, modular design — only loads what’s needed **PRO Version Features:** 1. Unlimited menu targeting for ARIA attributes 1. Unlimited menu targeting for ARIA roles 1. Full list of selectable ARIA attributes 1. Full list of selectable landmark roles Note: Not all issues can be automatically fixed. Some must be addressed in your theme or content. = Is there a Pro version? = Yes! A Pro version unlocks unlimited menu targeting and advanced attribute/role options. Visit [wcagforwp.com](https://wcagforwp.com) to learn more. == Installation == ### Using the WordPress Dashboard 1. Navigate to “Add New” in the plugins dashboard 2. Search for “ARIA & Accessibility Toolkit” 3. Click “Install Now” 4. Activate the plugin on the Plugin dashboard 5. Go to Settings > ARIA Toolkit to start configuration ### Uploading in WordPress Dashboard 1. Click the download button on this and save “aria-accessibility-toolkit.zip” to your computer 2. Navigate to “Add New” in the plugins dashboard 3. Navigate to the “Upload” area 4. Select “aria-accessibility-toolkit.zip” from your computer 5. Click “Install Now” 6. Activate the plugin in the Plugin dashboard 7. Go to Settings > ARIA Toolkit to start configuration ### Uing FTP 1. Download the ARIA & Accessibility Toolkit ZIP file 2. Extract the ARIA & Accessibility Toolkit ZIP file to your computer 3. Upload the “aria-accessibility-toolkit” directory to the `/wp-content/plugins/` directory 4. Activate the plugin in the Plugin dashboard 5. Go to Settings > ARIA Toolkit to start configuration == Screenshots == 1. The General Settings page - configure general accessibility options 2. The ARIA attributes section - configure ARIA attributes options 3. The Roles section - configure landmark roles options 4. The Contrast section - configure contrast accessibility options 5. The frontend accessibility scanner - check your site for accessibility issues == Changelog == = 1.3.1 (2025-07-09) = * Add "Fix Tab Order" option * Add "Make Viewport Scalable" option * Refactor frontend accessibility checker options & update help text * Add FIX buttons to frontend accessibility checker = 1.3.0 (2025-07-07) = * Add frontend accessibility checker * Add "skip link" option * Add "HTML language override" option * Add "focus outline" option = 1.2.1 (2025-07-05) = * Minor bug fixes = 1.2.0 (2025-07-04) = * Add new General Options * General bug fixes and prefixing options * Correctly enqueue admin JS = 1.1.0 (2025-07-01) = * Naming updates = 1.0.1 (2025-06-11) = * Add all ARIA options to ARIA tab = 1.0.0 (2025-06-11) = * Initial Release