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

Home Forums Support More accessibility fixes – adding aria-label

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #307296
    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.

    GeneratePress 1.3.46
    GP Premium 1.2.96
    #307401
    Tom
    Lead Developer
    Lead Developer

    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.

    #307402
    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

    #307514
    Tom
    Lead Developer
    Lead Developer

    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!

    #307636
    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.

    #307758
    Tom
    Lead Developer
    Lead Developer

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

    Thanks!

    #526459
    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">

    #527218
    Tom
    Lead Developer
    Lead Developer

    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.

    #527792
    morriscountynj

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

    #956388
    Jacky

    Hi Tom,

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

    Jacky

    #956859
    Tom
    Lead Developer
    Lead Developer

    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.

    #966284
    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

    #966439
    Tom
    Lead Developer
    Lead Developer

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

    #966508
    Jacky

    Hi,

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

    Jacky

    #967107
    Tom
    Lead Developer
    Lead Developer

    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?

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.