No aria-current="page" on active navigation items

[alexwolson]

Summary

Navigation links do not indicate which page is currently active. Screen reader users navigating by landmarks have no programmatic way to identify their current location within the site's navigation structure.

Affected location

_includes/header.html:31–37 — the main nav loop:

{% for item in site.data.navigation.main %}
  <li>
    <a href="{{ item.url | relative_url }}">
      {{ item.label }}
    </a>
  </li>
{% endfor %}

Fix

Add aria-current="page" to the link whose URL matches the current page:

{% for item in site.data.navigation.main %}
  <li>
    <a href="{{ item.url | relative_url }}"
       {% if page.url == item.url or page.url contains item.url %}aria-current="page"{% endif %}>
      {{ item.label }}
    </a>
  </li>
{% endfor %}

The same should be applied to the mobile menu nav loop at header.html:72–77.

WCAG criterion

2.4.8 Location (Level AAA) — while AAA, this is considered a best practice for navigation usability and is straightforward to implement.