Added aria labels to footer links

This commit is contained in:
squidfunk 2021-06-06 14:29:01 +02:00
parent a20139019f
commit 0dd483121a
3 changed files with 13 additions and 7 deletions

View File

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

View File

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

View File

@ -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" %}