How to add / replace the aria-label of an element

Hi,
I’m dealing with some accessibility improvements and I’d like to know if there is a way to add or replace the aria-label of an element.

I need, eg, to change the aria labbel for the toggle modal content" on a modal navigation menu that should be “toggle menu content” since the screen readers can’t identify this element as a menu and cannot be correctly referred to by dictation users.

Thank you!

Hey @Juanjo,

Thanks for writing in! The aria labels were added to the elements as they are registered as an element. If you want to change the label, you can use the PHP gettext() filter instead like how it is used here:

For example;

// Translate texts
// =============================================================================
function change_aria_label($translated) { 
  $translated = str_ireplace('Toggle Modal Content', 'Toggle Menu Content', $translated);
  
  return $translated; 
}
add_filter('gettext', 'change_aria_label' );
// =============================================================================

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

Thank you @ruenel it works well!

I think it would be a good idea for future updates to offer the possibility of customizing the aria-label since accessibility is becoming increasingly prioritized.

Thank you very much

You are most welcome, @Juanjo.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.