Need to customize Aria label on native WP Hamburger Menu

  • haleyassoc

    (@haleyassoc)


    3 months, 3 weeks ago

    We need to customize the Aria label “Open menu” in the code below using the Additional CSS panel in WordPress using the Twenty Twenty-Two theme

    <nav class=”has-text-color has-background-color is-responsive items-justified-left css-nav wp-block-navigation is-content-justification-left is-layout-flex wp-container-core-navigation-is-layout-1 wp-block-navigation-is-layout-flex” aria-label=”Header navigation” data-wp-interactive=”core/navigation” data-wp-context=”{&quot;overlayOpenedBy&quot;:[],&quot;type&quot;:&quot;overlay&quot;,&quot;roleAttribute&quot;:&quot;&quot;,&quot;ariaLabel&quot;:&quot;Menu&quot;}”><button aria-haspopup=”dialog” aria-label="Open menu" class=”wp-block-navigation__responsive-container-open ” data-wp-on–click=”actions.openMenuOnClick” data-wp-on–keydown=”actions.handleMenuKeydown”><svg width=”24″ height=”24″ xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″><path d=”M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z”></path></svg></button>

    The most recent attempt was to add the following code copied from the Chrome Inspector Panel to the Additional CSS panel in WordPress:

    .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{
aria-label="Open Navigation";
}

    This had no effect.
    Any help would be greatly appreciated.

    • This topic was modified 3 months, 3 weeks ago by haleyassoc.
Viewing 10 replies - 1 through 10 (of 10 total)
  • George Appiah

    (@gappiah)

    3 months, 3 weeks ago

    We need to customize the Aria label “Open menu” in the code below using the Additional CSS panel in WordPress using the Twenty Twenty-Two theme

    I’m no accessibility expert. But my understanding is that aria-label is an HTML attribute. So trying to do this via CSS would be a nonstarter — totally off the mark.

    For the nav landmark, the aria-label takes on the name of the navigation block. So that’s easily customizable from Site Editor. But I couldn’t find anything on how to customize the aria-label for the button element inside the nav landmark.

    Perhaps this is one of those 80/20 rules: how much of your time are you willing to invest to change the text Open Menu to Open Navigation? I’d wager there are a million other things you could do on your site that would better serve your users and your business/mission.

    Thread Starter haleyassoc

    (@haleyassoc)

    3 months, 3 weeks ago

    Hi @gappiah,
    Thank you for your feedback.

    We have indeed already taken care of what felt like a million other Accessibility fixes. This is the last item on the list to put a cherry on top, so to speak.

    Our issue with “Menu” vs “Navigation” here is that this website is for a family-owned restaurant, so “Open Menu” has a very specific meaning and appears elsewhere in the navigation.

    We’ll try changing the name of the navigation block as you suggest and keep trying if that doesn’t fix it.

    Chris Feix

    (@chrisfeix)

    3 months, 2 weeks ago

    George,

    I’ve been trying for weeks to figure out how to add ARIA labels to my menu items without touching the code. Is there a plugin or something? Why isn’t this part of WP core? Thank you.

    See image:
    https://brado.net/wp-content/uploads/2024/04/aria-menu.png

    Anne-Mieke Bovelett

    (@annebovelett)

    3 months, 2 weeks ago

    @chrisfeix Your link leads to a 404. Would you mind sharing a link to the site where you wish to add these labels?

    Chris Feix

    (@chrisfeix)

    3 months, 2 weeks ago

    Anne-Meike,

    Staging site is here: https://env-waleruse-dev.kinsta.cloud/

    I’m using the WordPress Menu https://tinyurl.com/2y8eo2h6

    Anne-Mieke Bovelett

    (@annebovelett)

    3 months, 2 weeks ago

    Hey @chrisfeix,

    Before I dig in: I think I see it’s Elementor + Astra, is that correct?

    And where would you like to add aria-labels and with what purpose? I’m asking because in most cases, an aria-label is to convey information that the visible part, in this case, the link text in this case does not.

    Chris Feix

    (@chrisfeix)

    3 months, 2 weeks ago

    Correct. We fail accessibility testing because our navigation lacks ARIA labels. We work in HIPAA & healthcare and clients demand we pass accessibility testing. Elementor allows us to add ARIA labels to everything but WordPress controls the nav.

    George Appiah

    (@gappiah)

    3 months, 2 weeks ago

    @chrisfeix:

    This topic was created by someone using the Twenty Twenty-Two theme — which is a block theme — and the built-in block editor. The site uses the block editor’s Navigation block which adds the ARIA label “Open Menu”, but OP wanted it changed to “Open Navigation” because this is a restaurant website, where “Menu” means something else.

    But somehow decided to tag on to this topic, even though your issue is totally different: a different theme and page builder, no ARIA label at all (rather than wanting to change label), and for a website in a totally different industry!

    Elementor allows us to add ARIA labels to everything but WordPress controls the nav.

    Astra is a classic theme.

    For classic themes, that should be your theme’s job to add the ARIA label to the navigation menu.

    WordPress provides the container_aria_label parameter (among many other parameters) for the wp_nav_menu that themes use to define their menu locations, and it’s up to the theme’s author to use this or any other parameter: https://developer.wordpress.org/reference/functions/wp_nav_menu/

    I just set up a new site to test this: WordPress 6.5.2, just the Astra theme, no plugin installed.

    Here’s my navigation menu’s <nav> element, using the Astra theme’s “Primary” menu:

    <nav class="site-navigation ast-flex-grow-1 navigation-accessibility site-header-focus-item" id="primary-site-navigation-desktop" aria-label="Site Navigation" itemtype="https://schema.org/SiteNavigationElement" itemscope="itemscope"> ... </nav>

    As you can see above, the classes clearly tell you this is from the Astra theme, and there’s clearly an ARIA label: aria-label="Site Navigation". You can check this for yourself here: https://heapcard.s3-tastewp.com/

    So it seems your theme is doing its job just fine.

    Meanwhile, here is the <nav> element from your site’s navigation menu in the header:

    <nav class="elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-horizontal e--pointer-underline e--animation-fade">...</nav>

    Here the classes clearly show this is from the Elementor plugin. And it should be this plugin’s responsibility to add the ARIA label.

    Chris Feix

    (@chrisfeix)

    3 months, 2 weeks ago

    Thank you George. I didn’t mean to hijack this post. You were literally the only person on here I could find that seemed to be able to answer my question.

    I’m writing a plugin to fix my issue, which isn’t about the menu toggle, but about having an ARIA label on the individual menu items.

    Y’all can ignore me, and thanks again.

    Anne-Mieke Bovelett

    (@annebovelett)

    3 months, 1 week ago

    @chrisfeix I understand that your navigation as a whole needs a label, but don’t understand why this is aimed at the menu items itself. That’s not where aria-labels belong, unless you show only icons. Hence, my question. I am surprised you got that as a flag.

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

Tags