Making your WordPress site accessible is easier than it used to be, especially if you’re not comfortable editing code. One of the most important parts of accessibility is using ARIA attributes correctly.
These attributes help screen readers understand the structure and meaning of your content, particularly for users who rely on keyboard navigation or assistive technology.
If you’ve ever looked into accessibility and felt overwhelmed by the idea of manually adding aria-label, role="navigation", or aria-describedby attributes into your theme files, you’re not alone.
The good news is that you can now do all of this without writing a single line of code, by using a plugin like the Web Accessibility Toolkit.
This guide will walk you through what ARIA roles and labels are, why they matter, and how to apply ARIA labels to your WordPress site using a simple point-and-click interface.
What Are ARIA Labels & ARIA Roles?
ARIA stands for Accessible Rich Internet Applications, and it’s a specification designed to improve the accessibility of web content, especially for dynamic interfaces and modern layouts that use custom elements or JavaScript.
Common ARIA Attributes
role="navigation"– Helps screen readers identify a group of navigation linksaria-label="Main menu"– Provides a label to describe the function of an elementaria-describedby="some-id"– Connects an element to another element that provides additional informationaria-hidden="true"– Hides content from assistive technology if it isn’t helpful or relevant
When used correctly, these attributes can dramatically improve the user experience for people using screen readers.
Why Use ARIA in WordPress?
Many WordPress themes and plugins are not fully accessible out of the box. Even if your design looks great visually, assistive technology may struggle to interpret your site’s structure.
For example:
- A
<nav>element without a role or label may not be recognized as a navigation menu - A button may look like a button but lack a meaningful label, confusing screen reader users
- A group of related form fields may be missing proper descriptions or grouping, making them harder to understand
Adding ARIA roles and labels solves these problems by giving structure and context to your HTML.
Adding ARIA Roles and Labels Without Code
If you’re not a developer or you simply want to speed up the process, the Web Accessibility Toolkit gives you a way to add ARIA attributes directly from the WordPress dashboard, without code.
Step 1: Install and Activate the Plugin
From your WordPress dashboard:
- Go to Plugins > Add New
- Search for Web Accessibility Toolkit
- Click Install, then Activate
Once the plugin is active, a new settings section will appear under Settings > Web Accessibility.
You can also directly download the Web Accessibility Toolkit plugin here (opens in new tab).
Step 2: Open the ARIA Tab
Navigate to Web Accessibility in in the main menu, then click on the ARIA tab. This is where you’ll be able to apply ARIA roles and labels to key parts of your site.
You’ll see sections for:
- Menus
- Custom ARIA attributes
Each section lets you target common elements on your site and assign appropriate ARIA attributes.
Examples of What You Can Do
Add ARIA Labels to any item on your site
You can add ARIA labels and ARIA attributes to any item on your website. It could be a button, a link, a paragraph tag, a ‘close’ icon on a popup or anything else.
You do this by targeting the CSS selector of that item.
Within the Web Accessibility Toolkit you will see the Custom ARIA Attributes section as shown below. As you can see, you simply need to add the CSS selector of an item and then select the ARIA attribute you want to use and then set the Value of the attribute.
It’s that simple.
Two questions might pop up for you about this:
- How do I know that an item needs an ARIA attribute?
- How do I find the CSS selcetor of the item?
The Web Accessibility Toolkit answers both of these questions. The built in Accessibility Scanner will show you exactly which items require ARIA attributes, ARIA labels and ARIA roles.
Once you have scanned your page and the scanner has identified the items that are missing, it provides a simple ‘Copy Selector’ button that you click and you now have the selector saved and ready to be pasted into the admin area.
Add ARIA Labels to Navigation Menus
The plugin allows you to add a new ARIA Label field to all items within that menu. This is ideal when the link text might be “read more” but adding an aria-label like “Learn more about our company” is much more descriptive.
To do this:
- Select the menu from the list of registered menus
- Click Save
- Now visit that menu within the WordPress main menu
- You’ll now see the label field within each menu item
- Add your descriptive text
These labels will now be added directly to the corresponding menu items when the page loads.
Apply ARIA Roles to Common Areas
You can assign ARIA landmark roles like:
mainfor your main content areabannerfor your site headercomplementaryfor sidebarscontentinfofor the footer
These roles help screen reader users skip directly to key parts of your page. You don’t need to know the exact HTML structure. The plugin targets the correct elements automatically based on your theme and settings.
What If You Use a Page Builder?
The Web Accessibility Toolkit works with most popular page builders, including:
- Elementor
- Divi
- Beaver Builder
- Gutenberg (block editor)
Content created with these tools sometimes lacks proper labels or structure. The plugin scans the output and injects the correct ARIA attributes wherever possible, even if your layout is built with drag-and-drop tools.
How This Helps with WCAG and ADA Compliance
Adding ARIA roles and labels addresses several WCAG 2.1 success criteria, including:
- 1.3.1: Info and Relationships
- 4.1.2: Name, Role, Value
- 2.4.6: Headings and Labels
- 1.3.2: Meaningful Sequence
These criteria are part of what’s expected under both WCAG (opens in new tab) and legal requirements like the ADA and Section 508 (opens in new tab). While ARIA alone won’t make a site fully compliant, it’s a key part of building a more inclusive and legally defensible website.
Final Tips for Using ARIA Effectively
- Only use ARIA attributes when needed. Avoid adding extra markup if native HTML elements can do the job.
- Use clear, descriptive labels. Avoid vague terms like “Menu 1” or “Click here”.
- Test your changes with screen readers such as NVDA or VoiceOver to ensure they’re working as intended.
- Pair ARIA roles with good semantic structure. Proper headings, landmarks, and labels should work together.
Summary
Adding ARIA labels to your WordPress site is one of the most impactful things you can do to improve accessibility. It helps users who rely on screen readers understand and navigate your site more effectively.
The Web Accessibility Toolkit plugin allows you to implement these improvements without writing or editing code. With built-in support for menus, buttons, landmarks, and more, it provides a user-friendly way to meet accessibility standards and move closer to WCAG and ADA compliance.
If you’re just getting started with accessibility, this is one of the best places to begin.