nnwhen/nnwhen.com
SHA256
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

JS Accessibility refinement

Browse source
This commit is contained in:
nnwhen 2025-03-17 14:11:08 +02:00
parent a4ddfd609d
commit 6cc0d1c1ad
4 changed files with 53 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
now.css
View file

@ -76,7 +76,9 @@ div.now {
}
.lyrics {
display: none;
width: 80%;
margin: 16px auto;
margin: 16px 20px;
}
.block-toggle {
display: none;
}

24
now.html
View file

@ -143,7 +143,7 @@
<h1>Hello!</h1>
<h2>Losing Momentum Happens</h2>
<h3>2025-03-13T15:00Z</h3>
<h4 class="postID"></h4>
<h4 style="display: none" aria-hidden="true" class="postID"></h4>
</hgroup>
<p>
While I didn't stop maintaining habits, I haven't posted here nearly
@ -173,7 +173,7 @@
<h1>Enjoy Art!!!</h1>
<h2>You shed pieces of joy whenever art is ignored</h2>
<h3>2025-03-07T21:00Z</h3>
<h4 class="postID"></h4>
<h4 style="display: none" aria-hidden="true" class="postID"></h4>
</hgroup>
<p>
My life has been undeniably improved the moment I decided all art is
@ -188,7 +188,7 @@
<h1>Huge Project Progress</h1>
<h2>Music Making Machine!</h2>
<h3>2025-03-06</h3>
<h4 class="postID"></h4>
<h4 style="display: none" aria-hidden="true" class="postID"></h4>
</hgroup>
<p>
I made some incredible progress on 3 tracks I've been working on for
@ -225,7 +225,7 @@
<h1>Consistency is Easy</h1>
<h2>Thinking About it Is When You Make Excuses</h2>
<h3>2025-03-05T20:00Z</h3>
<h4 class="postID"></h4>
<h4 style="display: none" aria-hidden="true" class="postID"></h4>
</hgroup>
<p>
Just doing the thing to maintain a habit is actually easy and simple,
@ -252,7 +252,7 @@
>) editing and maintanence
</h2>
<h3>2025-03-04</h3>
<h4 class="postID"></h4>
<h4 style="display: none" aria-hidden="true" class="postID"></h4>
</hgroup>
<p>
Had my first playthrough of
@ -281,7 +281,7 @@
<h1>'Chest'</h1>
<h2>A Preview</h2>
<h3>2025-02-28T10:30Z</h3>
<h4 class="postID"></h4>
<h4 style="display: none" aria-hidden="true" class="postID"></h4>
</hgroup>
<audio preload="none" controls="">
<source src="res/prvw-mus-2025-02-28-chest.ogg" type="audio/ogg" />
@ -289,6 +289,8 @@
</audio>
<button
type="button"
class="block-toggle"
aria-hidden="true"
onclick="blockToggle('chest-20250228T1030Z-000')"
>
Toggle Lyrics
@ -310,7 +312,7 @@
<h1>'Chest' Update</h1>
<h2>With new but <em>non-final</em> lyrics</h2>
<h3>2025-03-02T11:30Z</h3>
<h4 class="postID"></h4>
<h4 style="display: none" aria-hidden="true" class="postID"></h4>
</hgroup>
<audio preload="none" controls="">
<source
@ -324,6 +326,8 @@
</audio>
<button
type="button"
class="block-toggle"
aria-hidden="true"
onclick="blockToggle('chest-20250228T1030Z-001')"
>
Toggle Lyrics
@ -360,7 +364,7 @@
<h1>Persistence</h1>
<h2>Maintenance and Growth</h2>
<h3>2025-02-27T07:00Z</h3>
<h4 class="postID"></h4>
<h4 style="display: none" aria-hidden="true" class="postID"></h4>
</hgroup>
<p>Keeping the momentum. Feeling proud. Continue.</p>
</section>
@ -370,7 +374,7 @@
<h1>'Structure of Reality'</h1>
<h2>Maintenance and Growth</h2>
<h3>2025-02-25T13:30Z</h3>
<h4 class="postID"></h4>
<h4 style="display: none" aria-hidden="true" class="postID"></h4>
</hgroup>
<p>Who do I want to continue to be, who do I want to become. Devote.</p>
</section>
@ -380,7 +384,7 @@
<h1>Music and Code</h1>
<h2>Self-Referential Post - Woohoo!</h2>
<h3>2025-02-24T21:00Z</h3>
<h4 class="postID"></h4>
<h4 style="display: none" aria-hidden="true" class="postID"></h4>
</hgroup>
<p>
Making this page and Listening to

19
res/asset-js-audio.js
View file

@ -14,16 +14,29 @@ function onlyPlayOneIn(container) {
);
}
document.addEventListener("DOMContentLoaded", function () {
onlyPlayOneIn(document.body);
});
function renderJSButtons() {
// If JS is disabled this won't run and therefore JS-powered buttons won't be displayed
let blockToggle = document.getElementsByClassName("block-toggle");
for (let i = 0; i < blockToggle.length; i++) {
blockToggle[i].style.display = "block";
// Accessibility is important!!!
blockToggle[i].ariaHidden = "false";
}
}
function blockToggle(id) {
var blockID = document.getElementById(id);
if (blockID.style.display === "block") {
blockID.style.display = "none";
blockID.ariaHidden = "true";
} else {
blockID.style.display = "block";
blockID.ariaHidden = "false";
}
}
document.addEventListener("DOMContentLoaded", function () {
onlyPlayOneIn(document.body);
renderJSButtons();
});

23
res/asset-js-now.js
View file

@ -2,8 +2,12 @@ function nowPostID() {
// Thread Parents
let IDs = document.getElementsByClassName("now");
// If JS cannot run, the H4 must not be rendered for sake of screen-readers
for (let i = 0; i < IDs.length; i++) {
IDs[i].getElementsByTagName("h4")[0].innerHTML = "#" + IDs[i].id;
let IDsH4 = IDs[i].getElementsByTagName("h4");
IDsH4[0].innerHTML = "#" + IDs[i].id;
IDsH4[0].style.display = "block";
IDsH4[0].ariaHidden = "false";
}
// Thread Children
@ -11,14 +15,25 @@ function nowPostID() {
for (let i = 0; i < IDs.length; i++) {
for (let k = 0; k < IDs[i].getElementsByTagName("li").length; k++) {
IDs[i]
let IDsH4 = IDs[i]
.getElementsByTagName("li")
[k].getElementsByTagName("h4")[0].innerHTML =
"#" + IDs[i].getElementsByTagName("li")[k].id;
[k].getElementsByTagName("h4");
IDsH4[0].innerHTML = "#" + IDs[i].getElementsByTagName("li")[k].id;
IDsH4[0].style.display = "block";
IDsH4[0].ariaHidden = "false";
}
}
}
function initialiseLyrics() {
// If JS is disabled this won't run and therefore JS-powered lyrics will just display normally
let hideLyrics = document.getElementsByClassName("lyrics");
for (let i = 0; i < hideLyrics.length; i++) {
hideLyrics[i].style.display = "none";
}
}
document.addEventListener("DOMContentLoaded", function () {
nowPostID(document.body);
initialiseLyrics();
});