feat: add alt text to images

public/index.html

@@ -35,7 +35,7 @@
                 <label for="SavicSuiteRoyaleXL">
                     <input type="checkbox" id="SavicSuiteRoyaleXL"/>
                     <div class="card-photo">
-                        <img src="assets/img/savic-xl.jpeg">
+                        <img alt="alt-savic-xl" src="assets/img/savic-xl.jpeg">
                     </div>
                     <div class="info-container">
                         <h4><b>Savic Suite Royale XL</b></h4>
@@ -48,7 +48,7 @@
                     <input type="checkbox" id="SavicSuiteRoyale95Double"/>
                     <div class="card-photo">
                         <div>
-                            <img src="assets/img/savic-95-double.jpg">
+                            <img alt="alt-savic-95-double" src="assets/img/savic-95-double.jpg">
                         </div>
                         <div class="info-container">
                             <h4><b>Savic Suite Royale 95 Double</b></h4>
@@ -61,7 +61,7 @@
                 <label for="TiakiKleintierkäfigEtagere">
                     <input type="checkbox" id="TiakiKleintierkäfigEtagere"/>
                     <div class="card-photo">
-                        <img src="assets/img/tiaki.jpeg">
+                        <img alt="alt-tiaki" src="assets/img/tiaki.jpeg">
                     </div>
                     <div class="info-container">
                         <h4><b>TIAKI Kleintierkäfig Étagère</b></h4>
@@ -70,7 +70,7 @@
             </div>
 
             <div class="card" id="card-ManualMeasurements">
-                <label for="form-cage-measurements">Käfigmaße</label>
+                <label data-i18n-key="cage-measurements" for="form-cage-measurements">Käfigmaße</label>
                 <form id="form-cage-measurements" class="form-measurements">
                     <div class="input-measurement">
                         <label for="width" data-i18n-key="width-cm">Breite (cm)</label>
@@ -125,7 +125,6 @@
     <div class="container output-element" id="resultsDiv">
     </div>
 </div>
-</div>
 
 <script src="./bundle.js"></script>
 

public/lang/de.json

@@ -13,5 +13,9 @@
   "failed-floor-height": "Der Mindestabstand zwischen Ebenen muss {{ minimum_floor_height }}cm betragen.",
   "failed-num-rats": "Es müssen mindestens 3 Ratten zusammenleben, Paarhaltung ist nicht artgerecht.",
   "failed-minimum-length-long-side": "Die lange Seite des Käfig muss mindestens {{ minimum_length_long_side }}cm lang sein um Rennen zu ermöglichen.",
-  "failed-minimum-length-short-side": "Die kurze Seite des Käfig muss mindestens ${(MINIMUM_LENGTH_SHORT_SIDE * 100).toFixed(0)}cm lang sein."
+  "failed-minimum-length-short-side": "Die kurze Seite des Käfig muss mindestens {{ minimum_length_short_side }}cm lang sein.",
+  "alt-savic-xl": "Bild des Käfigs Savic Suite Royal XL, ein Drahtkäfig mit vier Türen die erlauben die gesamte Vorderseite zu öffnen. Auf halber Höhe ist eine weitere Vollebene.",
+  "alt-savic-95-double": "Bild eines dekorierten Käfigs, des Savic Suite Royale 95 Double. Auf insgesamt vie Vollebenen sind Holz- und Papphäusschen, Hängematten, Futterschalen und mehr.",
+  "alt-savic-95-tiaki": "Bild des Tiaki-Käfigs, ein Drahtkäfig mit vier Türen die erlauben die gesamte Vorderseite zu öffnen. Auf halber Höhe ist eine weitere Vollebene.",
+  "cage-measurements": "Käfigmaße"
 }

public/lang/en.json

@@ -13,5 +13,9 @@
   "failed-floor-height": "The height between floors must be above {{ minimum_floor_height }}cm.",
   "failed-num-rats": "Rats must live in a group of at least three rats, pairs or lone rats are not species-appropriate.",
   "failed-minimum-length-long-side": "The long side of the cage must be at least {{ minimum_length_long_side }}cm long to enable running.",
-  "failed-minimum-length-short-side": "The short side of the cage must be at least {{ minimum_length_short_side }}cm."
+  "failed-minimum-length-short-side": "The short side of the cage must be at least {{ minimum_length_short_side }}cm.",
+  "alt-savic-xl": "A picture of a wire bar cage with four doors that allow to open the full front of the cage. In the middle of the cage is a additional full floor.",
+  "alt-savic-95-double": "A picture of a decorated wire bar cage with four doors that allow to open the full front of the cage. Inside there are hammocks, toys and four full floors with lots of hides",
+  "alt-savic-95-tiaki": "A picture of a decorated wire bar cage with four doors that allow to open the full front of the cage.",
+  "cage-measurements": "Cage measurements"
 }

src/index.js

@@ -25,6 +25,7 @@ async function initI18next() {
 }
 
 function translatePageElements() {
+    // Translate content inside a tag
     const translatableElements = document.querySelectorAll(
         "[data-i18n-key]",
     );
@@ -32,6 +33,16 @@ function translatePageElements() {
         const key = el.getAttribute("data-i18n-key");
         el.innerHTML = i18next.t(key);
     });
+    // Translate alt texts
+    const translatableAltTexts = document.querySelectorAll(
+        "[alt]",
+    );
+    translatableAltTexts.forEach((el) => {
+        const translation_key = el.getAttribute("alt");
+        console.log(el);
+        el.setAttribute("alt", i18next.t(translation_key));
+        console.log(i18next.t(translation_key));
+    });
 
 }