mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-12 10:00:52 +01:00
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
This commit is contained in:
parent
e41075932c
commit
e7f7632278
@ -28,7 +28,7 @@
|
|||||||
<!-- Link to previous and/or next page -->
|
<!-- Link to previous and/or next page -->
|
||||||
{% if page.previous_page or page.next_page %}
|
{% if page.previous_page or page.next_page %}
|
||||||
<div class="md-footer-nav">
|
<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 -->
|
<!-- Link to previous page -->
|
||||||
{% if page.previous_page %}
|
{% if page.previous_page %}
|
||||||
|
@ -24,7 +24,7 @@
|
|||||||
<header class="md-header" data-md-component="header">
|
<header class="md-header" data-md-component="header">
|
||||||
|
|
||||||
<!-- Top-level navigation -->
|
<!-- 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 -->
|
<!-- Link to home -->
|
||||||
<a
|
<a
|
||||||
|
@ -27,8 +27,10 @@
|
|||||||
"clipboard.copy": "Copy to clipboard",
|
"clipboard.copy": "Copy to clipboard",
|
||||||
"clipboard.copied": "Copied to clipboard",
|
"clipboard.copied": "Copied to clipboard",
|
||||||
"edit.link.title": "Edit this page",
|
"edit.link.title": "Edit this page",
|
||||||
|
"footer.title": "Pie",
|
||||||
"footer.previous": "Previous",
|
"footer.previous": "Previous",
|
||||||
"footer.next": "Next",
|
"footer.next": "Next",
|
||||||
|
"header.title": "Header",
|
||||||
"meta.comments": "Comments",
|
"meta.comments": "Comments",
|
||||||
"meta.source": "Source",
|
"meta.source": "Source",
|
||||||
"search.config.lang": "en",
|
"search.config.lang": "en",
|
||||||
@ -39,8 +41,11 @@
|
|||||||
"search.result.none": "No matching documents",
|
"search.result.none": "No matching documents",
|
||||||
"search.result.one": "1 matching document",
|
"search.result.one": "1 matching document",
|
||||||
"search.result.other": "# matching documents",
|
"search.result.other": "# matching documents",
|
||||||
|
"search.reset": "Reset",
|
||||||
"skip.link.title": "Skip to content",
|
"skip.link.title": "Skip to content",
|
||||||
"source.link.title": "Go to repository",
|
"source.link.title": "Go to repository",
|
||||||
"source.revision.date": "Last update",
|
"source.revision.date": "Last update",
|
||||||
"toc.title": "Table of contents"
|
"tabs.title": "Tabs",
|
||||||
|
"toc.title": "Table of contents",
|
||||||
|
"nav.title": "Navigation"
|
||||||
}[key] }}{% endmacro %}
|
}[key] }}{% endmacro %}
|
||||||
|
@ -26,8 +26,10 @@
|
|||||||
"clipboard.copy": "Copiar al portapapeles",
|
"clipboard.copy": "Copiar al portapapeles",
|
||||||
"clipboard.copied": "Copiado al portapapeles",
|
"clipboard.copied": "Copiado al portapapeles",
|
||||||
"edit.link.title": "Editar esta página",
|
"edit.link.title": "Editar esta página",
|
||||||
|
"footer.title": "Pie",
|
||||||
"footer.previous": "Anterior",
|
"footer.previous": "Anterior",
|
||||||
"footer.next": "Siguiente",
|
"footer.next": "Siguiente",
|
||||||
|
"header.title": "Cabecera",
|
||||||
"meta.comments": "Comentarios",
|
"meta.comments": "Comentarios",
|
||||||
"meta.source": "Fuente",
|
"meta.source": "Fuente",
|
||||||
"search.config.lang": "es",
|
"search.config.lang": "es",
|
||||||
@ -36,8 +38,11 @@
|
|||||||
"search.result.none": "No se encontraron documentos",
|
"search.result.none": "No se encontraron documentos",
|
||||||
"search.result.one": "1 documento encontrado",
|
"search.result.one": "1 documento encontrado",
|
||||||
"search.result.other": "# documentos encontrados",
|
"search.result.other": "# documentos encontrados",
|
||||||
|
"search.reset": "Restablecer",
|
||||||
"skip.link.title": "Saltar a contenido",
|
"skip.link.title": "Saltar a contenido",
|
||||||
"source.link.title": "Ir al repositorio",
|
"source.link.title": "Ir al repositorio",
|
||||||
"source.revision.date": "Última actualización",
|
"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 %}
|
}[key] }}{% endmacro %}
|
||||||
|
@ -55,7 +55,7 @@
|
|||||||
{% include ".icons/material/chevron-right.svg" %}
|
{% include ".icons/material/chevron-right.svg" %}
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</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 }}">
|
<label class="md-nav__title" for="{{ path }}">
|
||||||
<span class="md-nav__icon md-icon">
|
<span class="md-nav__icon md-icon">
|
||||||
{% include ".icons/material/arrow-left.svg" %}
|
{% include ".icons/material/arrow-left.svg" %}
|
||||||
|
@ -21,7 +21,7 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<!-- Main navigation -->
|
<!-- 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 -->
|
<!-- Site title -->
|
||||||
<label class="md-nav__title" for="__drawer">
|
<label class="md-nav__title" for="__drawer">
|
||||||
|
@ -31,7 +31,6 @@
|
|||||||
type="text"
|
type="text"
|
||||||
class="md-search__input"
|
class="md-search__input"
|
||||||
name="query"
|
name="query"
|
||||||
aria-label="search"
|
|
||||||
placeholder="{{ lang.t('search.placeholder') }}"
|
placeholder="{{ lang.t('search.placeholder') }}"
|
||||||
autocapitalize="off"
|
autocapitalize="off"
|
||||||
autocorrect="off"
|
autocorrect="off"
|
||||||
@ -48,7 +47,7 @@
|
|||||||
<button
|
<button
|
||||||
type="reset"
|
type="reset"
|
||||||
class="md-search__icon md-icon"
|
class="md-search__icon md-icon"
|
||||||
aria-label="reset"
|
aria-label="{{ lang.t('search.reset') }}"
|
||||||
data-md-component="search-reset"
|
data-md-component="search-reset"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
>
|
>
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<!-- Tabs with outline -->
|
<!-- 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">
|
<div class="md-tabs__inner md-grid">
|
||||||
<ul class="md-tabs__list">
|
<ul class="md-tabs__list">
|
||||||
{% for nav_item in nav %}
|
{% for nav_item in nav %}
|
||||||
|
@ -28,7 +28,7 @@
|
|||||||
|
|
||||||
<!-- Render nested item list -->
|
<!-- Render nested item list -->
|
||||||
{% if toc_item.children %}
|
{% if toc_item.children %}
|
||||||
<nav class="md-nav">
|
<nav class="md-nav" aria-label="{{ toc_item.title }}">
|
||||||
<ul class="md-nav__list">
|
<ul class="md-nav__list">
|
||||||
{% for toc_item in toc_item.children %}
|
{% for toc_item in toc_item.children %}
|
||||||
{% include "partials/toc-item.html" %}
|
{% include "partials/toc-item.html" %}
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
{% import "partials/language.html" as lang with context %}
|
{% import "partials/language.html" as lang with context %}
|
||||||
|
|
||||||
<!-- Table of contents -->
|
<!-- 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 %}
|
{% set toc = page.toc %}
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
Loading…
Reference in New Issue
Block a user