Improve accessibility

templates/_base.html

@@ -15,11 +15,11 @@
     <div class="header-contact">
       <div class="header-content">
         <span>
-          <img width="16" height="16" class="text-icon" src="static/img/icons/telephone.svg">
+          <img width="16" height="16" class="text-icon" src="static/img/icons/telephone.svg" alt="Telefon">
           <a href="tel:+436641240214">+43 664 1240214</a>
         </span>
         <span>
-          <img width="16" height="16" class="text-icon" src="static/img/icons/mail.svg">
+          <img width="16" height="16" class="text-icon" src="static/img/icons/mail.svg" alt="Email">
           <a href="mailto:office@computerschaf.at">office@computerschaf.at</a>
         </span>
       </div>
@@ -27,7 +27,7 @@
     <header class="header-nav">
       <nav class="header-content">
         <span class="header-title">
-          <img src="static/img/logo.svg" alt="" class="nav-img" height="48" width="48">
+          <img src="static/img/logo.svg" alt="" class="nav-img" height="48" width="48" alt="">
           ComputerSchaf
         </span>
         <span class="header-spacer"></span>
@@ -50,9 +50,9 @@
       <div class="footer-content">
         <div class="footer-address">
           <h2 id="kontakt">Kontakt</h2>
-          <img width="16" height="16" class="text-icon" src="static/img/icons/telephone.svg">
+          <img width="16" height="16" class="text-icon" src="static/img/icons/telephone.svg" alt="Telefon">
           <a href="tel:+436641240214">+43 664 1240214</a><br>
-          <img width="16" height="16" class="text-icon" src="static/img/icons/mail.svg">
+          <img width="16" height="16" class="text-icon" src="static/img/icons/mail.svg" alt="Email">
           <a href="mailto:office@computerschaf.at">office@computerschaf.at</a><br>
           Adresse (nur nach Rücksprache):<br>
           Ulmenstraße 65
@@ -60,14 +60,14 @@
         <div class="footer-sep"></div>
         <div class="footer-social">
           <h2>Soziale Medien</h2>
-          <a href="https://www.facebook.com/people/ComputerSchaf/100090257378708/" class="social-media" target=" _blank">
+          <a href="https://www.facebook.com/people/ComputerSchaf/100090257378708/" aria-label="Computerschaf auf Facebook" class="social-media" target=" _blank">
-            <img width="48" height="48" class="social-icon" src="static/img/icons/facebook.svg">
+            <img width="48" height="48" class="social-icon" src="static/img/icons/facebook.svg" alt="Facebook">
           </a>
-          <a href="https://www.instagram.com/ComputerSchaf/" class="social-media" target=" _blank">
+          <a href="https://www.instagram.com/ComputerSchaf/" class="social-media" aria-label="Computerschaf auf Instagram" target=" _blank">
-            <img width="48" height="48" class="social-icon" src="static/img/icons/instagram.svg">
+            <img width="48" height="48" class="social-icon" src="static/img/icons/instagram.svg" alt="Instagram">
           </a>
-          <a href="https://www.youtube.com/channel/UCocc5i1jn2y8plvUp5SM8vQ" class="social-media" target=" _blank">
+          <a href="https://www.youtube.com/channel/UCocc5i1jn2y8plvUp5SM8vQ" aria-label="Computerschaf auf Youtube" class="social-media" target=" _blank">
-            <img width="48" height="48" class="social-icon" src="static/img/icons/youtube.svg">
+            <img width="48" height="48" class="social-icon" src="static/img/icons/youtube.svg" alt="Youtube">
           </a>
         </div>
         <div class="footer-sep"></div>

templates/index.html

@@ -7,7 +7,7 @@
       <div class="overview">
         <div>
           <a href="#beratung" class="service-link">
-            <img class="service-icon" src="static/img/icons/questionmark.svg" height="256" width="256">
+            <img class="service-icon" src="static/img/icons/questionmark.svg" height="256" width="256" alt="">
             <span class="service-name">Hilfe &amp; Beratung</span>
           </a>
           <span class="service-desc">
@@ -16,7 +16,7 @@
         </div>
         <div>
           <a href="#reparatur" class="service-link">
-            <img class="service-icon" src="static/img/icons/screwdriver.svg" height="256" width="256">
+            <img class="service-icon" src="static/img/icons/screwdriver.svg" height="256" width="256" alt="">
             <span class="service-name">Reparatur</span>
           </a>
           <span class="service-desc">
@@ -25,7 +25,7 @@
         </div>
         <div>
           <a href="#datenrettung" class="service-link">
-            <img class="service-icon" src="static/img/icons/harddrive.svg" height="256" width="256">
+            <img class="service-icon" src="static/img/icons/harddrive.svg" height="256" width="256" alt="">
             <span class="service-name">Datenrettung</span>
           </a>
           <span class="service-desc">
@@ -34,7 +34,7 @@
         </div>
         <div>
           <a href="#verleih" class="service-link">
-            <img class="service-icon" src="static/img/icons/computer.svg" height="256" width="256">
+            <img class="service-icon" src="static/img/icons/computer.svg" height="256" width="256" alt="">
             <span class="service-name">Verleih</span>
           </a>
           <span class="service-desc">
@@ -77,7 +77,7 @@
           </p>
         </div>
         <div class="split-section-img">
-          <img width="4896" height="3672" src="static/img/fotos/laptop_matte.jpeg" alt="">
+          <img width="4896" height="3672" src="static/img/fotos/laptop_matte.jpeg" alt="Laptop zur Reparatur geöffnet auf einer Arbeitsunterlage">
         </div>
       </div>
     </div>
@@ -108,7 +108,7 @@
           </p>
         </div>
         <div class="split-section-img">
-          <img width="4896" height="3672" src="static/img/fotos/datentraeger.jpeg" alt="">
+          <img width="4896" height="3672" src="static/img/fotos/datentraeger.jpeg" alt="Geöffnetes Gehäuse eines SSD Datenträgers">
         </div>
       </div>
     </div>