From: Kevin Day <thekevinday@gmail.com>
Date: Thu, 8 Sep 2022 02:27:58 +0000 (-0500)
Subject: Update: Improve accessibility in the "Continue reading..." and fix a mistake in a... 
X-Git-Url: https://git.kevux.org/?a=commitdiff_plain;h=b2bb73eb0445750b6c06829147ed455d9087ffe7;p=kevux.org-website

Update: Improve accessibility in the "Continue reading..." and fix a mistake in a label.

The continue reading must remain as-is for proper use.
The accessibility tools do not understand article and document structure as well as they should.
Provide hints as per Aria and WCAG standards to help with this.

To get this working I've had to add unwanted id attributes, which clobers up the id list.
This makes things a bit less accessible for other uses due to the invalid or non-meaningful id associations added to make the aria-labelledby work.

The labeled by situation is a good reminder that I need to publish an article about my Context Markup Language (CML) so that I can provide a better language.
This situation is just an example of bad design by the accessibility developers and WCAG.
At least this shows progress on their end.

I noticed and fixed an incorrect id attribute.

see: https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8
see: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby
---

diff --git a/news.html b/news.html
index 9f911e2..a3e524d 100644
--- a/news.html
+++ b/news.html
@@ -99,7 +99,7 @@
 
           <article id="2022_07_31-fll_0_6_0_release" class="article">
             <header class="article-header header">
-              <h2 class="article-title h h2">2022 / 07 / 31 - FLL 0.6.0 Release</h2>
+              <h2 id="2022_07_31-fll_0_6_0_release-title" class="article-title h h2">2022 / 07 / 31 - FLL 0.6.0 Release</h2>
             </header>
 
             <div class="article-content">
@@ -127,14 +127,14 @@
                 Check out the project on the <a href="fll.html#release" class="link"><abbr title="Featureless Linux Library">FLL</abbr> release</a> page.
               </p>
               <p class="p">
-                <a href="news/2022_07_31-fll_0_6_0_release.html" class="content link">Continue reading…</a>
+                <a id="2022_07_31-fll_0_6_0_release-more" href="news/2022_07_31-fll_0_6_0_release.html" class="content link" aria-labelledby="2022_07_31-fll_0_6_0_release-more 2022_07_31-fll_0_6_0_release-title">Continue reading…</a>
               </p>
             </div>
           </article>
 
-          <article id="2022_06_04-librem_to_freedom" class="article">
+          <article id="2022_07_02-fll_0_5_10_release" class="article">
             <header class="article-header header separate">
-              <h2 class="article-title h h2">2022 / 07 / 02 - FLL 0.5.10 Release</h2>
+              <h2 id="2022_07_02-fll_0_5_10_release-title" class="article-title h h2">2022 / 07 / 02 - FLL 0.5.10 Release</h2>
             </header>
 
             <div class="article-content">
@@ -161,14 +161,14 @@
                 Check out the project on the <a href="fll.html#release" class="link"><abbr title="Featureless Linux Library">FLL</abbr> release</a> page.
               </p>
               <p class="p">
-                <a href="news/2022_07_02-fll_0_5_10_release.html" class="content link">Continue reading…</a>
+                <a id="2022_07_02-fll_0_5_10_release-more" href="news/2022_07_02-fll_0_5_10_release.html" class="content link" aria-labelledby="2022_07_02-fll_0_5_10_release-more 2022_07_02-fll_0_5_10_release-title">Continue reading…</a>
               </p>
             </div>
           </article>
 
           <article id="2022_06_04-librem_to_freedom" class="article">
             <header class="article-header header separate">
-              <h2 class="article-title h h2">2022 / 06 / 04 - Librem to Freedom</h2>
+              <h2 id="2022_06_04-librem_to_freedom-title" class="article-title h h2">2022 / 06 / 04 - Librem to Freedom</h2>
             </header>
 
             <div class="article-content">
@@ -186,14 +186,14 @@
                 I finally have my <strong>Librem5</strong>. I have had to quite painfully, if not patiently, wait for my phone to actually be shipped years late (due to global economic situations). This is my review after having used the phone with respect to the other open-source phones I have used, namely the <strong>Pinephone</strong> from <a href="https://www.pine64.org/" class="link external">Pine64</a>. I have discovered good things, bad things, horrible things, and great things about this phone.
               </p>
               <p class="p">
-                <a href="news/2022_06_04-librem_to_freedom.html" class="content link">Continue reading…</a>
+                <a id="2022_06_04-librem_to_freedom-more" href="news/2022_06_04-librem_to_freedom.html" class="content link" aria-labelledby="2022_06_04-librem_to_freedom-more 2022_06_04-librem_to_freedom-title">Continue reading…</a>
               </p>
             </div>
           </article>
 
           <article id="2022_05_16-fll_specifications_added" class="article">
             <header class="article-header header separate">
-              <h2 class="article-title h h2">2022 / 06 / 04 - Librem to Freedom</h2>
+              <h2 id="2022_05_16-fll_specifications_added-title" class="article-title h h2">2022 / 06 / 04 - Librem to Freedom</h2>
             </header>
 
             <div class="article-content">
@@ -204,14 +204,14 @@
                 Basic styling is applied to make the specifications reasonably readable on a website. I avoided doing any complicated designs so that I can focus on other tasks (such as making a stable release). I took a shortcut on the example results by using the <code class="code">&lt;pre&gt;</code> tag.
               </p>
               <p class="p">
-                <a href="news/2022_05_16-fll_specifications_added.html" class="content link">Continue reading…</a>
+                <a id="2022_05_16-fll_specifications_added-more" href="news/2022_05_16-fll_specifications_added.html" class="content link" aria-labelledby="2022_05_16-fll_specifications_added-more 2022_05_16-fll_specifications_added-title">Continue reading…</a>
               </p>
             </div>
           </article>
 
           <article class="article" id="2022_05_06-basic_program_documentation">
             <header class="article-header header separate">
-              <h2 class="article-title h h2">2022 / 05 / 06 - Basic Program Documentation</h2>
+              <h2 id="2022_05_06-basic_program_documentation-title" class="article-title h h2">2022 / 05 / 06 - Basic Program Documentation</h2>
             </header>
 
             <div class="article-content">
@@ -222,14 +222,14 @@
                 While working on the documentation, I discovered and fixed random problems. In particular, the <strong>iki_read</strong> program in the release candidate has a major regression where it doesn't do anything. This is the result of a very minor mistake in passing the wrong size variable to the file read functions. Essentially, the <strong>iki_read</strong> program is only processing files of length 0 and as a result never produces any output. This is now fixed upstream and I am even happier with the practice of using release candidates.
               </p>
               <p class="p">
-                <a href="news/2022_05_06-basic_program_documentation.html" class="content link">Continue reading…</a>
+                <a id="2022_05_06-basic_program_documentation-more" href="news/2022_05_06-basic_program_documentation.html" class="content link" aria-labelledby="2022_05_06-basic_program_documentation-more 2022_05_06-basic_program_documentation-title">Continue reading…</a>
               </p>
             </div>
           </article>
 
           <article id="2022_05_01-website_redesign" class="article">
             <header class="article-header header separate">
-              <h2 class="article-title h h2">2022 / 05 / 01 - Website Redesign</h2>
+              <h2 id="2022_05_01-website_redesign-title" class="article-title h h2">2022 / 05 / 01 - Website Redesign</h2>
             </header>
 
             <div class="article-content">
@@ -240,7 +240,7 @@
                The available functionality in the HTML standard has changed a decent amount since this website was last updated. This new design focuses on a very primitive look and feel utilizing a lot of the built in visual tools available to the <abbr title="Hyper Text Markup Language version 5">HTML5</abbr> and <abbr title="Cascading Style Sheets version 3">CSS3</abbr> languages. The website is being built in stages, to allow for prioritizing getting information out over getting information looking great. This website even actively uses <abbr title="Unicode Transformation Format 8-bit">UTF-8</abbr>.
               </p>
               <p class="p">
-                <a href="news/2022_05_01-website_redesign.html" class="content link">Continue reading…</a>
+                <a id="2022_05_01-website_redesign-more" href="news/2022_05_01-website_redesign.html" class="content link" aria-labelledby="2022_05_01-website_redesign-more 2022_05_01-website_redesign-title">Continue reading…</a>
               </p>
             </div>
           </article>