[Support request] More accessibility fixes – adding aria-label

[morriscountynj]

Another accessibility issue I’m trying to fix is the lack of aria-labels on various tags. The two I’m particularly looking to fix are:

primary and secondary navigation, and
multiple widgets (in <aside> tags)

Is there a way to add an aria-label to the two navigations? I suppose it would be something like: if this is a primary nav, add aria-label=”main navigation”, if not, add aria-label=”secondary navigation”, or the like. I feel like there might be a way to do this via hooks, but I’m not sure? Any ideas?

Do you also have any insights into adding aria-label to widgets? If you use widgets in different places throughout a side, they get put in <aside> tags, so you’ll have a bunch of un-labeled <aside>s. I’d love to be able to add aria-label=”search” or aria-label=”archives” or something like that to my widgets.

[Tom]

Can you link me to any information on adding aria labels to these kinds of elements?

Currently it’s not possible, but I have something in the works where you’d be able to add any HTML attribute to any element. Won’t be for a few releases though.

[morriscountynj]

Sure, scroll down to the examples on this page (they’re written for HTML4 elements but you’ll see what I mean): https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page

[Tom]

I’m mostly seeing suggestions to add role=”x” to elements, which isn’t suggested anymore (and make HTML invalid).

Adding aria- labels is interesting. Once I create this new system to add HTML attributes, it will be possible 🙂

Thanks!

[morriscountynj]

It is right? The main concern is if you have multiple HTML5 elements such as <nav>, <header>, or <aside>, it’s helpful to add the label to tell them apart. If you only have one <nav> then it’s not really an issue, from my understanding.

[Tom]

It’s a great point, I’ll definitely do some more research on it 🙂

Thanks!

[morriscountynj]

Hi again! I’m creating a new site in GP and am cycling back to this aria-label (or aria-labelled by) issue.

By default, there’s no label on the main and secondary nav, as well as any of the asides, such as footer widgets.

Do you know if there’s a way to programmatically add this maybe via GP hooks?

Ideally it would look something like this:
<nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" id="site-navigation" class="main-navigation" aria-label="Site Navigation">

or

<aside id="text-2" class="widget inner-padding widget_text" aria-label="Contact Information">

[Tom]

We haven’t implemented the system I mentioned above that would allow you to add attributes to the element unfortunately. It is something we have planned for this year – hopefully in GP 2.2.

[morriscountynj]

that sounds great. i won’t wait til then to launch but will certainly be on the lookout for the update!!

[Jacky]

Hi Tom,

May I know if there is an update on adding aria-label to various elements? Thank you.

Jacky

[Tom]

Hi there,

We played with a filter system that would allow you to add your own attributes to any element, but it wasn’t great when it came to performance so we didn’t move forward with it.

It’s still something we’d like to do, but we need to make sure whatever we do maintains the level of speed we’re used to.

[Jacky]

Hi Tom,

Accessibility is becoming a big thing for education sites. Elementor Pro allows me to add the attributes to individual sections. May I know how do I add ARIA attributes to the menus in the generatepress theme? I don’t mind sacrifice speed for accessibility if the performance is not that terrible. Maybe you can allow us to turn the filter system on or off? Thank you.

Jacky

[Tom]

Which element are you trying to target exactly? The <nav> element?

[Jacky]

Hi,

Yes the nav element and specifically the chevron in the navigation menu. Thank you for looking into this.

Jacky

[Tom]

We should be able to add an aria-label to the navigation as long as you’re using our schema system. Feel free to open a topic if you need help with that.

As for the chevron, that’s likely an element we wouldn’t add the filterable classes to even if we did implement it. What kind of label would you add to it?

[Author]

Posts