fix: Improve accessibility and consistency in 404 and index views (#61)

warnyul · web-flow · commit 6f1d28d083e9 · 2024-11-30T16:59:11.000+01:00
- Added spacing and cleaned up HTML structure in `404.ejs` and `index.ejs`.
- Removed redundant `loading="lazy"` attribute where unnecessary due to default browser behavior.
- Improved readability and consistency of `&lt;img&gt;` tags with proper formatting and alignment.
- Ensured clean and valid HTML across both views.
diff --git a/src/views/404.ejs b/src/views/404.ejs
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>404 - Page not found - Oops!</title>
     <link rel="preload" href="../assets/fonts/Poppins-Regular-latin.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
     <link rel="preload" href="../assets/images/confused-robot.png?as=webp" as="image" type="image/webp" />
 </head>
+
 <body>
     <div class="clazz-error-container">
         <header>
@@ -16,12 +18,17 @@
         <picture>
             <!-- Source of the image: https://www.cleanpng.com/png-http-404-error-user-interface-design-google-chrome-2045552/ -->
             <source type="image/webp" srcset="../assets/images/confused-robot.png?as=webp">
-            <img src="../assets/images/confused-robot.png" alt="Confused robot looking for the page" loading="lazy" width="300" height="270" />
+            <img 
+                src="../assets/images/confused-robot.png"
+                alt="Confused robot looking for the page"
+                width="300"
+                height="270" />
         </picture>
         <div class="clazz-action">
             <p>Don't worry, even robots get lost sometimes.</p>
             <a href="/" aria-label="Visit the Home Page" class="clazz-home-link">Take Me Home</a>
         </div>
     </div>
 </body>
+
 </html>
diff --git a/src/views/index.ejs b/src/views/index.ejs
@@ -43,7 +43,7 @@
             <header>
                 <picture>
                     <source type="image/webp" srcset="../assets/images/profile100w100h.png?as=webp" />
-                    <img class="clazz-profile-image" src="../assets/images/profile100w100h.png" alt="Profile picture of Balázs Varga, CTO @ Apter" loading="lazy" width="100" height="100" />
+                    <img class="clazz-profile-image" src="../assets/images/profile100w100h.png" alt="Profile picture of Balázs Varga, CTO @ Apter" width="100" height="100" />
                 </picture>
                 <h1 class="clazz-text-center">Balázs Varga</h1>
             </header>
