further accessibility fixes for home page

Signed-off-by: Grace Grimwood <[email protected]>

Author: gracegrimwood

_includes/footer.html

@@ -1,4 +1,4 @@
-<footer class="pt-4 pt-md-5 pb-0 mt-md-auto mt-5 bg-body-tertiary">
+<footer class="pt-4 pt-md-5 pb-0 mt-md-auto mt-5 bg-body-tertiary" role="contentinfo" aria-label="Site navigation, contact, and copyright information">
     <div class="container py-3 py-md-5 px-4 px-md-3 text-body-secondary">
         <div class="row krx-footer-links justify-content-between">
             <div class="col-lg-4 mb-3">

_includes/nav.html

@@ -8,7 +8,7 @@
     <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
       <i class="bi bi-three-dots" aria-hidden="true"></i>
     </button>
-    <div class="offcanvas-lg offcanvas-end flex-grow-1" id="navbarContent" aria-labelledby="navbarContentOffcanvasLabel">
+    <div class="offcanvas-lg offcanvas-end flex-grow-1" id="navbarContent">
       <div class="offcanvas-header px-4 pb-0">
         <a class="navbar-brand p-0 me-0 me-lg-2" href="{{ '/' | absolute_url }}" aria-label="Kroxylicious">
           <img src="{{ '/assets/theme/images//kroxylicious_logo_rgb_hori_reverse_bright.svg' | absolute_url }}"

_layouts/docs.html

@@ -6,9 +6,9 @@
   <div class="col-lg-3">
     <div class="card shadow my-lg-5 ms-lg-5 me-1">
       <div class="card-body mx-2">
-          <h3 class="card-title">
+          <h1 class="card-title fs-3">
             {{ page.title }}
-          </h3>
+          </h1>
         <div class="card-text g-0">
           <p><em>This documentation is for a stable release version of Kroxylicious. For the documentation from the latest development version of Kroxylicious, <a href="{{ '/kroxylicious' | relative_url }}">click here</a>.</small></em></p>
           {{ page.document | tocify_asciidoc }}

_layouts/index.html

@@ -4,14 +4,14 @@
 
 <!-- Hero -->
 
-<div class="krx-hero">
+<div class="krx-hero" role="complementary" aria-labelledby="krx-hero-title">
     <div class="container col-xxl-8 px-4 py-5">
     <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
       <div class="col-10 col-sm-8 col-lg-6">
         <img src="{{ '/assets/theme/images/kroxylicious_logo_rgb_no_text.svg' | absolute_url}}" class="d-block mx-lg-auto img-fluid" alt="Kroxylicious Mascot" width="700" height="500" loading="lazy">
       </div>
       <div class="col-lg-6">
-        <h1 class="fw-bold text-body-emphasis lh-1 mb-3">Kroxylicious, the snappy open source proxy for Apache Kafka<sup>&#174;</sup></h1>
+        <h1 class="fw-bold text-body-emphasis lh-1 mb-3" id="krx-hero-title">Kroxylicious, the snappy open source proxy for Apache Kafka<sup>&#174;</sup></h1>
         <p class="lead">Topic encryption, policy-enforcement, multi-tenancy, audit and much more.</p>
         <div class="d-grid gap-2 d-md-flex justify-content-md-start">
           <a href="{{site.baseurl}}/overview/" alt="What Kroxylicious is and how does it work?" type="button" class="btn btn-light btn-lg px-4 gap-3">What is it?</a>
@@ -24,7 +24,7 @@ <h1 class="fw-bold text-body-emphasis lh-1 mb-3">Kroxylicious, the snappy open s
 
 <!-- Hero -->
 
-<div class="row justify-content-center">
+<div class="row justify-content-center" role="main">
   <div class="col-11 col-lg-8 gx-5 gy-5 m-lg-5">
     <div class="row g-0">
       <div class="col-auto">