ssg  
Article Series

This article series contain few sections.


Obsolete Repository:
This article use obsolete repository. Please refer to below repository for a more recent articles.

Complete Repository

Where to Discuss?

Local Group

Preface

Goal: Bringing screen reader accessability in pagination, and clean up.

Preview

No Preview. You can use any screenreader to test with your browser.

This is basically just where to put sr-only class.

More Recent Code

I have made a better code with Bulma utilizing site.pagination.permalink which you can examine at:


1: Prepare

Artefact that we need.

Source

I just follow bootstrap guidance:

To hidden content visually, you simply need to add sr-only.

<span class="sr-only">Hidden Content</span>

This content can be read by screenreader.

Includes: Pagination: Accesability

Create an empty artefact. Source code used in this tutorial, is available at this repository:

  • /_includes/pagination/06-screenreader.html

Pages: Blog List

Set this blog list page:

  {% include pagination/06-screenreader.html %}

2: Navigation: Previous and Next

Just a slight modification.

    {% if paginator.previous_page %}
      <li class="page-item blog_previous">
        <a class="page-link" 
           href="{{ site.baseurl }}{{ paginator.previous_page_path }}"
           rel="prev">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </a>
      </li>
    {% else %}
      <li class="page-item blog_previous disabled">
        <span class="page-link">&laquo;</span>
      </li>
    {% endif %}
    {% if paginator.next_page %}
      <li class="page-item blog_next">
        <a class="page-link" 
           href="{{ site.baseurl }}{{ paginator.next_page_path }}" 
           rel="next">
          <span aria-hidden="true">&raquo;</span>
          <span class="sr-only">Next</span>
        </a>
      </li>
    {% else %}
      <li class="page-item blog_next disabled">
        <span class="page-link">&raquo;</span>
      </li>
    {% endif %}

3: Navigation: First and Last

Just a slight modification.

    {% if total_pages > link_max %}
      <!-- First Page. -->
      {% if lower_offset > 1 %}
        <li class="page-item first">
          <a class="page-link"
             href="{{ site.baseurl }}{{ page.paginate_root }}">
            <span class="sr-only">Page </span>1</a>
        </li>
      {% endif %}
    {% endif %}
    {% if total_pages > link_max %}
      <!-- Last Page. -->
      {% if upper_offset < total_pages %}
        <li class="page-item last">
          <a class="page-link" 
             href="{{ site.paginate_path | relative_url | replace: ':num', total_pages }}"
          ><span class="sr-only">Page </span>{{ total_pages }}</a>
        </li>
      {% endif %}
    {% endif %}

4: Middle Navigation: Number

      {% if page_current_flag == true %}
      <li class="page-item {% if page == page_current %} active{% endif %} pagination--offset-{{ diff_offset }}">
        {% if page == page_current %} 
          <span class="page-link">
            <span class="sr-only">Page </span>{{ page }}
          </span>
        {% elsif page == 1 %}
          <a class="page-link"
             href="{{ site.baseurl }}{{ paginate_root }}"
           ><span class="sr-only">Page </span>1</a>
        {% else %}
          <a class="page-link"
             href="{{ site.paginate_path | relative_url | replace: ':num', page }}"
           ><span class="sr-only">Page </span>{{ page }}
          </a>
        {% endif %}
      </li>
      {% endif %}

5: Conclusion

Complete Code

As a summary of this pagination tutorial, the complete code is here below:

Clean-up Code

As I promise, get rid of unneeded comments.

{% capture spaceless %}

  {% comment %}
  Pagination links 
  * https://glennmccomb.com/articles/how-to-build-custom-hugo-pagination/
  {% endcomment %}

  {% if page.paginate_root == nil %}
    {% assign paginate_root = "/" %}
  {% else %}    
    {% assign paginate_root = page.paginate_root %}
  {% endif %}

  {% assign total_pages   = paginator.total_pages %}
  {% assign page_current  = paginator.page %}

  {% assign link_offset   = 2 %}  
  {% assign link_max      = link_offset | times: 2 | plus: 1 %}
  
  {% assign limit_lower   = link_offset | plus: 1 %}
  {% assign limit_upper   = total_pages  | minus: link_offset %}
  
  {% assign min_lower     = link_max %}  
  {% assign max_upper     = total_pages | minus: link_max %}
    
  {% assign lower_offset  = page_current | minus: link_offset %}
  {% assign upper_offset  = page_current | plus: link_offset %}

  {% assign lower_indicator = 2 %}
  {% assign upper_indicator = total_pages | minus: 1 %}

{% endcapture %}

<nav aria-label="Page navigation">

  {% if total_pages > 1 %}
  <ul class="pagination justify-content-center">
    <!-- Previous Page. -->
    {% if paginator.previous_page %}
      <li class="page-item blog_previous">
        <a class="page-link" 
           href="{{ site.baseurl }}{{ paginator.previous_page_path }}"
           rel="prev">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </a>
      </li>
    {% else %}
      <li class="page-item blog_previous disabled">
        <span class="page-link">&laquo;</span>
      </li>
    {% endif %}

    {% if total_pages > link_max %}
      <!-- First Page. -->
      {% if lower_offset > 1 %}
        <li class="page-item first">
          <a class="page-link"
             href="{{ site.baseurl }}{{ page.paginate_root }}">
            <span class="sr-only">Page </span>1</a>
        </li>
      {% endif %}

      <!-- Early (More Pages) Indicator. -->
      {% if lower_offset > lower_indicator %}
        <li class="pages-indicator first disabled">
          <span class="page-link">...</span>
        </li>
      {% endif %}
    {% endif %}

    <!-- Page numbers. -->
    {% for page in (1..total_pages) %}
    
    {% capture spaceless %}
      {% assign page_current_flag = false %}

      {% if total_pages > link_max %}

        {% if page_current <= limit_lower %}
          {% if page <= min_lower %}
            {% assign page_current_flag = true %}
          {% endif %}

        {% elsif page_current >= limit_upper %}
          {% if page > max_upper %}
            {% assign page_current_flag = true %}
          {% endif %}

        {% else %}
          
          {% if (page >= lower_offset) and (page <= upper_offset) %}
            {% assign page_current_flag = true %}
          {% endif %}

        {% endif %}
      {% else %}

        {% assign page_current_flag = true %}
      {% endif %}

      {% if page_current_flag == true %}
        {% assign diff_offset = page | minus: page_current | abs %}
      {% endif %}
    {% endcapture %}

      {% if page_current_flag == true %}
      <li class="page-item {% if page == page_current %} active{% endif %} pagination--offset-{{ diff_offset }}">
        {% if page == page_current %} 
          <span class="page-link">
            <span class="sr-only">Page </span>{{ page }}
          </span>
        {% elsif page == 1 %}
          <a class="page-link"
             href="{{ site.baseurl }}{{ paginate_root }}"
           ><span class="sr-only">Page </span>1</a>
        {% else %}
          <a class="page-link"
             href="{{ site.paginate_path | relative_url | replace: ':num', page }}"
           ><span class="sr-only">Page </span>{{ page }}
          </a>
        {% endif %}
      </li>
      {% endif %}
    {% endfor %}

    {% if total_pages > link_max %}
      <!-- Late (More Pages) Indicator. -->
      {% if upper_offset < upper_indicator %}
        <li class="pages-indicator last disabled">
          <span class="page-link">...</span>
        </li>
      {% endif %}

      <!-- Last Page. -->
      {% if upper_offset < total_pages %}
        <li class="page-item last">
          <a class="page-link" 
             href="{{ site.paginate_path | relative_url | replace: ':num', total_pages }}"
          ><span class="sr-only">Page </span>{{ total_pages }}</a>
        </li>
      {% endif %}
    {% endif %}

    <!-- Next Page. -->
    {% if paginator.next_page %}
      <li class="page-item blog_next">
        <a class="page-link" 
           href="{{ site.baseurl }}{{ paginator.next_page_path }}" 
           rel="next">
          <span aria-hidden="true">&raquo;</span>
          <span class="sr-only">Next</span>
        </a>
      </li>
    {% else %}
      <li class="page-item blog_next disabled">
        <span class="page-link">&raquo;</span>
      </li>
    {% endif %}
  </ul>
  {% endif %}

</nav>

That code above, should be our final code, in our tutorial.


Summary

Thank you for reading. I think that’s all. Consider go back reading [ Jekyll Pagination - Summary ].

Farewell. We shall meet again.