Skip to content

Commit

Permalink
Add accessible name to navigation icon links (#442)
Browse files Browse the repository at this point in the history
Currently these links lack an accessible name at large screen sizes (as their actual text content is set in the `<small class="d-lg-none ...">`).
Adding `aria-label` to the links themselves explicitly circumvents this problem.

Additionally, this fixes the visible text for the "Twitter" link.
  • Loading branch information
patrickhlauke authored Mar 25, 2024
1 parent d91b2ea commit 93f6a19
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions src/layouts/partials/navbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -40,19 +40,19 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5

<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener" aria-label="GitHub">
{{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
<small class="d-lg-none ms-2">GitHub</small>
</a>
</li>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener">
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener" aria-label="X (formerly Twitter)">
{{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
<small class="d-lg-none ms-2">Twitter</small>
<small class="d-lg-none ms-2">X (formerly Twitter)</small>
</a>
</li>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener" aria-label="Open Collective">
{{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
<small class="d-lg-none ms-2">Open Collective</small>
</a>
Expand Down

0 comments on commit 93f6a19

Please sign in to comment.