Empty Button and Broken Aria Menu

[emleddin]

Hi!

I built a website using RMarkdown, and I have a dropdown navigation bar as part of it. The site code is currently on GitHub.

I ran the site through an accessibility check using [WAVE from WebAim](see https://wave.webaim.org/), and was able to fix a number of accessibility issues by redefining things in style.css or a header.html file. I now have two problems that I cannot solve. The first is an empty button that appears before any of the components of my navbar, and the second is a Broken ARIA menu for the dropdown button. The empty button is not referring to the logo as a button--I tried using an ARIA label on that, specifically, and the issue code reference is a few lines above that.

As another "is it just me" test, I also used WAVE on the FlexDashboard site, since it's listed as an HTML RMarkdown example. It has the same empty link issue.

It's possible that this is a Bootstrap 4 issue because of a blog post I found, but I don't know how to fix it for RMarkdown. I tried modifying a .js file in site_libs, but that just gets regenerated the next time I build the site via RStudio.

Any guidance on how to fix the accessibility issue would be much appreciated!

[cderv]

FWIW the empty button you see becomes visible when you reduce the size to the window. In this case the menu are collapsed behind this button. There may be something that can be done to improve an this is worth opening an issue in the Github repository

the second is a Broken ARIA menu for the dropdown button.

Can you point to the piece of code for this issue ? I am not sure to get it right.

Improving accessibility across Rmarkdown outputs is something we find important. We welcome some insights on that! Do not hesitate to open issues or PR in the code repository.

[emleddin]

My guess is that the menu navbar toggle needs some sort of text label (like "Toggle Navigation") to resolve the Empty Button error.

The second Broken ARIA Menu was a lot easier to locate through WAVE when the styling was off. The part of the code it points to is:

<ul class="dropdown-menu" role="menu">
<li>
<a href="resources.html">
Crisis Resources
</a>
</li>
<li>
<a href="reading-list.html">
Reading List
</a>
</li>
<li>
<a href="STEMM-orgs.html">
STEMM Organizations
</a>
</li>
</ul>

This blog post makes it seem like the combination of not having an aria assignment on the dropdown-menu and the previous bit of code setting aria-expanded="false" is what leads to the error.

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Resources
<span class="caret"></span>
</a>

[cderv]

Highly interesting ! I can't look at it right now in detail, but this is awesome feedback.
If you have others, don't hesitate to open some issues in Github.

Thank you !

[emleddin]

I figured out how to fix it in the straight HTML, but I still don't have a solution that'll fix it as part of build website, so I'll go ahead and open a GitHub Issue. (If someone else has suggestions, I'm all ears!)

To fix the Empty Button error, I added an sr-only span.
Original:

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

Update that clears WAVE check:

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

To fix the Broken ARIA menu, I removed the button role and aria-expanded.
Original:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
    Resources

    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu">
    <li>
      <a href="resources.html">Crisis Resources</a>
    </li>
    <li>
      <a href="reading-list.html">Reading List</a>
    </li>
    <li>
      <a href="STEMM-orgs.html">STEMM Organizations</a>
    </li>
  </ul>
</li>

Update that clears WAVE check:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    Resources

    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>
      <a href="resources.html">Crisis Resources</a>
    </li>
    <li>
      <a href="reading-list.html">Reading List</a>
    </li>
    <li>
      <a href="STEMM-orgs.html">STEMM Organizations</a>
    </li>
  </ul>
</li>