Settings

In the admin area of your site, navigate to Tools > WCAG Admin Accessibility Tools.

• Skip to Content Link: Adds a visually hidden "Skip to main content" link at the top of every page for improved keyboard navigation.
• Alt Text Column & Inline Editing: Adds a sortable Alt Text column to the Media Library list view. Alt text can be updated directly within the table.
• Additional Media Columns: Adds columns for Dimensions, MIME Type (e.g. image/png), and File Size to the Media Library list view.
• Toolbar Toggles: Adds a menu to the admin bar on the front end with tools you can toggle to show errors on the page.
• Use WCAG AAA Color Contrast Compliance: When enabled, color contrast checks will enforce stricter AAA standards in addition to the default AA criteria, ensuring higher accessibility compliance on your site.
• Vague Link Texts: Comma-separated list of vague or generic link texts to check for, e.g. "click here, read more, more info".
• Mode Visibility: Controls who can see the mode switcher on the front end. Choose to limit visibility to administrators, logged-in users, or show it to everyone.

Media Library Enhancements

Enable "Alt Text Column & Inline Editing" and "Additional Media Columns" from Settings (see above). Then Navigate to Media > Library.

Click on the List View icon in the top bar:

You'll now see 4 new columns:

• Alt Text: Displays the current alt text for each image. Hovering reveals an [Edit] link for quick inline updates. This streamlines the process of ensuring that non-decorative images (e.g., logos, featured images, content visuals) have meaningful descriptions, which is critical for screen reader accessibility.
• Dimensions: Shows the pixel dimensions of each image. Understanding image size helps avoid unnecessarily large images that can cause layout issues or affect responsive design.
• Type: Displays the MIME type (e.g., image/jpeg, image/png). Useful for sorting and filtering by file type, especially when ensuring consistent formats for accessibility or performance optimization.
• File Size: Shows the image's file size. Large images can slow down page load times and negatively affect user experience, particularly for users on slow connections or mobile devices. This column helps quickly identify and optimize oversized files.

Toolbar Toggles

Navigate to the front-end of your site and take a look at your admin bar at the top of the screen. You'll see a menu item labeled "A11yToolkit" with a icon. The plugin automatically scans for issues found on the page, and will show you the total number of issues next to the label if any are found.

Hover over the toolbar icon and you'll see a dropdown of individual items to check for. You can select one at a time, and if there are any found you will see them on the page.

• Missing Alt Text: Highlights images that lack alt attributes. Alt text is essential for screen readers and users with visual impairments to understand the image content. Missing descriptions create significant barriers for non-sighted users. You can update the alt text easily from the Media Library (see above Media Library Enhancements).
• Poor Color Contrast for AA/AAA: Flags text elements that don’t meet WCAG 2.1 color contrast requirements (AA or optionally AAA). Adequate contrast ensures that text remains readable for users with visual impairments, including color blindness and low vision. The text will show a border with the contrast ratio. Hovering over the ratio will show you what it should be. Clicking on the ratio will open a new browser tab to WebAIM's color contrast checker where you can see more details and easily make adjustments to get the correct color codes to use when updating the contrast on your site.
• Vague Link Text: Identifies links with non-descriptive text (e.g., "click here" or "read more"). Clear and contextual link text helps screen reader users understand the destination or purpose of the link without needing surrounding context. A border will appear around the link that needs more context in the text. You can also edit the list of vague link texts in Settings.
• Improper Heading Hierarchy: Displays heading tags and highlights those that skip levels or are out of order. A logical heading structure is crucial for assistive technologies to navigate content efficiently and understand its organization. A border will appear around the ones that need fixing.
• Links Missing Underlines: Detects standard inline links that are not underlined. Underlining links is a visual cue for users, especially those with cognitive or visual disabilities, that the text is clickable and distinct from regular text. This check excludes buttons and navigation links, which do not need to be underlined as long as their appearance clearly indicates interactivity. A border will appear around the ones that should be underlined.

Modes

Modes include Dark Mode and Greyscale Mode, each offering specific accessibility benefits for users with visual or cognitive differences.

• Dark Mode: Reduces overall brightness by applying darker backgrounds and lighter text. This benefits users with light sensitivity, helps prevent eye strain in low-light environments, and can improve readability for some visual impairments. Due to theme variability, custom CSS may be needed for full compatibility. When active, a wcagaat-dark-mode class is added to <body>, and elements with the dark-mode class receive a #222222 background and #ffffff text color.
• Greyscale Mode: Applies a grayscale filter to all site content. This helps simulate color blindness during accessibility testing and can reduce visual overstimulation for neurodivergent users who are sensitive to bright or saturated colors.

Example CSS

.wcagaat-dark-mode .element { background: #222222; color: #ffffff; }

.wcagaat-dark-mode .element { background: #222222; color: #ffffff; }

Options

• Mode Visibility: Controls who can see the mode switcher on the front end. Choose to limit visibility to administrators, logged-in users, or show it to everyone.
• Mode Selector: The type of selector for switching to dark mode or greyscale mode.
• Default Logo URL: Optional. Provide the URL of a logo that should be replaced with the logo specified below when dark mode is enabled.
• Alternative Logo for Dark Mode: Optional. Provide the URL of a high-contrast or light-colored logo to be used automatically when dark mode is enabled.