HPR/hpr_generator
8
0
Fork 4
Code Issues 31 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Initial accessibility tweaks based on ARC Tookit

Browse Source 
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.
This commit is contained in:
Roan Horning
2025-07-17 16:58:29 -04:00
parent 91000b7c6f
commit 829bdb7708
3 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public_html/css/hpr.css
View File

@@ -26,10 +26,10 @@ https://creativecommons.org/publicdomain/
--banner-text-primary: #000000; --banner-text-primary: #000000;
--background-secondary: #4d4d4d; --background-secondary: #4d4d4d;
--text-secondary: #dfdfdf; --text-secondary: #dfdfdf;
--link-primary: #247ba0; --link-primary: #004852 /*#154a60*/;
--link-primary-hover: #f8961e; --link-primary-hover: #f8961e;
--link-secondary: #7fc5e2; --link-secondary: #a8f8ff;
--link-secondary-hover: #f9c74f; --link-secondary-hover: #f9e9c2;
--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */; --font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
/* screen breakpoints */ /* screen breakpoints */
@@ -117,7 +117,9 @@ body > footer hr:first-child {
body > footer a { body > footer a {
color: var(--link-secondary); color: var(--link-secondary);
} }
body > footer a:hover {
color: var(--link-secondary-hover);
}
div, div,
h1, h1,
h2, h2,

14
templates/content-index.tpl.html
View File

@@ -46,19 +46,19 @@
<header>Podcast</header> <header>Podcast</header>
<div class="lane"> <div class="lane">
<a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html#recording_a_podcast"> <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 Record
</a> </a>
<a class="lane-button" href="https://hub.hackerpublicradio.org/calendar.php"> <a class="lane-button" href="https://hub.hackerpublicradio.org/calendar.php">
<img src="" alt="Calendar icon"> <img src="" alt="">
Schedule Schedule
</a> </a>
<a class="lane-button" href="<!--% absolute_path(baseurl) %-->syndication.html"> <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 Subscribe
</a> </a>
<a class="lane-button" href="<!--% absolute_path(baseurl) %-->eps/index.html"> <a class="lane-button" href="<!--% absolute_path(baseurl) %-->eps/index.html">
<img src="" alt="Speaker icon"> <img src="" alt="">
Listen Listen
</a> </a>
</div> </div>
@@ -67,15 +67,15 @@
<header>Project</header> <header>Project</header>
<div class="lane"> <div class="lane">
<a class="lane-button" href="<!--% absolute_path(baseurl) %-->correspondents/index.html"> <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 Host
</a> </a>
<a class="lane-button" href="<!--% absolute_path(baseurl) %-->series/index.html"> <a class="lane-button" href="<!--% absolute_path(baseurl) %-->series/index.html">
<img src="" alt="Stack of Books icon"> <img src="" alt="">
Series Series
</a> </a>
<a class="lane-button" href="<!--% absolute_path(baseurl) %-->about.html"> <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 About
</a> </a>
</div> </div>

21
templates/page.tpl.html
View File

@@ -12,7 +12,6 @@
<meta http-equiv="last-modified" content="<!--% format_feed_date(date.now) %-->"> <meta http-equiv="last-modified" content="<!--% format_feed_date(date.now) %-->">
<meta name="keywords" content="Technology, Tech News, Education, Training" /> <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="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 --> <!-- Internal CSS -->
<style type="text/css"> <style type="text/css">
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { 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" /> <link rel="stylesheet" href="/css/hpr.css" media="screen" type="text/css" />
<script src="/JavaScript/html5.js"></script> <script src="/JavaScript/html5.js"></script>
<![endif]--> <![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> </head>
<body> <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"> <nav class="menu" role="navigation">
<!--% INCLUDE $navigation %--> <!--% INCLUDE $navigation %-->
</nav> </nav>
<header> <header role="banner">
<div id="title"> <div id="title">
<h1>HPR</h1> <h1 id="site_acronym">HPR</h1>
<h2 id="sitename"> <h2 id="site_name">
<a href="<!--% absolute_path(baseurl) %-->correspondents/index.html">H</a>acker <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) %-->comments_viewer.html">P</a>ublic
<a href="<!--% absolute_path(baseurl) %-->syndication.html">R</a>adio <a href="<!--% absolute_path(baseurl) %-->syndication.html">R</a>adio
@@ -51,20 +54,20 @@
<h3 id="site_url">https://HackerPublicRadio.org</h3> <h3 id="site_url">https://HackerPublicRadio.org</h3>
</div> </div>
<div id="tag_line"> <div id="tag_line">
<h1>The Community Podcast</h1> <h2>The Community Podcast</h2>
<h2>Sharing your ideas, projects, opinions since 2005</h2> <h2>Sharing your ideas, projects, opinions since 2005</h2>
<h3>New episodes every weekday <h3>New episodes every weekday
</div> </div>
</h3> </h3>
</div> </div>
<div id="qr_code"> <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> </div>
</header> </header>
<main> <main id="main_content" role="main">
<!--% INCLUDE $content %--> <!--% INCLUDE $content %-->
</main> </main>
<footer> <footer role="contentinfo">
<hr> <hr>
<div id="copyright"> <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/"> <span>Unless otherwise stated, our shows are released under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">