Pagination.html template that scores 100 on Lighthouse Accessability

tips & tricks
1

I’m completing my first conversion of a WordPress site to Hugo. WOW, Hugo rocks!

In testing (be sure to test Mobile and Desktop), I got random Chrome Lighthouse Accessibility warnings that a link could not be followed because the default _internal/pagination.html template disabled A tags. Honestly, Lighthouse is awesome but if you’ve never used it, the suggestions, warnings, and errors it displays can be a little overwhelming at first. My first Hugo site scores 100, 100, 100, 100 now.

To correct the accessibility warning, I modified the pagination.html template by not emitting an A tag if there were no previous or next pages. I also added the disabled class to the SPAN I emitted instead of the A tag so that the UI could present different colors for active and disabled links or text.

@bep I’m so new to Hugo, I didn’t want to submit a pull request as this would impact all Hugo developers.

updated-pagination

The below is in my /partials/pagination.html file.

{{ $pag := $.Paginator }}

{{ if gt $pag.TotalPages 1 -}}

<ul class="pagination">

    {{ with $pag.First -}}

    <li class="page-item">

        {{ if $pag.HasPrev }}

        <a href="{{ .URL }}"

            class="page-link"

            aria-label="First"><span aria-hidden="true">&laquo;&laquo;</span></a>

        {{ else }}

        <span class="disabled"

            aria-hidden="true">&laquo;&laquo;</span>

        {{ end }}

    </li>

    {{ end -}}

    <li class="page-item">

        {{ if $pag.HasPrev }}

        <a href="{{ $pag.Prev.URL }}"

            class="page-link"

            aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>

        {{ else }}

        <span class="disabled"

            aria-hidden="true">&laquo;</span>

        {{ end }}

    </li>

    {{- $ellipsed := false -}}

    {{- $shouldEllipse := false -}}

    {{- range $pag.Pagers -}}

    {{- $right := sub .TotalPages .PageNumber -}}

    {{- $showNumber := or (le .PageNumber 3) (eq $right 0) -}}

    {{- $showNumber := or $showNumber (le .TotalPages 5) -}}{{/* Issue #7523 */}}

    {{- $showNumber := or $showNumber (and (gt .PageNumber (sub $pag.PageNumber 2)) (lt .PageNumber (add $pag.PageNumber 2))) -}}

    {{- if $showNumber -}}

    {{- $ellipsed = false -}}

    {{- $shouldEllipse = false -}}

    {{- else -}}

    {{- $shouldEllipse = not $ellipsed -}}

    {{- $ellipsed = true -}}

    {{- end -}}

    {{- if $showNumber }}

    <li class="page-item{{ if eq . $pag }} active{{ end }}">

        <a class="page-link"

            href="{{ .URL }}">{{ .PageNumber }}</a>

    </li>

    {{- else if $shouldEllipse }}

    <li class="page-item disabled">

        <span aria-hidden="true">&nbsp;&hellip;&nbsp;</span>

    </li>

    {{- end -}}

    {{- end }}

    <li class="page-item">

        {{ if $pag.HasNext }}

        <a href="{{ $pag.Next.URL }}"

            class="page-link"

            aria-label="Next"><span aria-hidden="true">&raquo;</span></a>

        {{ else }}

        <span class="disabled"

            aria-hidden="true">&raquo;</span>

        {{ end }}

    </li>

    {{- with $pag.Last }}

    <li class="page-item">

        {{ if $pag.HasNext }}

        <a href="{{ .URL }}"

            class="page-link"

            aria-label="Last"><span aria-hidden="true">&raquo;&raquo;</span></a>

        {{ else }}

        <span class="disabled"

            aria-hidden="true">&raquo;&raquo;</span>

        {{ end }}

    </li>

    {{- end }}

</ul>

{{ end }}

Hope this helps someone,

Karl

3 Likes