header links - global

[vavroom]

◦ The links in the header are within a div (id=”navbar-menu”) that has an aria-labelledby but no role.

[vavroom]

@digilou

Question for you. I’m trying to fix a <div> that has an aria-labelledby that you added. But that attribute on a div is woefully unreliable. So I need to pick a role for this div, or use a better element. I’m wondering if you have any glorious thought because right now I’m not sure how to best approach it. Can’t use

since the parent container is a nav.

Considering using role="presentation" but I’m worried about the implications.

The other issue is that we’re using a labelledby pointing to an element that is hidden unless on a smaller viewport. Given you’ve done this work, I’m a bit stumped and don’t want to fuck it all up mess with it and cause issues.

<nav class="navbar-container">
          <button 
            type="button" 
            id="navbar-toggle" 
            aria-controls="navbar-menu"
            aria-expanded="false">
            <span id="menu-text">Menu</span>
            <!-- <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> -->
          </button>
          <div id="navbar-menu" aria-labelledby="navbar-toggle">
            <ul class="navbar-links">
              <li><a href="{{ site.baseurl }}meet-nic/" {% if page.url == "/meet-nic/" %} aria-current="page" {% endif %}>Meet Nic</a></li>
              <li><a href="{{ site.baseurl }}speaking/" {% if page.url == "/speaking/" %} aria-current="page" {% endif %}>Speaking</a></li>
              <li><a href="{{ site.baseurl }}training/" {% if page.url == "/training/" %} aria-current="page" {% endif %}>Training</a></li>
              <li><a href="{{ site.baseurl }}blog/" {% if page.url == "/blog/" %} aria-current="page" {% endif %}>Blog</a></li>
                <!--<li><a href="{{ site.baseurl }}book/" {% if page.url == "/book/" %} aria-current="page" {% endif %}>Book</a></li>-->
                <li><a href="{{ site.baseurl }}podcast/" {% if page.url == "/podcast/" %} aria-current="page" {% endif %}>Podcast</a></li>
              <li><a href="{{ site.baseurl }}contact/" {% if page.url == "/contact/" %} aria-current="page" {% endif %}>Contact</a></li>
            </ul>
          </div>
        </nav>