Use inline SVG Font Awesome icons for pagination links

eleventy.config.md.js

@@ -15,7 +15,7 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(pluginTOC, {
         tags: ['h2', 'h3', 'h4', 'h5', 'h6'],
         wrapper: function (toc) {
-            return `<nav class="toc" aria-label="Table of contents">${toc}</nav>`;
+            return `<nav class="toc" aria-labelledby="toc-heading">${toc}</nav>`;
         },
     });
     eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });

src/_includes/global/content.njk

@@ -1,6 +1,7 @@
 <header class="main__header">
     {% if isArticle or hasBreadcrumbs %}
-        <nav aria-label="Breadcrumbs">
+        <nav aria-labelledby="breadcrumbs-title">
+            <h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
             <ol class="breadcrumbs">
                 {% set breadcrumbNavPages = collections.all | eleventyNavigationBreadcrumb(articleTitle or pageTitle or title) %}
                 {%- for entry in breadcrumbNavPages %}
@@ -47,7 +48,8 @@
         {{ content | safe }}
 
     {% if tags and tags.includes("posts") %}
-        <nav class="blog__post--pagination" aria-label="Next and Previous Blog Posts">
+        <nav class="blog__post--pagination" aria-labelledby="nextprev-title">
+            <h2 class="visually-hidden" id="nextprev-title">Next and Previous Blog Posts</h2>
             {%- if collections.posts %}
                 {%- set previousPost = collections.posts | getPreviousCollectionItem %}
                 {%- set nextPost = collections.posts | getNextCollectionItem %}

src/_includes/global/footer.njk

@@ -4,8 +4,8 @@
 {% endblock -%}
 
 {%- if tags and tags.includes("shrine pages") %}
-    <nav class="footer__shrines">
+    <nav class="footer__shrines" aria-labelledby="backto-title">
-        <p>Back to:</p>
+        <p id="backto-title">Back to:</p>
         <ul class="footer__links">
             <li><a href="/shrines/">Shrine Directory</a></li>
             <li><a href="/">{{ sitemeta.siteName }}</a></li>

src/_includes/global/navbar.njk

@@ -14,7 +14,8 @@ https://kalechips.net/projects/snippets/burger #}
 {%- endif -%}
 {% endset %}
 
-<nav class="navbar" aria-label="Top level">
+<nav class="navbar" aria-labelledby="top-level-nav-title">
+    <h2 class="visually-hidden" id="top-level-nav-title">Top Level Navigation Bar</h2>
     <details class="navbar__burger">
         <summary class="navbar__toggle" id="toggle">
             <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -22,7 +23,8 @@ https://kalechips.net/projects/snippets/burger #}
             </svg>
             Navigation
         </summary>
-        <nav class="navbar__menu" aria-label="Top level hamburger menu">
+        <nav class="navbar__menu" aria-labelledby="hamburger-nav-title">
+            <h3 class="visually-hidden" id="hamburger-nav-title">Hamburger Menu</h3>
             <ul class="navbar__menu--links">
                 {{ navLinksEl | safe }}
                 <li class="skip"><a href="#toggle">Close Menu</a></li>

src/_includes/global/pagination-oldnew.njk

@@ -1,52 +1,57 @@
-{% set firstLabel = "Newest" %}
+{% set firstLabel %}
-{% set prevLabel = "Newer" %}
+<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z"></svg>
-{% set nextLabel = "Older" %}
+Newest{% endset %}
-{% set lastLabel = "Oldest" %}
 
-<nav aria-label="pagination" class="pagination__wrapper">
+{% set prevLabel %}
+<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
+Newer{% endset %}
+
+{% set nextLabel %}Older
+<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>
+{% endset %}
+
+{% set lastLabel %}Oldest
+<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"/></svg>
+{% endset %}
+
+<nav aria-labelledby="pagination-title" class="pagination__wrapper">
+    <h2 class="visually-hidden" id="pagination-title">Pagination</h2>
     <ul class="pagination">
         <li>
             {% if pagination.href.first %}
-                <a href=" {{ pagination.href.first }}">
+                <a href="{{ pagination.href.first }}">
-                    <i class="fa-solid fa-angles-left"></i>
+                    {{ firstLabel | safe }}
-                    {{ firstLabel }}
                 </a>
             {% else %}
-                <i class="fa-solid fa-angles-left"></i>
+                {{ firstLabel | safe }}
-                {{ firstLabel }}
             {% endif %}
         </li>
         <li>
             {% if pagination.href.previous %}
                 <a href=" {{ pagination.href.previous }}">
                     <i class="fa-solid fa-angle-left"></i>
-                    {{ prevLabel }}
+                    {{ prevLabel | safe }}
                 </a>
             {% else %}
-                <i class="fa-solid fa-angle-left"></i>
+                {{ prevLabel | safe }}
-                {{ prevLabel }}
             {% endif %}
         </li>
         <li>
              {% if pagination.href.next %}
                 <a href=" {{ pagination.href.next }}">
-                    {{ nextLabel }}
+                    {{ nextLabel | safe }}
-                    <i class="fa-solid fa-angle-right"></i>
                 </a>
             {% else %}
-                {{ nextLabel }}
+                {{ nextLabel | safe }}
-                <i class="fa-solid fa-angle-right"></i>
             {% endif %}
         </li>
         <li>
             {% if pagination.href.last %}
                 <a href=" {{ pagination.href.last }}">
-                    {{ lastLabel }}
+                    {{ lastLabel | safe }}
-                    <i class="fa-solid fa-angles-right"></i>
                 </a>
             {% else %}
-                {{ lastLabel }}
+                {{ lastLabel | safe }}
-                <i class="fa-solid fa-angles-right"></i>
             {% endif %}
         </li>
     </ul>

src/_includes/global/shrineinfo.njk

@@ -1,4 +1,4 @@
-<aside class="right-sidebar">
+<aside class="right-sidebar" aria-label="Right sidebar">
     <div class="shrine__info sidebar--sticky">
         <h2>About</h2>
         {% block shrineAbout %}

src/_includes/global/toc.njk

@@ -1,7 +1,7 @@
 <aside class="left-sidebar" aria-label="Left sidebar">
     <details-utils force-open="(min-width: 60rem)" force-restore>
         <details class="toc__wrapper sidebar--sticky">
-            <summary class="toc__heading">
+            <summary class="toc__heading" id="toc-heading">
                 Table of Contents
             </summary>
             {{ content | toc | safe }}

src/_includes/main/changelogs.njk

@@ -5,8 +5,8 @@ articleElement: true
 
 {% set currentUrl %}{{ page.url }}{% endset %}
 
-<nav class="changelog__nav">
+<nav class="changelog__nav" aria-labelledby="changelog-nav-title">
-    <p class="changelog__nav--title">Changelog Archive:</p>
+    <p class="changelog__nav--title" id="changelog-nav-title">Changelog Archive:</p>
     <ul class="changelog__nav--links">
         <li><a
             {% if currentUrl === "/changelogs/" %}aria-current="page"{% endif %}

src/_includes/main/content-nav.njk

@@ -1,6 +1,6 @@
 <aside class="right-sidebar" aria-label="Right sidebar">
-    <nav class="content__nav sidebar--sticky" aria-label="Sidebar">
+    <nav class="content__nav sidebar--sticky" aria-labelledby="my-contents-title">
-        <h2 class="content__nav--title">My Contents</h2>
+        <h2 class="content__nav--title" id="my-contents-title">My Contents</h2>
         <ul class="content__nav--links">
             {% for archive in collections.archive %}
                 <li><a href="{{ archive.url }}">{{ archive.data.title }}</a></li>

src/_includes/main/links.njk

@@ -14,7 +14,8 @@ isContentDivided: true
     <h2>Links by Category</h2>
 
     <p>Use the following tabs to view my link collection by category.</p>
-    <nav>
+    <nav aria-labelledby="tabs-title">
+        <h3 class="visually-hidden" id="tabs-title">Tabs Group</h3>
         <ul class="tabs">
         {% for group in linkGroups %}
             <li><a class="tab__btn" href="#{{ group.data.title | slugify }}">{{ group.data.title }}</a></li>

src/assets/css/utility.css

@@ -19,6 +19,7 @@
 }
 
 .inline-icon {
+    vertical-align: -10%;
     height: 1em;
     fill: currentColor;
 }