Preface
Goal: Bringing screen reader accessability in pagination.
Source Code
This article use tutor-07 theme. We will create it step by step.
1: Source
Screen Reader Class
I just follow bulma guidance:
To hidden content visually,
you simply need to add is-sr-only
.
<span class="is-sr-only">Hidden Content</span>
Alternatively you can use fontawesome class that is similar to bootstrap.
<span class="sr-only">Hidden Content</span>
This content can be read by screenreader.
You can test using inspect element
.
Aria Label
Instead of class, we can also utilize aria-label
<a class="pagination-link is-current {{ color }}"
aria-label="Page {{ cursor }}"
aria-current="true">
<span class="is-sr-only">Page </span>
{{ cursor }}
</a>
2: Prepare
Preview: General
There shoud be nomore preview, because this is screen reader. Luckily, this article meant to provide example of screenreader. So I show all buttons in this template example.
You may freely change the appearance. Just remove any button that you do not need. Change the class, or even the SASS. Just remember that in this article, we should focus on accessability, instead the looks.
Testing
You can test using screen reader inspect element
.
Layout: Nunjucks Blog
Consider use pagination/06-screeenreader
partial, in blog.njk
.
{% include "pagination/06-screeenreader.njk" %}
3: Navigation: Previous and Next
Just a slight modification.
Navigation: Previous
<!-- Previous Page. -->
{% if pagination.previousPageLink %}
<a class="pagination-previous hoverable"
href="{{ pagination.previousPageLink }}"
aria-label="Go to previous page"
rel="prev">
<span class="fas fa-backward"></span> </a>
<span class="sr-only">Previous</span>
{% else %}
<a class="pagination-previous"
title="This is the first page"
aria-label="First page"
aria-current="true"
disabled>
<span class="fas fa-backward"></span> </a>
{% endif %}
Navigation: Next
<!-- Next Page. -->
{% if pagination.nextPageLink %}
<a class="pagination-next hoverable"
href="{{ pagination.nextPageLink }}"
aria-label="Go to next page"
rel="next">
<span class="fas fa-forward"></span></a>
<span class="sr-only">Next</span>
{% else %}
<a class="pagination-next"
title="This is the last page"
aria-label="Last page"
aria-current="true"
disabled>
<span class="fas fa-forward"></span></a>
{% endif %}
4: Navigation: First and Last
Just a slight modification.
Navigation: First
<!-- First Page. -->
{% if current > 1 %}
<a class="pagination-previous hoverable"
href="{{ pagination.firstPageLink }}"
aria-label="Go to first page"
data-rel="first">
<span class="fas fa-step-backward"></span> </a>
<span class="sr-only">First</span>
{% else %}
<a class="pagination-previous"
title="This is the first page"
aria-label="First page"
aria-current="true"
disabled>
<span class="fas fa-step-backward"></span> </a>
{% endif %}
Navigation: Last
<!-- Last Page. -->
{% if current != totalPages %}
<a class="pagination-next hoverable"
href="{{ pagination.lastPageLink }}"
aria-label="Go to last page"
data-rel="last">
<span class="fas fa-step-forward"></span></a>
<span class="sr-only">Last</span>
{% else %}
<a class="pagination-next"
title="This is the last page"
aria-label="Last page"
aria-current="true"
disabled>
<span class="fas fa-step-forward"></span></a>
{% endif %}
5: Middle Navigation: Number
<li class="{{ pageOffsetClass }}">
{% if cursor == current %}
<a class="pagination-link is-current {{ color }}"
aria-label="Page {{ cursor }}"
aria-current="true">
<span class="is-sr-only">Page </span>
{{ cursor }}
</a>
{% else %}
<a class="pagination-link hoverable"
href="{{ link }}"
aria-label="Goto page {{ cursor }}">
<span class="sr-only">Goto page </span>{{ cursor }}
</a>
{% endif %}
</li>
6: Conclusion
Now the pagination tutorial is done.
I think this is all for now.
What is Next ?
Consider continue reading [ Eleventy - Meta - SEO ]. We are going to explore content, starting from metadata in html head tag.
Thank you for reading.