Skip to content

Take 22% off using code GET22. Hurry, ends soon!

Web Accessibility Toolkit for WordPress
Get Started

Custom ARIA Attributes

The Custom ARIA Attributes setting lets you add ARIA attributes like aria-hidden, aria-expanded, aria-label, and more to any element on your site, all by targeting them with a CSS selector.

You can use it to improve accessibility without modifying any theme files or templates. This is especially useful for patching accessibility issues in third-party themes or plugins that don’t include ARIA markup by default.

What accessibility issue does this fix

Many themes and plugins do not include proper ARIA attributes, which are critical for screen readers and assistive technologies to understand an element’s role, state, or purpose.

With this tool, you can manually apply the correct ARIA attributes to elements that need them, addressing accessibility concerns such as:

  • Missing labels
  • Unclear toggle states
  • Ignored dynamic content
  • Overlooked relationships between elements

Depending on the attribute used, this helps meet a variety of WCAG 2.1 criteria including:

How does Custom ARIA Attributes affect accessibility

When applied correctly, ARIA attributes make your site more understandable to users relying on screen readers or keyboard navigation. For example:

  • aria-hidden="true" hides decorative content from assistive tech.
  • aria-label="Toggle menu" gives a clear name to an unlabeled icon button.
  • aria-expanded="true" helps users understand whether a collapsible section is open or closed.

These enhancements clarify the structure, purpose, and behavior of your site’s elements, improving usability for users with disabilities.

Without these attributes, key features of your site may be confusing or inaccessible to some users.

How to enable Custom ARIA Attributes using Web Accessibility Toolkit

  1. Go to Settings > Web Accessibility.
  2. Open the ARIA tab.
  3. Scroll to Custom ARIA Attributes.
  4. Click Add New to define an attribute:
    • Selector: Enter a valid CSS selector (e.g. .toggle-button, #main-menu, header.site-header a).
    • ARIA Attribute: Choose from common options like aria-label, aria-expanded, etc.
    • Value: Enter the value to apply (e.g. "Toggle menu", "true", "false").
  5. Add as many rows as needed, targeting different elements.
  6. Click Save Changes.

Tip: You can apply multiple ARIA attributes to the same element by using multiple rows with the same selector but different attributes.

How to confirm that Custom ARIA Attributes is working

  1. Visit your site and use your browser’s “Inspect” tool (right-click > Inspect Element).
  2. Look at the element targeted by your selector.
  3. Confirm that the selected ARIA attribute has been applied, with the correct value.
  4. Optionally, test with a screen reader like VoiceOver, NVDA, or JAWS to verify that the new ARIA attribute is recognized.

Limitations

  • Make sure your CSS selectors are accurate, invalid or incorrect selectors will not apply.
  • Only predefined ARIA attributes are available in the free version. The PRO version unlocks additional attributes.
  • Dynamic content that loads after page load may not be affected unless handled via JavaScript.