From 1ea4ad4a798d5a945ecc27f5dd66c129de42f4fe Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 22 Sep 2021 18:15:06 +0000
Subject: [PATCH] Bug 28101: Update breadcrumb markup in the OPAC for
 consistency and accessibility

Modified breadcrumbs to be accessible, in particular for a
screen-reader. Also ensured the breadcrumbs were all consistent.

Made the block of breadcrumbs to be a <nav id="breadcrumbs"
aria-label="Breadcrumb" class="breadcrumbs"> with an ordered list
inside. The last breadcrumb also has aria-current="page" to specify that
it is the current page.

To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)

- Confirm that OPAC templates are updated consistently to use
  breadcrumbs markup beginning with '<nav
  id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">'
- Pages in the OPAC should look consistent, with the last breadcrumb
  styled as text and with the "aria-current" attribute "page."

Sponsored-by: Catalyst IT
---
 .../opac-tmpl/bootstrap/css/src/opac.scss     | 15 +++-
 .../bootstrap/en/modules/errors/errorpage.tt  | 12 +--
 .../opac-tmpl/bootstrap/en/modules/ilsdi.tt   | 86 ++++++++++---------
 .../bootstrap/en/modules/opac-ISBDdetail.tt   | 12 +--
 .../bootstrap/en/modules/opac-MARCdetail.tt   | 12 +--
 .../en/modules/opac-account-pay-error.tt      | 12 +--
 .../bootstrap/en/modules/opac-account.tt      | 12 +--
 .../bootstrap/en/modules/opac-advsearch.tt    | 12 +--
 .../en/modules/opac-alert-subscribe.tt        | 24 ++++--
 .../en/modules/opac-auth-MARCdetail.tt        | 12 +--
 .../bootstrap/en/modules/opac-auth-detail.tt  | 12 +--
 .../bootstrap/en/modules/opac-auth.tt         | 12 +--
 .../en/modules/opac-authorities-home.tt       | 12 +--
 .../opac-authoritiessearchresultlist.tt       | 12 +--
 .../bootstrap/en/modules/opac-blocked.tt      | 12 +--
 .../bootstrap/en/modules/opac-browse.tt       | 12 +--
 .../bootstrap/en/modules/opac-browser.tt      | 12 +--
 .../en/modules/opac-course-details.tt         | 12 +--
 .../en/modules/opac-course-reserves.tt        | 12 +--
 .../bootstrap/en/modules/opac-detail.tt       | 12 +--
 .../bootstrap/en/modules/opac-discharge.tt    | 12 +--
 .../en/modules/opac-downloadshelf.tt          | 10 +--
 .../en/modules/opac-full-serial-issues.tt     | 12 +--
 .../bootstrap/en/modules/opac-holdshistory.tt | 12 +--
 .../bootstrap/en/modules/opac-illrequests.tt  | 22 ++---
 .../bootstrap/en/modules/opac-imageviewer.tt  | 12 +--
 .../bootstrap/en/modules/opac-issue-note.tt   | 12 +--
 .../bootstrap/en/modules/opac-library.tt      | 16 ++--
 .../bootstrap/en/modules/opac-main.tt         | 16 ++--
 .../opac-memberentry-update-submitted.tt      | 12 +--
 .../bootstrap/en/modules/opac-memberentry.tt  | 10 +--
 .../bootstrap/en/modules/opac-messaging.tt    | 12 +--
 .../en/modules/opac-overdrive-search.tt       | 12 +--
 .../bootstrap/en/modules/opac-passwd.tt       | 12 +--
 .../en/modules/opac-password-recovery.tt      | 12 +--
 .../en/modules/opac-patron-consent.tt         | 12 +--
 .../bootstrap/en/modules/opac-privacy.tt      | 12 +--
 .../en/modules/opac-readingrecord.tt          | 12 +--
 .../en/modules/opac-recordedbooks-search.tt   | 12 +--
 .../modules/opac-registration-confirmation.tt | 12 +--
 .../modules/opac-registration-email-sent.tt   | 10 +--
 .../en/modules/opac-registration-invalid.tt   | 12 +--
 .../en/modules/opac-reportproblem.tt          | 12 +--
 .../en/modules/opac-request-article.tt        | 12 +--
 .../bootstrap/en/modules/opac-reserve.tt      | 12 +--
 .../en/modules/opac-restrictedpage.tt         | 12 +--
 .../bootstrap/en/modules/opac-results.tt      | 18 ++--
 .../en/modules/opac-routing-lists.tt          | 12 +--
 .../en/modules/opac-search-history.tt         | 16 ++--
 .../en/modules/opac-serial-issues.tt          | 12 +--
 .../bootstrap/en/modules/opac-shareshelf.tt   | 12 +--
 .../bootstrap/en/modules/opac-shelves.tt      | 32 +++----
 .../bootstrap/en/modules/opac-showreviews.tt  | 12 +--
 .../bootstrap/en/modules/opac-suggestions.tt  | 12 +--
 .../bootstrap/en/modules/opac-tags.tt         | 12 +--
 .../bootstrap/en/modules/opac-tags_subject.tt | 12 +--
 .../bootstrap/en/modules/opac-topissues.tt    | 12 +--
 .../bootstrap/en/modules/opac-user.tt         | 12 +--
 .../bootstrap/en/modules/svc/suggestion.tt    | 14 ++-
 59 files changed, 438 insertions(+), 403 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index ff84a764c0..fe7dc3e52f 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -565,6 +565,19 @@ th {
     border-radius: 0px;
 }
 
+.breadcrumb-item {
+    &.active {
+        a:link,
+        a:visited,
+        a:hover,
+        a:active {
+            color: #666;
+            cursor: text;
+            text-decoration: none;
+        }
+    }
+}
+
 #opac-main-search {
     background: #f0f3f3;
     margin: 7px 0;
@@ -1253,7 +1266,7 @@ nav {
         }
     }
 
-    background: #E6F0F2 none;
+    background: transparent none;
     border: 0;
 
     &.breadcrumb {
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/errors/errorpage.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/errors/errorpage.tt
index c73f858d2d..351525c113 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/errors/errorpage.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/errors/errorpage.tt
@@ -7,16 +7,16 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">Error [% errno | html %]</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Error [% errno | html %]</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/ilsdi.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/ilsdi.tt
index 2e6a6538c4..8b9f1a371e 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/ilsdi.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/ilsdi.tt
@@ -37,48 +37,50 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <ul class="breadcrumb">
-            <li><a href="/cgi-bin/koha/opac-main.pl">Home</a></li>
-            [% IF ( GetAvailability ) %]
-                <li><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
-                <li><a href="#">GetAvailability</a></li>
-            [% ELSIF ( GetRecords ) %]
-                <li><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
-                <li><a href="#">GetRecords</a></li>
-            [% ELSIF ( GetAuthorityRecords ) %]
-                <li><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
-                <li><a href="#">GetAuthorityRecords</a></li>
-            [% ELSIF ( LookupPatron ) %]
-                <li><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
-                <li><a href="#">LookupPatron</a></li>
-            [% ELSIF ( AuthenticatePatron ) %]
-                <li><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
-                <li><a href="#">AuthenticatePatron</a></li>
-            [% ELSIF ( GetPatronInfo ) %]
-                <li><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
-                <li><a href="#">GetPatronInfo</a></li>
-            [% ELSIF ( GetPatronStatus ) %]
-                <li><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
-                <li><a href="#">GetPatronStatus</a></li>
-            [% ELSIF ( GetServices ) %]
-                <li><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
-                <li><a href="#">GetServices</a></li>
-            [% ELSIF ( RenewLoan ) %]
-                <li><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
-                <li><a href="#">RenewLoan</a></li>
-            [% ELSIF ( HoldTitle ) %]
-                <li><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
-                <li><a href="#">HoldTitle</a></li>
-            [% ELSIF ( HoldItem ) %]
-                <li><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
-                <li><a href="#">HoldItem</a></li>
-            [% ELSIF ( CancelHold ) %]
-                <li><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
-                <li><a href="#">CancelHold</a></li>
-            [% ELSE %]
-                <li><a href="#">ILS-DI</a></li>
-            [% END %]
-        </ul>
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="/cgi-bin/koha/opac-main.pl">Home</a></li>
+                [% IF ( GetAvailability ) %]
+                    <li class="breadcrumb-item"><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">GetAvailability</a></li>
+                [% ELSIF ( GetRecords ) %]
+                    <li class="breadcrumb-item"><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">GetRecords</a></li>
+                [% ELSIF ( GetAuthorityRecords ) %]
+                    <li class="breadcrumb-item"><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">GetAuthorityRecords</a></li>
+                [% ELSIF ( LookupPatron ) %]
+                    <li class="breadcrumb-item"><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">LookupPatron</a></li>
+                [% ELSIF ( AuthenticatePatron ) %]
+                    <li class="breadcrumb-item"><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">AuthenticatePatron</a></li>
+                [% ELSIF ( GetPatronInfo ) %]
+                    <li class="breadcrumb-item"><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">GetPatronInfo</a></li>
+                [% ELSIF ( GetPatronStatus ) %]
+                    <li class="breadcrumb-item"><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">GetPatronStatus</a></li>
+                [% ELSIF ( GetServices ) %]
+                    <li class="breadcrumb-item"><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">GetServices</a></li>
+                [% ELSIF ( RenewLoan ) %]
+                    <li class="breadcrumb-item"><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">RenewLoan</a></li>
+                [% ELSIF ( HoldTitle ) %]
+                    <li class="breadcrumb-item"><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">HoldTitle</a></li>
+                [% ELSIF ( HoldItem ) %]
+                    <li class="breadcrumb-item"><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">HoldItem</a></li>
+                [% ELSIF ( CancelHold ) %]
+                    <li class="breadcrumb-item"><a href="/cgi-bin/koha/ilsdi.pl">ILS-DI</a></li>
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">CancelHold</a></li>
+                [% ELSE %]
+                    <li class="breadcrumb-item active"><a href="#" aria-current="page">ILS-DI</a></li>
+                [% END %]
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-ISBDdetail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-ISBDdetail.tt
index bbb20c717d..936960f6bd 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-ISBDdetail.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-ISBDdetail.tt
@@ -9,16 +9,16 @@
 [% INCLUDE 'masthead.inc' %]
 <div class="main">
 
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
-            <li class="breadcrumb-item" aria-current="page">
-                <a href="#">ISBD view</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">ISBD view</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-MARCdetail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-MARCdetail.tt
index ac6f48b7cd..392ca0b3ac 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-MARCdetail.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-MARCdetail.tt
@@ -8,16 +8,16 @@
 [% INCLUDE 'bodytag.inc' bodyid='opac-marcdetail' bodyclass='scrollto' %]
 [% INCLUDE 'masthead.inc' %]
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
-            <li class="breadcrumb-item" aria-current="page">
-                <a href="#">MARC view: [% bibliotitle | html %]</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">MARC view: [% bibliotitle | html %]</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account-pay-error.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account-pay-error.tt
index 9f360370ec..d08819a72e 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account-pay-error.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account-pay-error.tt
@@ -7,19 +7,19 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-routing-lists.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                <a href="#">Your payment</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Your payment</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account.tt
index 4251f8356c..6c63c41351 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-account.tt
@@ -18,19 +18,19 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                <a href="#">Your charges</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Your charges</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
index e13a918c4a..62e6427059 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
@@ -12,16 +12,16 @@
 <form action="/cgi-bin/koha/opac-search.pl" method="get">
     <input type="hidden" name="advsearch" value="1"/>
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">Advanced search</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Advanced search</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-alert-subscribe.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-alert-subscribe.tt
index 10625d8b1b..de580efaff 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-alert-subscribe.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-alert-subscribe.tt
@@ -8,11 +8,25 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <ul class="breadcrumb">
-            <li><a href="/cgi-bin/koha/opac-main.pl">Home</a></li>
-            <li><a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | uri %]">Details for [% bibliotitle | html %]</a></li>
-            <li><a href="#">[% IF ( typeissue ) %]Subscribe to a subscription alert [% ELSIF ( typeissuecancel ) %] Unsubscribe from a subscription alert [% END %]</a></li>
-        </ul>
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="/cgi-bin/koha/opac-main.pl">Home</a>
+                </li>
+                <li class="breadcrumb-item">
+                    <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | uri %]">Details for [% bibliotitle | html %]</a>
+                </li>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">
+                        [% IF ( typeissue ) %]
+                            Subscribe to a subscription alert
+                        [% ELSIF ( typeissuecancel ) %]
+                            Unsubscribe from a subscription alert
+                        [% END %]
+                    </a>
+                </li>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-MARCdetail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-MARCdetail.tt
index 339bea9c07..afef52de10 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-MARCdetail.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-MARCdetail.tt
@@ -11,19 +11,19 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-authorities-home.pl">Authority search</a>
                 </li>
-                <li class="breadcrumb-item" aria-current="page">
-                    <a href="#">Entry [% authtypetext | html %]</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Entry [% authtypetext | html %]</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-detail.tt
index 608b246792..eb23f141f9 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-detail.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-detail.tt
@@ -11,19 +11,19 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-authorities-home.pl">Authority search</a>
                 </li>
-                <li class="breadcrumb-item" aria-current="page">
-                    <a href="#">[% summary.mainentry | html %][% IF authtypetext %] ([% authtypetext | html %])[% END %]</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">[% summary.mainentry | html %][% IF authtypetext %] ([% authtypetext | html %])[% END %]</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth.tt
index e8b03356fa..966080d838 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth.tt
@@ -20,16 +20,16 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                <a href="#">Log in</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Log in</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row justify-content-center">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authorities-home.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authorities-home.tt
index 9659e5ddcb..80bc6433ca 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authorities-home.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authorities-home.tt
@@ -8,16 +8,16 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item" aria-current="page">
-                    <a href="#">Authority search</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Authority search</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt
index 1f66ec389b..54a3b9c348 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-authoritiessearchresultlist.tt
@@ -42,19 +42,19 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-authorities-home.pl">Authority search</a>
                 </li>
-                <li class="breadcrumb-item" aria-current="page">
-                    <a href="#">Results</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Results</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-blocked.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-blocked.tt
index 43cd083839..8520a26186 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-blocked.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-blocked.tt
@@ -14,16 +14,16 @@
 [% INCLUDE 'bodytag.inc' bodyid='opac-blocked' %]
 [% INCLUDE 'masthead.inc' %]
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
-            <li class="breadcrumb-item" aria-current="page">
-                Blocked record
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Blocked record</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row justify-content-center">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browse.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browse.tt
index be53b21453..ab6fcdae41 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browse.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browse.tt
@@ -9,16 +9,16 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                <a href="#">Browse search</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Browse search</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browser.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browser.tt
index c45b5186a0..b03b96d81d 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browser.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-browser.tt
@@ -8,16 +8,16 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">Browse our catalog</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Browse our catalog</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
index 234fe1c844..9236149bca 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-details.tt
@@ -19,19 +19,19 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-course-reserves.pl">Course reserves</a>
             </li>
-            <li class="breadcrumb-item" aria-current="page">
-                Course reserves for &nbsp;<em>[% course.course_name | html %]</em>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Course reserves for &nbsp;<em>[% course.course_name | html %]</em></a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt
index 2c90296486..c0437f0250 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-course-reserves.tt
@@ -17,16 +17,16 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
-            <li class="breadcrumb-item" aria-current="page">
-                <a href="#">Course reserves</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Course reserves</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
index ce9bff3939..59000c0c45 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
@@ -42,16 +42,16 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
-            <li class="breadcrumb-item" aria-current="page">
-                <a href="#"><span>Details for: </span>[% INCLUDE 'biblio-title.inc' %]</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page"><span>Details for: </span>[% INCLUDE 'biblio-title.inc' %]</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-discharge.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-discharge.tt
index 223d24921c..28c6e876e6 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-discharge.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-discharge.tt
@@ -8,16 +8,16 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                <a href="#">Discharge</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Discharge</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadshelf.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadshelf.tt
index da67dccec2..eb35b6f2c5 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadshelf.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-downloadshelf.tt
@@ -7,8 +7,8 @@
     [% INCLUDE 'bodytag.inc' bodyid='opac-downloadlist' %]
         [% INCLUDE 'masthead.inc' %]
         <div class="main">
-            <nav aria-label="breadcrumb">
-                <ul class="breadcrumb">
+            <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+                <ol class="breadcrumb">
                     <li class="breadcrumb-item">
                         <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                     </li>
@@ -22,11 +22,11 @@
                             <a href="/cgi-bin/koha/opac-shelves.pl?op=list&amp;category=2">Public lists</a>
                         [% END %]
                     </li>
-                    <li class="breadcrumb-item active" aria-current="page">
-                        Download list <em>[% shelf.shelfname | html %]</em>
+                    <li class="breadcrumb-item active">
+                        <a href="#" aria-current="page">Download list <em>[% shelf.shelfname | html %]</em></a>
                     </li>
                 </ul>
-            </nav>
+            </nav> <!-- /#breadcrumbs -->
 
             <div class="container-fluid">
                 <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-full-serial-issues.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-full-serial-issues.tt
index 2d24c8a329..3c3bdcef9f 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-full-serial-issues.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-full-serial-issues.tt
@@ -55,19 +55,19 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | uri %]">Details for [% bibliotitle | html %]</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">Full subscription history</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Full subscription history</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-holdshistory.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-holdshistory.tt
index bfcd0e073d..31279d3d8f 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-holdshistory.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-holdshistory.tt
@@ -39,19 +39,19 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
             </li>
-            <li class="breadcrumb-item" aria-current="page">
-                <a href="#">Your holds history</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Your holds history</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt
index f119ef145e..e8ccc560ce 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-illrequests.tt
@@ -17,8 +17,8 @@
 [% END %]
 [% INCLUDE 'masthead.inc' %]
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
@@ -29,25 +29,25 @@
             [% END %]
 
             [% IF method != 'list' %]
-                <li class="breadcrumb-item" aria-current="page">
+                <li class="breadcrumb-item active">
                     <a href="/cgi-bin/koha/opac-illrequests.pl">Interlibrary loan requests</a>
                 </li>
                 [% IF method == 'create' %]
-                    <li class="breadcrumb-item" aria-current="page">
-                        New interlibrary loan request
+                    <li class="breadcrumb-item active">
+                        <a href="#" aria-current="page">New interlibrary loan request</a>
                     </li>
                 [% ELSIF method == 'view' %]
-                    <li class="breadcrumb-item" aria-current="page">
-                        View interlibrary loan request
+                    <li class="breadcrumb-item active">
+                        <a href="#" aria-current="page">View interlibrary loan request</a>
                     </li>
                 [% END %]
             [% ELSE %]
-                <li class="breadcrumb-item" aria-current="page">
-                    Interlibrary loan requests
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Interlibrary loan requests</a>
                 </li>
             [% END %]
-        </ul> <!-- / .breadcrumb -->
-    </nav>
+        </ol> <!-- / .breadcrumb -->
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-imageviewer.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-imageviewer.tt
index 0e3647d95b..8e4459d068 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-imageviewer.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-imageviewer.tt
@@ -36,8 +36,8 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
@@ -52,11 +52,11 @@
                         [% END %]
                     [% END %][% INCLUDE 'biblio-title.inc' %]</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">Images</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Images</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-issue-note.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-issue-note.tt
index 0ec32d56fc..fdcc76e878 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-issue-note.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-issue-note.tt
@@ -10,19 +10,19 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                <a href="#">Editing issue note for [% title | html %] [% author | html %]</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Editing issue note for [% title | html %] [% author | html %]</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-library.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-library.tt
index 2c3add4825..d8720868ee 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-library.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-library.tt
@@ -44,8 +44,8 @@
 [% END %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
@@ -53,16 +53,16 @@
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-library.pl">Libraries</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">[% library.branchname | html %]</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">[% library.branchname | html %]</a>
                 </li>
             [% ELSE %]
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="/cgi-bin/koha/opac-library.pl">Libraries</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Libraries</a>
                 </li>
             [% END %]
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt
index d46100fcbe..60f0088a1a 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-main.tt
@@ -18,22 +18,22 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             [% IF news_item %]
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    [% news_item.title | html %]
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">[% news_item.title | html %]</a>
                 </li>
             [% ELSE %]
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="/cgi-bin/koha/opac-main.pl">Home</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Home</a>
                 </li>
             [% END %]
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     [% IF Koha.Preference( 'opacuserlogin' ) == 1 %]
         [% IF ( loggedinusername ) %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry-update-submitted.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry-update-submitted.tt
index 696be73fd7..57325c9758 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry-update-submitted.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry-update-submitted.tt
@@ -8,19 +8,19 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
                 </li>
-                <li class="breadcrumb-item" aria-current="page">
-                    <a href="#">Updates to your record</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Updates to your record</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry.tt
index 7f1ad4a58a..9186e3e0f1 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-memberentry.tt
@@ -32,8 +32,8 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
@@ -46,11 +46,11 @@
                 </li>
             [% ELSE %]
                 <li class="breadcrumb-item active">
-                    <a href="#">Register a new account</a>
+                    <a href="#" aria-current="page">Register a new account</a>
                 </li>
             [% END %]
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt
index a1406a1af4..025c8a7e9c 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-messaging.tt
@@ -8,19 +8,19 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
             </li>
-            <li class="breadcrumb-item" aria-current="IsPatronPage">
-                <a href="#">Your messaging settings</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Your messaging settings</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt
index 5342badc09..2a690c7696 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-overdrive-search.tt
@@ -11,16 +11,16 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">OverDrive search for '[% q | html %]'</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">OverDrive search for '[% q | html %]'</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-passwd.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-passwd.tt
index 922a089ecb..ce38876c8e 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-passwd.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-passwd.tt
@@ -10,19 +10,19 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                <a href="#">Change your password</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Change your password</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-password-recovery.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-password-recovery.tt
index eb04e67d9f..3704346503 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-password-recovery.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-password-recovery.tt
@@ -48,16 +48,16 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
-            <li class="breadcrumb-item" aria-current="page">
-                <a href="#">Forgotten password recovery</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Forgotten password recovery</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-patron-consent.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-patron-consent.tt
index a78bd3a854..124677197f 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-patron-consent.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-patron-consent.tt
@@ -9,19 +9,19 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-user.pl">[% patron.firstname | html %] [% patron.surname | html %]</a>
             </li>
-            <li class="breadcrumb-item" aria-current="page">
-                <a href="#">Your consents</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Your consents</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-privacy.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-privacy.tt
index d77bea2dfb..67006f51f1 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-privacy.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-privacy.tt
@@ -8,19 +8,19 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
             </li>
-            <li class="breadcrumb-item" aria-current="page">
-                <a href="#">Your privacy management</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Your privacy management</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
index fdbaf8285d..28924153a9 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
@@ -21,19 +21,19 @@
 [% END %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
             </li>
-            <li class="breadcrumb-item" aria-current="page">
-                <a href="#">Your checkout history</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Your checkout history</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-recordedbooks-search.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-recordedbooks-search.tt
index a0288f4ae6..e9fcfd7269 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-recordedbooks-search.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-recordedbooks-search.tt
@@ -11,16 +11,16 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">RecordedBooks search for '[% q | html %]'</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">RecordedBooks search for '[% q | html %]'</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-confirmation.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-confirmation.tt
index b688de43d1..49d3b30a2a 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-confirmation.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-confirmation.tt
@@ -11,16 +11,16 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                <a href="#">Registration complete</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Registration complete</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-email-sent.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-email-sent.tt
index 8564ae6bde..ef03a83c3d 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-email-sent.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-email-sent.tt
@@ -8,16 +8,16 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item">
+                <li class="breadcrumb-item active">
                     <a href="#">Register a new account</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-invalid.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-invalid.tt
index 0cdf2921dd..bed25cc7ef 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-invalid.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-registration-invalid.tt
@@ -8,16 +8,16 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">Register a new account</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Register a new account</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reportproblem.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reportproblem.tt
index dac2b9b0db..6b1cc6be03 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reportproblem.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reportproblem.tt
@@ -8,16 +8,16 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">Report a problem</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Report a problem</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-request-article.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-request-article.tt
index f33c470e87..01611736b6 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-request-article.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-request-article.tt
@@ -16,19 +16,19 @@
 [% SET disclaimer = AdditionalContents.get( location => "ArticleRequestsDisclaimerText", lang => lang, library => Branches.GetLoggedInBranchcode ) %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblio.biblionumber | uri %]">Details for: [% biblio.title | html %]</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                <a href="#">Request article</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Request article</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid maincontent">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reserve.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reserve.tt
index 8c57b2bddd..36243a387e 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reserve.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-reserve.tt
@@ -14,16 +14,16 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                <a href="#">Placing a hold</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Placing a hold</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container">
         <div id="holds" class="maincontent">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-restrictedpage.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-restrictedpage.tt
index 3150f1e101..1bfadf3451 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-restrictedpage.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-restrictedpage.tt
@@ -20,18 +20,18 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             [% IF Koha.Preference('RestrictedPageTitle') %]
-                <li class="breadcrumb-item active" aria-current="page">
-                    [% Koha.Preference('RestrictedPageTitle') | html %]
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">[% Koha.Preference('RestrictedPageTitle') | html %]</a>
                 </li>
             [% END %]
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
index 3a9be017dc..f62540baad 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-results.tt
@@ -34,8 +34,8 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
@@ -45,20 +45,20 @@
                             <a href="[% ReturnPath | url %]">Advanced search</a>
                         </li>
                     [% END %]
-                    <li class="breadcrumb-item active" aria-current="page">
+                    <li class="breadcrumb-item active">
                         [% IF ( ms_value ) %]
-                            <a href="#" title="You searched [% IF ( query_desc ) %] for '[% query_desc | html %]'[% END %][% IF ( limit_desc ) %] with limit(s): '[% limit_desc | html %]'[% END %]">Results of search for '[% ms_value | html %]'</a>
+                            <a href="#" aria-current="page" title="You searched [% IF ( query_desc ) %] for '[% query_desc | html %]'[% END %][% IF ( limit_desc ) %] with limit(s): '[% limit_desc | html %]'[% END %]">Results of search for '[% ms_value | html %]'</a>
                         [% ELSE %]
-                            <a href="#" title="You searched [% IF ( query_desc ) %] for '[% query_desc | html %]'[% END %][% IF ( limit_desc ) %] with limit(s): '[% limit_desc | html %]'[% END %]">Search results</a>
+                            <a href="#" aria-current="page" title="You searched [% IF ( query_desc ) %] for '[% query_desc | html %]'[% END %][% IF ( limit_desc ) %] with limit(s): '[% limit_desc | html %]'[% END %]">Search results</a>
                         [% END %]
                     </li>
                 [% ELSE %]
-                    <li class="breadcrumb-item active" aria-current="page">
-                        <a href="#">You did not specify any search criteria</a>
+                    <li class="breadcrumb-item active">
+                        <a href="#" aria-current="page">You did not specify any search criteria</a>
                     </li>
                 [% END %]
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         [% UNLESS ( total ) %]
             <div class="container-fluid">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-routing-lists.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-routing-lists.tt
index 31524110b7..c8ab3f50cc 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-routing-lists.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-routing-lists.tt
@@ -14,19 +14,19 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-routing-lists.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                <a href="#">Your routing lists</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Your routing lists</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt
index d4e871f120..edb5969d94 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt
@@ -11,8 +11,8 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
@@ -20,16 +20,16 @@
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
                 </li>
-                <li class="breadcrumb-item">
-                    <a href="#">Your search history</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Your search history</a>
                 </li>
             [% ELSE %]
-                <li class="breadcrumb-item">
-                    <a href="#">Search history</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Search history</a>
                 </li>
             [% END %]
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-serial-issues.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-serial-issues.tt
index ce1f35bd82..f969881b03 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-serial-issues.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-serial-issues.tt
@@ -15,19 +15,19 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | uri %]">Details for [% bibliotitle | html %]</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">Issues for a subscription</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Issues for a subscription</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shareshelf.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shareshelf.tt
index 494df98137..34d522d4be 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shareshelf.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shareshelf.tt
@@ -8,8 +8,8 @@
 [% INCLUDE 'bodytag.inc' bodyid='opac-shareshelf' bodyclass='scrollto' %]
 [% INCLUDE 'masthead.inc' %]
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
@@ -21,11 +21,11 @@
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-shelves.pl">Lists</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                Share a list
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Share a list</a>
             </li>
-        </ul> <!-- / .breadcrumb -->
-    </nav>
+        </ol> <!-- / .breadcrumb -->
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
index e1191095d7..c3505ddb5e 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-shelves.tt
@@ -58,8 +58,8 @@
 
 [% INCLUDE 'masthead.inc' %]
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
@@ -74,8 +74,8 @@
                     <a href="/cgi-bin/koha/opac-shelves.pl">Lists</a>
                 </li>
             [% ELSE %]
-                <li class="breadcrumb-item" aria-current="page">
-                    Lists
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Lists</a>
                 </li>
             [% END %]
 
@@ -85,8 +85,8 @@
                         <a href="/cgi-bin/koha/opac-shelves.pl?op=list&amp;category=[% PRIVATE | uri %]">Your lists</a>
                     </li>
                 [% ELSE %]
-                    <li class="breadcrumb-item" aria-current="page">
-                        Your lists
+                    <li class="breadcrumb-item active">
+                        <a href="#" aria-current="page">Your lists</a>
                     </li>
                 [% END %]
             [% ELSIF shelf AND shelf.is_public %]
@@ -95,31 +95,31 @@
                         <a href="/cgi-bin/koha/opac-shelves.pl?op=list&amp;category=[% PUBLIC | uri %]">Public lists</a>
                     </li>
                 [% ELSE %]
-                    <li class="breadcrumb-item" aria-current="page">
-                        Public lists
+                    <li class="breadcrumb-item active">
+                        <a href="#" aria-current="page">Public lists</a>
                     </li>
                 [% END %]
             [% END %]
 
             [% IF op == 'view' %]
-                <li class="breadcrumb-item" aria-current="page">
-                    Contents of &nbsp;<em>[% shelf.shelfname | html %]</em>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Contents of &nbsp;<em>[% shelf.shelfname | html %]</em></a>
                 </li>
             [% END %]
 
             [% IF op == 'add_form' %]
-                <li class="breadcrumb-item" aria-current="page">
-                    Create new list
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Create new list</a>
                 </li>
             [% END %]
 
             [% IF op == 'edit_form' %]
-                <li class="breadcrumb-item" aria-current="page">
-                    Edit list &nbsp;<em>[% shelf.shelfname | html %]</em>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Edit list &nbsp;<em>[% shelf.shelfname | html %]</em></a>
                 </li>
             [% END %]
-        </ul> <!-- / .breadcrumb -->
-    </nav>
+        </ol> <!-- / .breadcrumb -->
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-showreviews.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-showreviews.tt
index 4ce6b3093a..36501ed048 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-showreviews.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-showreviews.tt
@@ -11,16 +11,16 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">Recent comments</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Recent comments</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt
index 485154bf5c..c17f9536bb 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-suggestions.tt
@@ -17,19 +17,19 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
                 </li>
-                <li class="breadcrumb-item" aria-current="page">
-                    <a href="#">Your purchase suggestions</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Your purchase suggestions</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags.tt
index 921743f631..fd10b93125 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags.tt
@@ -28,8 +28,8 @@
 [% INCLUDE 'masthead.inc' %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
@@ -38,11 +38,11 @@
                     <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
                 </li>
             [% END %]
-            <li class="breadcrumb-item" aria-current="page">
-                <a href="#">Tags</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Tags</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags_subject.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags_subject.tt
index 37aba8e336..9e879d0a58 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags_subject.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-tags_subject.tt
@@ -8,16 +8,16 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">Subject cloud</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Subject cloud</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-topissues.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-topissues.tt
index cffc3205ff..aedc01134d 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-topissues.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-topissues.tt
@@ -38,16 +38,16 @@
 [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <nav aria-label="breadcrumb">
-            <ul class="breadcrumb">
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="/cgi-bin/koha/opac-main.pl">Home</a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">
-                    <a href="#">Most popular titles</a>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Most popular titles</a>
                 </li>
-            </ul>
-        </nav>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
index 7c92ba2f9e..e78a788651 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
@@ -26,19 +26,19 @@
 [% END %]
 
 <div class="main">
-    <nav aria-label="breadcrumb">
-        <ul class="breadcrumb">
+    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+        <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
             </li>
             <li class="breadcrumb-item">
                 <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
-                <a href="#">Your summary</a>
+            <li class="breadcrumb-item active">
+                <a href="#" aria-current="page">Your summary</a>
             </li>
-        </ul>
-    </nav>
+        </ol>
+    </nav> <!-- /#breadcrumbs -->
 
     <div class="container-fluid">
         <div class="row">
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/svc/suggestion.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/svc/suggestion.tt
index 19cd5cd963..51a2f6ed08 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/svc/suggestion.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/svc/suggestion.tt
@@ -9,10 +9,16 @@
     [% INCLUDE 'masthead.inc' %]
 
     <div class="main">
-        <ul class="breadcrumb">
-            <li><a href="/cgi-bin/koha/opac-main.pl">Home</a></li>
-            <li><a href="#">Search suggestions</a></li>
-        </ul>
+        <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="/cgi-bin/koha/opac-main.pl">Home</a>
+                </li>
+                <li class="breadcrumb-item active">
+                    <a href="#" aria-current="page">Search suggestions</a>
+                </li>
+            </ol>
+        </nav> <!-- /#breadcrumbs -->
 
         <div class="container-fluid">
             <div class="row">
-- 
2.20.1