Merge pull request #76 from FAC29A/improve-accessibility

improved accessibility form lighthouse recommendations
FAC29A · Oct 25, 2023 · 2765837 · 2765837
2 parents 78a1697 + 67443c1
commit 2765837
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/css/style.css b/css/style.css
@@ -527,7 +527,7 @@ footer {
 
 
 .no-cover-image-div{
-    background-color: var(--light-grey);
+    background-color: var(--mid-light-grey);
     width: 11.25rem; 
     height: 17.25rem; 
     text-align: center; 
@@ -552,12 +552,12 @@ footer {
 }
 
 .cover-title {
-    color: var(--dark-grey); 
+    color: var(--footer-dark); 
     font-size: 0.8rem; 
 }
 
 .cover-author {
-    color: var(--dark-grey); 
+    color: var(--footer-dark); 
     font-size: 0.7rem
 }
 

diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Bookster: the book disovery app">
     <link href="css/normalize.css" rel="stylesheet" />
     <link href="css/style.css" rel="stylesheet" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -53,7 +54,7 @@ <h1>Bookster</h1>
     </section>
 
     <main>
-      <section id="genre-section ">
+      <section id="genre-section">
         <div class="section-banner">
           <div class="padding-for-banner-text">
             <h2>Books by Genre</h2>
@@ -66,6 +67,7 @@ <h2>Books by Genre</h2>
             class="carousel_button carousel_button--left"
             id="prev"
             data-dir="prev"
+            aria-label="Previous Slide"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -86,6 +88,7 @@ <h2>Books by Genre</h2>
             class="carousel_button carousel_button--right"
             id="next"
             data-dir="next"
+            aria-label="Next Slide"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"

diff --git a/javascript/carousel.js b/javascript/carousel.js
@@ -2,41 +2,47 @@ const carouselData = [
     {
         genre: "Adult Fiction",
         image: "images/adult-fiction.jpeg",
+        alt: "Lessons in Chemistry cover",
         search: "hardcover-fiction",
         id: "carousel-fiction",
         href: "bestsellers.html?category=hardcover-fiction"
     },
     {
         genre: "Adult Nonfiction",
         image: "images/adult-nonfiction.jpeg",
+        alt: "Going Infinite cover",
         search: "hardcover-nonfiction",
         id: "carousel-nonfiction",
         href: "bestsellers.html?category=hardcover-nonfiction"
     },
     {
         genre: "Young Adult Fiction",
         image: "images/young-adult.jpeg",
+        alt: "Curious Tides cover",
         search: "young-adult-hardcover",
         id: "carousel-young",
         href: "bestsellers.html?category=young-adult-hardcover"
     },
     {
         genre: "Children's Fiction (8-12)",
         image: "images/children8-12.jpeg",
+        alt: "The Puppets of Spellhorst cover",
         search: "childrens-middle-grade-hardcover",
         id: "carousel-children",
         href: "bestsellers.html?category=childrens-middle-grade-hardcover"
     },
     {
         genre: "Picture Books",
         image: "images/picture.jpeg",
+        alt: "Just Because cover",
         search: "picture-books",
         id: "carousel-picture",
         href: "bestsellers.html?category=picture-books"
     },
     {
         genre: "Graphic Books and Manga",
         image: "images/graphic.jpeg",
+        alt: "Hooky cover",
         search: "graphic-books-and-manga",
         id: "carousel-graphic",
         href: "bestsellers.html?category=graphic-books-and-manga"
@@ -61,6 +67,7 @@ function carouselLinks(category) {
       const genreImageContainer = document.createElement('div');
       const genreImage = document.createElement('img');
       genreImage.src = category.image;
+      genreImage.alt = category.alt;
       genreImage.className = 'carousel_img';
       genreImageContainer.className = 'carousel-img-container';
       genreImageContainer.appendChild(genreImage);

diff --git a/result.html b/result.html
@@ -51,7 +51,7 @@ <h2 class="result-banner-text">
 
         <!-- lucien added for loading indicator  -->
         <div id="loading-indicator" style="display: none;">
-            <p>Bear with...</p>
+            <p style="text-align: center;">&#128218; Books loading... </p>
           </div>
 
     </div>