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.
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.