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

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

@@ -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>

21
templates/page.tpl.html
View File

@@ -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/">