ssg  
Where to Discuss?

Local Group

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.

11ty Pagination: Pagination with Accessability

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.

      <!-- 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>&nbsp;</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>&nbsp;</a>
      {% endif %}
      <!-- Next Page. -->
      {% if pagination.nextPageLink %}
        <a class="pagination-next hoverable"
           href="{{ pagination.nextPageLink }}"
           aria-label="Go to next page"
           rel="next">&nbsp;
          <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>&nbsp;
          <span class="fas fa-forward"></span></a>
      {% endif %}

4: Navigation: First and Last

Just a slight modification.

      <!-- 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>&nbsp;</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>&nbsp;</a>
      {% endif %}
      <!-- Last Page. -->
      {% if current != totalPages %}
        <a class="pagination-next hoverable"
           href="{{ pagination.lastPageLink }}"
           aria-label="Go to last page"
           data-rel="last">&nbsp;
          <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>&nbsp;
          <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.

11ty Pagination: Alternate Animation

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.