Accessible WordPress Navigation Menu

  • Resolved janellucia

    (@janellucia)


    7 years, 3 months ago

    Hello, I am trying to make my personal site accessible (and all the sites I create tbh) and one of the things holding me back is making the site navigation accessible. If I had access to the code I would give the < ul > and aria-label=”site main navigation” and give each < li > and aria-label appropriate to the menu title.
    As it stands now the screen reader gives no indication of what kind of < ul > it is reading out you just have to figure out that it’s reading out page titles as a link-less item.

    • This topic was modified 7 years, 3 months ago by janellucia.
    • This topic was modified 7 years, 3 months ago by janellucia.
Viewing 3 replies - 1 through 3 (of 3 total)

  • @janellucia, aria-label on the UL or LI wouldn’t work because they’re not focusable elements. Instead, I’d recommend to address better accessibility at a theme level”
    – wrap the navigation menu in a <nav> element
    – a <nav> element is already announced as “navigation” by screen readers and it is a landmark region
    – only if you need to distinguish two (or more) different navigation menus, add aria-label attributes to the nav elements
    – see for example what Twenty Seventeen does

    Here’s something that you might want to read:

    https://www.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/

    Placing an aria-label attribute on a UL or on an LI element won’t help you, as they’ll be ignored by assistive technology.

    What you *do* want to do is wrap your site navigation in a nav element. By default, a nav element will be read by screen readers as being a navigation region, and you can add an aria-label attribute to that element to give it a more descriptive title if you feel you need to.

    You should *not* give the list items any additional label; the link within the list item should have text, and that text should be all you need.

    Thread Starter janellucia

    (@janellucia)

    thanks! Problem solved! That was really helpful Andrea

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Accessible WordPress Navigation Menu’ is closed to new replies.