Improve acccessibility with more localized alt text.

2026-07-05 14:37:18 -03:00 · 2026-07-05 14:37:18 -03:00 · 338bdadd76
commit 338bdadd76
parent f4fc14c66d
9 changed files with 58 additions and 20 deletions
--- a/.cache/mastodon.json
+++ b/.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",
--- a/site/_data/i18n.cjs
+++ b/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"
  }
 };
--- a/site/_includes/base.njk
+++ b/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" %}

--- a/site/_includes/header.njk
+++ b/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>
--- a/site/_includes/macros.njk
+++ b/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 %}>
--- a/site/_includes/widgets/droidring.html
+++ b/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>
--- a/site/_includes/widgets/internetometer-aside.html
+++ b/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>
--- a/site/index.njk
+++ b/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>
--- a/static/scripts/music.js
+++ b/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/sound-on.png" id="sound">
-<select name="song" id="songSelection"></select>
+<img src="${rootPrefix}static/images/gears.svg" class="optionsToggle invertedc" alt="${headeri18n.gearsAlt}">
+<img src="${rootPrefix}static/images/sound-on.png" id="sound" alt="${headeri18n.soundOnAlt}">
+<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: "PG2.mp3", name: 'Frugal APE', artwork: "pg.jpg" },
-    { file: "dreamscape.mp3", name: 'Dreamscape', artwork: "winds.png" },
-    { file: "skychat.mp3", name: 'Skychat', artwork: "winds.png" }
+    { file: "Velkommen.mp3", name: 'Velkommen', artwork: "velkommen.jpg", alt: headeri18n.velkommenArtAlt },
+    { file: "PG2.mp3", name: 'Frugal APE', artwork: "pg.jpg" , alt: headeri18n.pgArtAlt },
+    { file: "dreamscape.mp3", name: 'Dreamscape', artwork: "winds.png" , alt: headeri18n.windsArtAlt },
+    { 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) {