From d6a09c5a5f7eba0bc05f8eb1b3813f049c2ff9f3 Mon Sep 17 00:00:00 2001
From: kate deibel <kndeibel@metageekery.org>
Date: Wed, 14 Jan 2026 16:28:13 -0500
Subject: [PATCH] Multiple accessibility fixes: - Add landmarks of main and
 header to all layouts - Adjust skip links to work with new landmarks -
 Improve color contrast on a few elements git commit -am

---
 _includes/header.html         |  2 +-
 _includes/nav.html            |  6 +++---
 _layouts/color-test.html      | 11 +++++++----
 _layouts/day-menu.html        |  8 ++++++--
 _layouts/day-schedule.html    |  9 ++++++---
 _layouts/default.html         | 11 +++++++----
 _layouts/presentation.html    |  9 ++++++---
 _layouts/secondary-nav.html   | 15 ++++++++++-----
 assets/_scss/_a11y-fixes.scss | 27 +++++++++++++++++++++++++++
 assets/css/main.scss          |  3 ++-
 conduct/index.html            |  2 +-
 general-info/attend.html      |  4 ++--
 12 files changed, 78 insertions(+), 29 deletions(-)
 create mode 100644 assets/_scss/_a11y-fixes.scss

diff --git a/_includes/header.html b/_includes/header.html
index a4e13d3..6456774 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -19,4 +19,4 @@
 <!--[if lt IE 8]>
 <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
 <![endif]-->
-{% include nav.html %}
+
diff --git a/_includes/nav.html b/_includes/nav.html
index bf91f42..79cbc25 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,9 +1,9 @@
-<a href="#main" class="sr-only sr-only-focusable">Skip to main content</a>
-<nav class="navbar navbar-expand-md navbar-dark" role="navigation">
+<nav class="navbar navbar-expand-md navbar-dark" role="navigation" aria-labelledby="mainnav-heading">
+	<h2 class="sr-only" id="mainnav-heading">Site</h2>
   <!-- <div class="container-fluid"> -->
     <!-- Brand and toggle get grouped for better mobile display -->
     <!-- <div class="navbar-header"> -->
-      <a class="navbar-brand" aria-label="Code4Lib Home" href="{{ site.baseurl }}/"><img src="{{ "/assets/img/theme-images/c4l-logo.svg" | relative_url }}" alt="Code4Lib"></a>
+      <a class="navbar-brand" aria-label="Code4Lib {{ site.data.conf.year }}" href="{{ site.baseurl }}/"><img src="{{ "/assets/img/theme-images/c4l-logo.svg" | relative_url }}" alt="Code4Lib"></a>
       <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="mainNavBar" aria-expanded="false" aria-label="Toggle navigation"> -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavBar" aria-controls="mainNavBar" aria-expanded="false" aria-label="Toggle navigation">
         <span class="sr-only">Toggle navigation</span>
diff --git a/_layouts/color-test.html b/_layouts/color-test.html
index f41953d..e1a5ba5 100644
--- a/_layouts/color-test.html
+++ b/_layouts/color-test.html
@@ -1,8 +1,11 @@
 {% include header.html %}
-{% include search_results.html %}
+<header role="banner">
+  <a href="#main" class="sr-only sr-only-focusable">Skip site navigation</a>
+  {% include nav.html %}
+</header>
 
-<div class="CT-body" id="main">
-{{ content }}
-</div>
+<main class="CT-body" id="main">
+  {{ content }}
+</main>
 
 {% include footer.html %}
diff --git a/_layouts/day-menu.html b/_layouts/day-menu.html
index 50495c2..26393ea 100644
--- a/_layouts/day-menu.html
+++ b/_layouts/day-menu.html
@@ -1,8 +1,11 @@
 {% include header.html %}
-{% include search_results.html %}
+<header role="banner">
+  <a href="#main" class="sr-only sr-only-focusable">Skip site navigation</a>
+  {% include nav.html %}
+</header>
 
 {% assign menu = site.data[page.menu] %}
-<div id="main">{% comment %} #main element needed for skip-menu link but we can't add it inside the loop {% endcomment %}</div>
+<main id="main">
 {% for meal in menu %}
 <section>
     <div class="container">
@@ -21,5 +24,6 @@ <h1>{{ page.title }}</h1>
     </div>
 </section>
 {% endfor %}
+</main>
 
 {% include footer.html %}
diff --git a/_layouts/day-schedule.html b/_layouts/day-schedule.html
index fc5b11f..0542b70 100644
--- a/_layouts/day-schedule.html
+++ b/_layouts/day-schedule.html
@@ -1,7 +1,10 @@
 {% include header.html %}
-{% include search_results.html %}
+<header role="banner">
+  <a href="#main" class="sr-only sr-only-focusable">Skip site navigation</a>
+  {% include nav.html %}
+</header>
 
-<div class="container" id="main">
+<main class="container" id="main">
     <div class="row">
         <div class="col-12">
             <h1>{% assign day = page.day | slice: -1 %}
@@ -24,6 +27,6 @@ <h1>{% assign day = page.day | slice: -1 %}
             {% endif %}
         </div>
     </div>
-</div>
+</main>
 
 {% include footer.html %}
diff --git a/_layouts/default.html b/_layouts/default.html
index 27e044e..2802bf3 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,6 +1,9 @@
 {% include header.html %}
-{% include search_results.html %}
-<div id="main" class="content">
-{{ content }}
-</div>
+<header role="banner">
+  <a href="#main" class="sr-only sr-only-focusable">Skip to main content</a>
+  {% include nav.html %}
+</header>
+<main id="main" class="content">
+  {{ content }}
+</main>
 {% include footer.html %}
diff --git a/_layouts/presentation.html b/_layouts/presentation.html
index 8f02d0e..82b2d39 100644
--- a/_layouts/presentation.html
+++ b/_layouts/presentation.html
@@ -1,5 +1,8 @@
 {% include header.html %}
-{% include search_results.html %}
+<header role="banner">
+  <a href="#main" class="sr-only sr-only-focusable">Skip site navigation</a>
+  {% include nav.html %}
+</header>
 
 {% if page.type == 'workshop' %}
     {% assign page_date = page.date %}
@@ -17,7 +20,7 @@
 {% endif %}
 
 <script src="{{ "/assets/js/placeholder.js" | relative_url }}"></script>
-<div class="container presentation" id="main">
+<main class="container presentation" id="main">
     <div class="row">
         <div class="col-12 col-sm-8 col-md-9">
 
@@ -204,6 +207,6 @@ <h2>Location</h2>
             {% endif %}
         </div>
     </div>
-</div>
+</main>
 
 {% include footer.html %}
diff --git a/_layouts/secondary-nav.html b/_layouts/secondary-nav.html
index 512175c..ec64894 100644
--- a/_layouts/secondary-nav.html
+++ b/_layouts/secondary-nav.html
@@ -1,10 +1,15 @@
 {% include header.html %}
+<header role="banner">
+  <a href="#subnav" class="sr-only sr-only-focusable">Skip site navigation</a>
+  {% include nav.html %}
+</header>
 
-<section>
     <div class="container-fluid">
         <div class="row">
             <div class="col-12 col-md-3 col-lg-2">
-                <nav>
+                <nav id="subnav" aria-labelledby="subnav-heading">
+                    <h2 class="sr-only" id="subnav-heading">{{ page.title }} Sub-Pages</h2>
+										<a href="#main" class="sr-only sr-only-focusable">Skip to main content</a>
                     {% if page.nav == 'general-info' %}
                         <ul class="nav nav-pills nav-stacked secondarynav flex-md-column">
                     {% else %}
@@ -33,12 +38,12 @@
                     </ul>
                 </nav>
             </div>
-            <div id="main" class="col-12 col-md-9 col-lg-10">
+            <main id="main" class="col-12 col-md-9 col-lg-10">
                 {{ content }}
-            </div>
+            </main>
         </div>
     </div>
-</section>
+
 
 {% include footer.html %}
 
diff --git a/assets/_scss/_a11y-fixes.scss b/assets/_scss/_a11y-fixes.scss
new file mode 100644
index 0000000..c14e37c
--- /dev/null
+++ b/assets/_scss/_a11y-fixes.scss
@@ -0,0 +1,27 @@
+
+/* make navigation toggle button meet contrast (turn off transparency) */
+.navbar-dark .navbar-toggler {
+  color: rgba(255, 255, 255, 1);
+  border-color: rgba(255, 255, 255, 1);
+}
+
+.navbar-dark .navbar-toggler:focus {
+  outline-offset: -4px;
+  outline-style: solid;
+}
+
+.navbar-dark .navbar-toggler-icon { 
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+/* more visibly distinct skip links */
+a.sr-only.sr-only-focusable:focus {
+  position: absolute;
+  z-index: 10;
+  top: 8px;
+  left: 8px;
+  background: $accent;
+  padding: 8px;
+  border: solid 2px currentColor;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/assets/css/main.scss b/assets/css/main.scss
index f09a9b4..e4d6374 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -27,4 +27,5 @@
 @import 'sponsors';
 @import 'color-test';
 @import 'forms-pages';
-@import 'lanyards';
\ No newline at end of file
+@import 'lanyards';
+@import 'a11y-fixes';
diff --git a/conduct/index.html b/conduct/index.html
index 69fa7cc..a05faf1 100644
--- a/conduct/index.html
+++ b/conduct/index.html
@@ -1,6 +1,6 @@
 ---
 layout: secondary-nav
-title: Conduct
+title: Conduct & Safety
 nav: conduct
 active: 'Conduct & Safety'
 ---
diff --git a/general-info/attend.html b/general-info/attend.html
index 15a0274..744deee 100644
--- a/general-info/attend.html
+++ b/general-info/attend.html
@@ -46,7 +46,7 @@ <h3>Workshops</h3>
         {% if site.data.registration.conference.show %}
         <div class="row">
             <div class="col-12">
-                <h3>Registration Fees</h3>
+                <h2>Registration Fees</h2>
 
                 <ul>
                     <li><span class="font-weight-bold">Main Conference</span>: {{ site.data.registration.conference.cost }}</li>
@@ -130,7 +130,7 @@ <h3>Registration Fees</h3>
 
         <div class="row">
             <div class="col-12">
-                <h3>Additional Information</h3>
+                <h2>Additional Information</h2>
                 <ol>
                     {% if site.data.registration.childcare.show %}
                     <li>