From 829bdb770832ce59d15a7884ae93ab2e58162f8f Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Thu, 17 Jul 2025 16:58:29 -0400
Subject: [PATCH] Initial accessibility tweaks based on ARC Tookit

Ran the ARC Tookit Firefox extension which pointed out
accessiblity issues with color contrasts, link display, and
skip to main link.  Some of the link colors don't look great
when they reach the recommended contrast level.
---
 public_html/css/hpr.css          | 10 ++++++----
 templates/content-index.tpl.html | 14 +++++++-------
 templates/page.tpl.html          | 21 ++++++++++++---------
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index e6faa5c..897aac4 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -26,10 +26,10 @@ https://creativecommons.org/publicdomain/
 	--banner-text-primary: #000000;
 	--background-secondary: #4d4d4d;
 	--text-secondary: #dfdfdf;
-	--link-primary: #247ba0;
+	--link-primary: #004852 /*#154a60*/;
 	--link-primary-hover: #f8961e;
-	--link-secondary: #7fc5e2;
-	--link-secondary-hover: #f9c74f;
+	--link-secondary: #a8f8ff;
+	--link-secondary-hover: #f9e9c2;
 	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
 
   /* screen breakpoints */
@@ -117,7 +117,9 @@ body > footer hr:first-child {
 body > footer a {
 	color: var(--link-secondary);
 }
-
+body > footer a:hover {
+	color: var(--link-secondary-hover);
+}
 div,
 h1,
 h2,
diff --git a/templates/content-index.tpl.html b/templates/content-index.tpl.html
index a85e2d6..599a537 100644
--- a/templates/content-index.tpl.html
+++ b/templates/content-index.tpl.html
@@ -46,19 +46,19 @@
 	  <header>Podcast</header>
 	  <div class="lane">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html#recording_a_podcast">
-		  <img src="<!--% absolute_path(baseurl) %-->" alt="Microphone icon">
+		  <img src="<!--% absolute_path(baseurl) %-->" alt="">
 		  Record
 	  </a>
 	  <a class="lane-button" href="https://hub.hackerpublicradio.org/calendar.php">
-		  <img src="" alt="Calendar icon">
+		  <img src="" alt="">
 		  Schedule
 	  </a>
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->syndication.html">
-		  <img src="<!--% absolute_path(baseurl) %-->" alt="RSS icon">
+		  <img src="<!--% absolute_path(baseurl) %-->" alt="">
 		 Subscribe 
 	  </a>
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->eps/index.html">
-		  <img src="" alt="Speaker icon">
+		  <img src="" alt="">
 		 Listen 
 	  </a>
 	</div>
@@ -67,15 +67,15 @@
 	  <header>Project</header>
 	  <div class="lane">
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->correspondents/index.html">
-		  <img src="<!--% absolute_path(baseurl) %-->" alt="Person icon">
+		  <img src="<!--% absolute_path(baseurl) %-->" alt="">
 		 Host 
 	  </a>
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->series/index.html">
-		  <img src="" alt="Stack of Books icon">
+		  <img src="" alt="">
 		 Series 
 	  </a>
 	  <a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html">
-		  <img src="<!--% absolute_path(baseurl) %-->" alt="Question Mark icon">
+		  <img src="<!--% absolute_path(baseurl) %-->" alt="">
 		 About 
 	  </a>
 	</div>
diff --git a/templates/page.tpl.html b/templates/page.tpl.html
index 428affb..aed81ec 100644
--- a/templates/page.tpl.html
+++ b/templates/page.tpl.html
@@ -12,7 +12,6 @@
   <meta http-equiv="last-modified" content="<!--% format_feed_date(date.now) %-->">
   <meta name="keywords" content="Technology, Tech News, Education, Training" />
   <meta name="description" content="Hacker Public Radio is a podcast that releases shows every weekday Monday through Friday. Our shows are produced by the community (you) and can be on any topic that is of interest to hackers and hobbyists." />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Internal CSS -->
   <style type="text/css">
   article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
@@ -33,17 +32,21 @@
   <link rel="stylesheet" href="/css/hpr.css" media="screen" type="text/css" />
   <script src="/JavaScript/html5.js"></script>
   <![endif]-->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=yes"/> 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/> 
 </head>
 
 <body>
+<nav id="accessible_menu">
+   <a href="<!--% absolute_path(baseurl) %-->sitemap.html#main_content">Site Map</a>
+   - <a href="<!--% absolute_path(baseurl) %-->#main_content">skip to main content</a>
+</nav>
 <nav class="menu" role="navigation">
 <!--% INCLUDE $navigation %-->
 </nav>
-<header>
+<header role="banner">
   <div id="title">
-	  <h1>HPR</h1>
-      <h2 id="sitename">
+	  <h1 id="site_acronym">HPR</h1>
+      <h2 id="site_name">
         <a href="<!--% absolute_path(baseurl) %-->correspondents/index.html">H</a>acker
         <a href="<!--% absolute_path(baseurl) %-->comments_viewer.html">P</a>ublic
         <a href="<!--% absolute_path(baseurl) %-->syndication.html">R</a>adio
@@ -51,20 +54,20 @@
 	  <h3 id="site_url">https://HackerPublicRadio.org</h3>
   </div>
   <div id="tag_line">
-    <h1>The Community Podcast</h1>
+    <h2>The Community Podcast</h2>
 	<h2>Sharing your ideas, projects, opinions since 2005</h2>
     <h3>New episodes every weekday
   </div>
     </h3>
   </div>
   <div id="qr_code">
-	  <img src="<!--% absolute_path(baseurl) %-->images/qr_code_logo.png" alt="QR code of HPR URL">
+	  <img src="<!--% absolute_path(baseurl) %-->images/qr_code_logo.png" alt="HPR logo as a QR code to the HPR URL">
   </div>
 </header>
-<main>
+<main id="main_content" role="main">
 <!--% INCLUDE $content %-->
 </main>
-<footer>
+<footer role="contentinfo">
   <hr>
   <div id="copyright">
 	  <span>Unless otherwise stated, our shows are released under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">