Improve acccessibility with more localized alt text.

.cache/mastodon.json

@@ -1,5 +1,5 @@
 {
-  "lastFetched": "2026-07-05T16:45:30.248Z",
+  "lastFetched": "2026-07-05T17:32:28.976Z",
   "posts": [
     {
       "date": "2026-07-03T01:51:37.604Z",

site/_data/i18n.cjs

@@ -100,7 +100,19 @@ module.exports = {
     mastodonPageDescription: "This is an archive of all my Mastodon posts.",
     addMe: "Add me",
     socialContentNotRated: "Social content is not rated and may mention topics not appropriate for all ages.",
-    clickHereToContinue: "Click here to continue"
+    clickHereToContinue: "Click here to continue",
+    windsArtAlt: "First Winds album artwork",
+    velkommenArtAlt: "Velkommen song artwork",
+    pgArtAlt: "Frugal APE song artwork",
+    bearAlt: "Background image. White bear swimming in water that reverberates around it.",
+    gearsAlt: "Gears",
+    soundOffAlt: "Audio disabled",
+    soundOnAlt: "Audio enabled",
+    volumeSliderAlt: "Volume",
+    backgroundCheckAlt: "Background image",
+    sfxCheckboxAlt: "Sound effects",
+    videoArtworkAlt: "Video artwork",
+    songSelectAlt: "Song selector"
   },
   pt: {
     language: "português",
@@ -176,6 +188,18 @@ module.exports = {
     mastodonPageDescription: "Essa página lista todas as minhas postagens do Mastodon.",
     addMe: "Me adicionar",
     socialContentNotRated: "Conteúdo das redes sociais não é monitorado e pode conter tópicos não apropriados para todas as idades.",
-    clickHereToContinue: "Clique aqui para continuar"
+    clickHereToContinue: "Clique aqui para continuar",
+    windsArtAlt: "Capa do album First Winds",
+    velkommenArtAlt: "Capa da música Velkommen",
+    pgArtAlt: "Capa da música Frugal APE",
+    bearAlt: "Imagem de fundo. Urso branco nadando na água que reverbera ao seu redor.",
+    gearsAlt: "Engrenagens",
+    soundOffAlt: "Áudio desligado",
+    soundOnAlt: "Áudio ligado",
+    volumeSliderAlt: "Volume",
+    backgroundCheckAlt: "Imagem de fundo",
+    sfxCheckboxAlt: "Efeitos sonoros",
+    videoArtworkAlt: "Capa do vídeo",
+    songSelectAlt: "Seletor de música"
   }
 };

site/_includes/base.njk

@@ -51,7 +51,7 @@
     </noscript>
 
     <div id="everythingHelper">
-        <img src="{{ ('/static/images/' ~ (background or 'bear.jpg')) | url }}" class="bg">
+        <img src="{{ ('/static/images/' ~ (background or 'bear.jpg')) | url }}" class="bg" alt="{{ i18n[langKey].bearAlt }}">
 
         {% include "header.njk" %}
 

site/_includes/header.njk

@@ -12,7 +12,17 @@
                     permissionIssue: "{{ i18n[langKey].permissionIssue | safe }}",
                     permissionIssueNotificationContent: "{{ i18n[langKey].permissionIssueNotificationContent | safe }}",
                     notificationDefaultHint: "{{ i18n[langKey].notificationDefaultHint | safe }}",
-                    disableSoundEffects: "{{ i18n[langKey].disableSoundEffects | safe }}"
+                    disableSoundEffects: "{{ i18n[langKey].disableSoundEffects | safe }}",
+                    windsArtAlt: "{{ i18n[langKey].windsArtAlt | safe }}",
+                    velkommenArtAlt: "{{ i18n[langKey].velkommenArtAlt | safe }}",
+                    pgArtAlt: "{{ i18n[langKey].pgArtAlt | safe }}",
+                    gearsAlt: "{{ i18n[langKey].gearsAlt | safe }}",
+                    soundOffAlt: "{{ i18n[langKey].soundOffAlt | safe }}",
+                    soundOnAlt: "{{ i18n[langKey].soundOnAlt | safe }}",
+                    volumeSliderAlt: "{{ i18n[langKey].volumeSliderAlt | safe }}",
+                    backgroundCheckAlt: "{{ i18n[langKey].backgroundCheckAlt | safe }}",
+                    sfxCheckboxAlt: "{{ i18n[langKey].sfxCheckboxAlt | safe }}",
+                    songSelectAlt: "{{ i18n[langKey].songSelectAlt | safe }}",
                 }
         </script>
     </div>

site/_includes/macros.njk

@@ -12,12 +12,12 @@
   >
 {% endmacro %}
 
-{% macro videoCard(videoLink, videoTitle, videoImage, videoWebsite, videoDuration, videoAccent) %}
+{% macro videoCard(videoLink, videoTitle, videoImage, videoWebsite, videoDuration, videoAccent, imageAlt = i18n[langKey].videoArtworkAlt) %}
 <div class="youtubeCardHolderHelper">
     <div class="youtubeCardHolder">
         <a href="{{ videoLink }}">
             <div class="blogpostYoutubeVideo" {% if videoAccent %}style="border-color: {{ videoAccent }};"{% endif %}>
-                <img src="{{ ('/static/images' ~ videoImage) | url }}">
+                <img src="{{ ('/static/images' ~ videoImage) | url }}" alt="{{ imageAlt }}">
                 <div class="videoHeader">
                     {# <p class="alsoAvailable">{{ i18n[langKey].alsoAvailableAsVideo }}:</p> #}
                     <h2 class="videoTitle" {% if videoAccent %}style="color: {{ videoAccent }};"{% endif %}>

site/_includes/widgets/droidring.html

@@ -1,6 +1,6 @@
 <center>
     <div class="droidringwidget">
-        <a href="https://kanandraw.neocities.org/stuffs/droidring/home"><img src="https://kanandraw.neocities.org/stuffs/droidring/assets/logo.png" style="width: 200px; padding: .4em;"></a><br/>
+        <a href="https://kanandraw.neocities.org/stuffs/droidring/home"><img src="https://kanandraw.neocities.org/stuffs/droidring/assets/logo.png" style="width: 200px; padding: .4em;" alt="Droidring"></a><br/>
         <!-- <img src="https://kanandraw.neocities.org/stuffs/droidring/assets/droidwidget.png" style="width: 115px;"><br> -->
         <div class="buttonsdroidring">
             <a href="https://kanandraw.neocities.org/stuffs/droidring/home?action=previous"><button class="navdroidring" data-tip="{{ i18n[langKey].previousSite | smartTitle }}">←</button></a>

site/_includes/widgets/internetometer-aside.html

@@ -3,5 +3,5 @@
         <h1 class="negativeMargin">{{ i18n[langKey].liked | smartTitle }}?</h1>
         <hr style="margin-bottom: .4em;">
     </div>
-    <a href='http://internetometer.com/give/52060'><img src='http://internetometer.com/image/52060.png'/></a>
+    <a href='http://internetometer.com/give/52060'><img src='http://internetometer.com/image/52060.png' alt="Internetometer"/></a>
 </div>

site/index.njk

@@ -87,7 +87,8 @@ headerLink: home
                 i18n["global"].homeSongImage,
                 i18n["global"].homeSongWebsite,
                 i18n["global"].homeSongDuration,
-                i18n["global"].homeSongAccent
+                i18n["global"].homeSongAccent,
+                i18n[langKey].velkommenArtAlt
                 )
             }}
         </div>

static/scripts/music.js

@@ -4,18 +4,18 @@ const body = document.querySelector("body");
 
 const musicdiv = document.getElementById("music");
 musicdiv.innerHTML = `
-<img src="${rootPrefix}static/images/gears.svg" class="optionsToggle invertedc">
+<img src="${rootPrefix}static/images/gears.svg" class="optionsToggle invertedc" alt="${headeri18n.gearsAlt}">
-<img src="${rootPrefix}static/images/sound-on.png" id="sound">
+<img src="${rootPrefix}static/images/sound-on.png" id="sound" alt="${headeri18n.soundOnAlt}">
-<select name="song" id="songSelection"></select>
+<select name="song" id="songSelection" alt="${headeri18n.songSelectAlt}"></select>
 `
 const linksHelper = document.getElementById("linksHelper");
 linksHelper.insertBefore(document.createElement("hs"), document.getElementById("headerLinks"));
 
 const songs = [
-    { file: "Velkommen.mp3", name: 'Velkommen', artwork: "velkommen.jpg" },
+    { file: "Velkommen.mp3", name: 'Velkommen', artwork: "velkommen.jpg", alt: headeri18n.velkommenArtAlt },
-    { file: "PG2.mp3", name: 'Frugal APE', artwork: "pg.jpg" },
+    { file: "PG2.mp3", name: 'Frugal APE', artwork: "pg.jpg" , alt: headeri18n.pgArtAlt },
-    { file: "dreamscape.mp3", name: 'Dreamscape', artwork: "winds.png" },
+    { file: "dreamscape.mp3", name: 'Dreamscape', artwork: "winds.png" , alt: headeri18n.windsArtAlt },
-    { file: "skychat.mp3", name: 'Skychat', artwork: "winds.png" }
+    { file: "skychat.mp3", name: 'Skychat', artwork: "winds.png" , alt: headeri18n.windsArtAlt }
 ];
 
 // Options page
@@ -43,15 +43,15 @@ optionsAside.classList.add("metromenu");
     <div id="playlist"></div>
     <div>
         <p>Volume</p>
-        <input id="volume" type="range" min="0" max="100"></input>
+        <input id="volume" type="range" min="0" max="100" alt="${headeri18n.volumeSliderAlt}"></input>
     </div>
         <div class="checkbox">
             <p>${headeri18n.hideBackground}</p>
-            <input id="background" type="checkbox"></input>
+            <input id="background" type="checkbox" alt="${headeri18n.backgroundCheckAlt}"></input>
         </div>
         <div class="checkbox">
             <p>${headeri18n.disableSoundEffects}</p>
-            <input id="soundEffects" type="checkbox"></input>
+            <input id="soundEffects" type="checkbox" alt="${headeri18n.sfxCheckboxAlt}"></input>
         </div>
     </div>
     `
@@ -99,6 +99,7 @@ songs.forEach(song => {
     songElement.classList.add("drawerSong");
     songElement.dataset.song = song.file;
     const songImage = document.createElement("img");
+    songImage.alt = song.alt;
     songImage.src = `${rootPrefix}static/images/songs/${song.artwork}`;
     songElement.appendChild(songImage);
     songElement.addEventListener('click', () => {
@@ -177,6 +178,7 @@ function play() {
         });;
     localStorage.setItem("audioPlaying", "true")
     toggleIMG.src = `${rootPrefix}static/images/sound-on.png`
+    toggleIMG.alt = headeri18n.soundOnAlt;
     console.log(`[Music Player] playing ${audioSelect.value}`)
 }
 
@@ -184,6 +186,7 @@ function stop() {
     audio.pause();
     localStorage.setItem("audioPlaying", "false")
     toggleIMG.src = `${rootPrefix}static/images/sound-off.png`
+    toggleIMG.alt = headeri18n.soundOffAlt;
 }
 
 function setVolume(volume) {