mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-24 15:40:15 +01:00
Added aria labels to footer links
This commit is contained in:
parent
a20139019f
commit
0dd483121a
@ -6,14 +6,15 @@
|
|||||||
{% if page.previous_page or page.next_page %}
|
{% if page.previous_page or page.next_page %}
|
||||||
<nav class="md-footer__inner md-grid" aria-label="{{ lang.t('footer.title') }}">
|
<nav class="md-footer__inner md-grid" aria-label="{{ lang.t('footer.title') }}">
|
||||||
{% if page.previous_page %}
|
{% if page.previous_page %}
|
||||||
<a href="{{ page.previous_page.url | url }}" class="md-footer__link md-footer__link--prev" rel="prev">
|
{% set direction = lang.t("footer.previous") %}
|
||||||
|
<a href="{{ page.previous_page.url | url }}" class="md-footer__link md-footer__link--prev" aria-label="{{ direction }}: {{ page.previous_page.title }}" rel="prev">
|
||||||
<div class="md-footer__button md-icon">
|
<div class="md-footer__button md-icon">
|
||||||
{% include ".icons/material/arrow-left.svg" %}
|
{% include ".icons/material/arrow-left.svg" %}
|
||||||
</div>
|
</div>
|
||||||
<div class="md-footer__title">
|
<div class="md-footer__title">
|
||||||
<div class="md-ellipsis">
|
<div class="md-ellipsis">
|
||||||
<span class="md-footer__direction">
|
<span class="md-footer__direction">
|
||||||
{{ lang.t("footer.previous") }}
|
{{ direction }}
|
||||||
</span>
|
</span>
|
||||||
{{ page.previous_page.title }}
|
{{ page.previous_page.title }}
|
||||||
</div>
|
</div>
|
||||||
@ -21,11 +22,12 @@
|
|||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if page.next_page %}
|
{% if page.next_page %}
|
||||||
<a href="{{ page.next_page.url | url }}" class="md-footer__link md-footer__link--next" rel="next">
|
{% set direction = lang.t("footer.next") %}
|
||||||
|
<a href="{{ page.next_page.url | url }}" class="md-footer__link md-footer__link--next" aria-label="{{ direction }}: {{ page.next_page.title }}" rel="next">
|
||||||
<div class="md-footer__title">
|
<div class="md-footer__title">
|
||||||
<div class="md-ellipsis">
|
<div class="md-ellipsis">
|
||||||
<span class="md-footer__direction">
|
<span class="md-footer__direction">
|
||||||
{{ lang.t("footer.next") }}
|
{{ direction }}
|
||||||
</span>
|
</span>
|
||||||
{{ page.next_page.title }}
|
{{ page.next_page.title }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -34,9 +34,11 @@
|
|||||||
|
|
||||||
<!-- Link to previous page -->
|
<!-- Link to previous page -->
|
||||||
{% if page.previous_page %}
|
{% if page.previous_page %}
|
||||||
|
{% set direction = lang.t("footer.previous") %}
|
||||||
<a
|
<a
|
||||||
href="{{ page.previous_page.url | url }}"
|
href="{{ page.previous_page.url | url }}"
|
||||||
class="md-footer__link md-footer__link--prev"
|
class="md-footer__link md-footer__link--prev"
|
||||||
|
aria-label="{{ direction }}: {{ page.previous_page.title }}"
|
||||||
rel="prev"
|
rel="prev"
|
||||||
>
|
>
|
||||||
<div class="md-footer__button md-icon">
|
<div class="md-footer__button md-icon">
|
||||||
@ -45,7 +47,7 @@
|
|||||||
<div class="md-footer__title">
|
<div class="md-footer__title">
|
||||||
<div class="md-ellipsis">
|
<div class="md-ellipsis">
|
||||||
<span class="md-footer__direction">
|
<span class="md-footer__direction">
|
||||||
{{ lang.t("footer.previous") }}
|
{{ direction }}
|
||||||
</span>
|
</span>
|
||||||
{{ page.previous_page.title }}
|
{{ page.previous_page.title }}
|
||||||
</div>
|
</div>
|
||||||
@ -55,15 +57,17 @@
|
|||||||
|
|
||||||
<!-- Link to next page -->
|
<!-- Link to next page -->
|
||||||
{% if page.next_page %}
|
{% if page.next_page %}
|
||||||
|
{% set direction = lang.t("footer.next") %}
|
||||||
<a
|
<a
|
||||||
href="{{ page.next_page.url | url }}"
|
href="{{ page.next_page.url | url }}"
|
||||||
class="md-footer__link md-footer__link--next"
|
class="md-footer__link md-footer__link--next"
|
||||||
|
aria-label="{{ direction }}: {{ page.next_page.title }}"
|
||||||
rel="next"
|
rel="next"
|
||||||
>
|
>
|
||||||
<div class="md-footer__title">
|
<div class="md-footer__title">
|
||||||
<div class="md-ellipsis">
|
<div class="md-ellipsis">
|
||||||
<span class="md-footer__direction">
|
<span class="md-footer__direction">
|
||||||
{{ lang.t("footer.next") }}
|
{{ direction }}
|
||||||
</span>
|
</span>
|
||||||
{{ page.next_page.title }}
|
{{ page.next_page.title }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -20,5 +20,5 @@
|
|||||||
IN THE SOFTWARE.
|
IN THE SOFTWARE.
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!-- Kept for backward compatibility. This file wil be removed in v8 -->
|
<!-- Kept for backward compatibility. This file will be removed in v8 -->
|
||||||
{% include "partials/source-file.html" %}
|
{% include "partials/source-file.html" %}
|
||||||
|
Loading…
Reference in New Issue
Block a user