Added aria-label to all nav items to improve accessibility. (#1516)

This ensures navigation landmarks are unique.

Related:

https://dequeuniversity.com/rules/axe/3.5/landmark-unique?application=rocketvalidator
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role
https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html

src/partials/footer.html

@@ -28,7 +28,7 @@
   <!-- Link to previous and/or next page -->
   {% if page.previous_page or page.next_page %}
     <div class="md-footer-nav">
-      <nav class="md-footer-nav__inner md-grid">
+      <nav class="md-footer-nav__inner md-grid" aria-label="{{ lang.t('footer.title') }}">
 
         <!-- Link to previous page -->
         {% if page.previous_page %}

src/partials/header.html

@@ -24,7 +24,7 @@
 <header class="md-header" data-md-component="header">
 
   <!-- Top-level navigation -->
-  <nav class="md-header-nav md-grid">
+  <nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
 
     <!-- Link to home -->
     <a

src/partials/language/en.html

@@ -27,8 +27,10 @@
   "clipboard.copy": "Copy to clipboard",
   "clipboard.copied": "Copied to clipboard",
   "edit.link.title": "Edit this page",
+  "footer.title": "Pie",
   "footer.previous": "Previous",
   "footer.next": "Next",
+  "header.title": "Header",
   "meta.comments": "Comments",
   "meta.source": "Source",
   "search.config.lang": "en",
@@ -39,8 +41,11 @@
   "search.result.none": "No matching documents",
   "search.result.one": "1 matching document",
   "search.result.other": "# matching documents",
+  "search.reset": "Reset",
   "skip.link.title": "Skip to content",
   "source.link.title": "Go to repository",
   "source.revision.date": "Last update",
-  "toc.title": "Table of contents"
+  "tabs.title": "Tabs",
+  "toc.title": "Table of contents",
+  "nav.title": "Navigation"
 }[key] }}{% endmacro %}

src/partials/language/es.html

@@ -26,8 +26,10 @@
   "clipboard.copy": "Copiar al portapapeles",
   "clipboard.copied": "Copiado al portapapeles",
   "edit.link.title": "Editar esta página",
+  "footer.title": "Pie",
   "footer.previous": "Anterior",
   "footer.next": "Siguiente",
+  "header.title": "Cabecera",
   "meta.comments": "Comentarios",
   "meta.source": "Fuente",
   "search.config.lang": "es",
@@ -36,8 +38,11 @@
   "search.result.none": "No se encontraron documentos",
   "search.result.one": "1 documento encontrado",
   "search.result.other": "# documentos encontrados",
+  "search.reset": "Restablecer",
   "skip.link.title": "Saltar a contenido",
   "source.link.title": "Ir al repositorio",
   "source.revision.date": "Última actualización",
-  "toc.title": "Tabla de contenidos"
+  "tabs.title": "Pestañas",
+  "toc.title": "Tabla de contenidos",
+  "nav.title": "Navegación"
 }[key] }}{% endmacro %}

src/partials/nav-item.html

@@ -55,7 +55,7 @@
         {% include ".icons/material/chevron-right.svg" %}
       </span>
     </label>
-    <nav class="md-nav" data-md-level="{{ level }}">
+    <nav class="md-nav" data-md-level="{{ level }}" aria-label="{{ nav_item.title }}">
       <label class="md-nav__title" for="{{ path }}">
         <span class="md-nav__icon md-icon">
           {% include ".icons/material/arrow-left.svg" %}

src/partials/nav.html

@@ -21,7 +21,7 @@
 -->
 
 <!-- Main navigation -->
-<nav class="md-nav md-nav--primary" data-md-level="0">
+<nav class="md-nav md-nav--primary" data-md-level="0" aria-label="{{ lang.t('nav.title') }}">
 
   <!-- Site title -->
   <label class="md-nav__title" for="__drawer">

src/partials/search.html

@@ -31,7 +31,6 @@
         type="text"
         class="md-search__input"
         name="query"
-        aria-label="search"
         placeholder="{{ lang.t('search.placeholder') }}"
         autocapitalize="off"
         autocorrect="off"
@@ -48,7 +47,7 @@
       <button
         type="reset"
         class="md-search__icon md-icon"
-        aria-label="reset"
+        aria-label="{{ lang.t('search.reset') }}"
         data-md-component="search-reset"
         tabindex="-1"
       >

src/partials/tabs.html

@@ -27,7 +27,7 @@
 {% endif %}
 
 <!-- Tabs with outline -->
-<nav class="{{ class }}" data-md-component="tabs">
+<nav class="{{ class }}" data-md-component="tabs" aria-label="{{ lang.t('tabs.title') }}">
   <div class="md-tabs__inner md-grid">
     <ul class="md-tabs__list">
       {% for nav_item in nav %}

src/partials/toc-item.html

@@ -28,7 +28,7 @@
 
   <!-- Render nested item list -->
   {% if toc_item.children %}
-    <nav class="md-nav">
+    <nav class="md-nav" aria-label="{{ toc_item.title }}">
       <ul class="md-nav__list">
         {% for toc_item in toc_item.children %}
           {% include "partials/toc-item.html" %}

src/partials/toc.html

@@ -23,7 +23,7 @@
 {% import "partials/language.html" as lang with context %}
 
 <!-- Table of contents -->
-<nav class="md-nav md-nav--secondary">
+<nav class="md-nav md-nav--secondary" aria-label="{{ lang.t('toc.title') }}">
   {% set toc = page.toc %}
 
   <!--