Technigo · joheri1 · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024 · Sep 17, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1 +1,35 @@
-# project-library
+# Project A11y
+
+This assignment was focused on making one of my previous projects super accessible. I chose to work on **Project Library**. 
+
+### Lighthouse Accessibility Score:
+When I started, the project scored 94 in Accessibility on Lighthouse (Google's Accessibility tool). The warnings from Lighthouse were:
+
+- Select elements do not have associated label elements.
+- Heading elements are not in a sequentially-descending order.
+
+After implementing several accessibility improvements, the site scored 100 in Accessibility on Lighthouse.
+
+### Accessibility Improvements:
+In the code, I have added comments labeled **"Changes for Accessibility"** to show what changes were made. Below is a selection of the changes:
+
+#### **HTML:**
+- Changed ```<span>``` to ```<button>```.
+- Replaced ```<div>``` with ```<nav>``` for navigation buttons.
+- Used ```<section>``` instead of ```<div>``` for the filter panel.
+- Updated heading elements to follow the correct sequential order.
+- Added aria-labels to describe links and buttons for screen readers.
+
+#### **CSS:**
+- Set a darker background color to improve contrast.
+- Added min-width and min-height of 44px to buttons and clickable areas to meet the recommended touch target size.
+
+#### **JavaScript:**
+- Added descriptive alt attributes to images for better screen reader accessibility.
+
+#### If I had more time
+- I would work on improving the voicever functionality by making the panels invisible to screen readers when closed. Now it reads the content inside the panels even when they’re not visible to the user. I’d also edit the text for the album cards to avoid repetition when read by the screen reader.
+
+## Live Demo:
+- **Improved Accessibility version**: https://a11yjojolialbumlibrary.netlify.app/
+- **Original version**: https://jojolialbumlibrary.netlify.app/
diff --git a/album-images/Beyonce_-_Lemonade_(Official_Album_Cover).png b/album-images/Beyonce_-_Lemonade_(Official_Album_Cover).png
diff --git a/album-images/Beyoncé_-_Cowboy_Carter.png b/album-images/Beyoncé_-_Cowboy_Carter.png
diff --git a/album-images/CorpseBride.jpg b/album-images/CorpseBride.jpg
diff --git a/album-images/Dangerously_In_Love_Album(2003).png b/album-images/Dangerously_In_Love_Album(2003).png
diff --git a/album-images/E.T._the_Extra-Terrestrial_(soundtrack).jpg b/album-images/E.T._the_Extra-Terrestrial_(soundtrack).jpg
diff --git a/album-images/Encore_(Eminem_album)_coverart.jpg b/album-images/Encore_(Eminem_album)_coverart.jpg
diff --git a/album-images/HarrypotterPSsoundtrack.jpg b/album-images/HarrypotterPSsoundtrack.jpg
diff --git a/album-images/Home_Alone_(Original_Motion_Picture_Soundtrack).jpg b/album-images/Home_Alone_(Original_Motion_Picture_Soundtrack).jpg
diff --git a/album-images/Jurassicpark-1-.jpg b/album-images/Jurassicpark-1-.jpg
diff --git a/album-images/Led_Zeppelin_-_Led_Zeppelin_IV.jpg b/album-images/Led_Zeppelin_-_Led_Zeppelin_IV.jpg
diff --git a/album-images/Linkin_Park_Hybrid_Theory_Album_Cover.jpg b/album-images/Linkin_Park_Hybrid_Theory_Album_Cover.jpg
diff --git a/album-images/Minutes_to_Midnight_cover.jpg b/album-images/Minutes_to_Midnight_cover.jpg
diff --git a/album-images/PearlJam-Ten2.jpg b/album-images/PearlJam-Ten2.jpg
diff --git a/album-images/PearlJamVitalogy.jpg b/album-images/PearlJamVitalogy.jpg
diff --git a/album-images/Taylor_Swift_-_Lover.png b/album-images/Taylor_Swift_-_Lover.png
diff --git a/album-images/Taylor_Swift_-_Taylor_Swift.png b/album-images/Taylor_Swift_-_Taylor_Swift.png
diff --git a/album-images/header-image.jpg b/album-images/header-image.jpg
diff --git a/...-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png b/...-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png
diff --git a/album-images/png-transparent-github-git-hub-logo-icon-thumbnail.png b/album-images/png-transparent-github-git-hub-logo-icon-thumbnail.png
diff --git a/album-images/queen-innuendo.jpg b/album-images/queen-innuendo.jpg
diff --git a/album-images/queen-opera.jpg b/album-images/queen-opera.jpg
diff --git a/album-images/queen-queenII.jpg b/album-images/queen-queenII.jpg
diff --git a/album-images/stevie-wonder-sitkol.jpg b/album-images/stevie-wonder-sitkol.jpg
diff --git a/books-images/1984.jpg b/books-images/1984.jpg
diff --git a/books-images/harry-potter-and-the-sorcerer.jpg b/books-images/harry-potter-and-the-sorcerer.jpg
diff --git a/books-images/moby-dick.jpg b/books-images/moby-dick.jpg
diff --git a/books-images/pride-and-prejudice.jpg b/books-images/pride-and-prejudice.jpg
diff --git a/books-images/the-chronicles-of-narnia.jpg b/books-images/the-chronicles-of-narnia.jpg
diff --git a/books-images/the-great-gatsby.jpg b/books-images/the-great-gatsby.jpg
diff --git a/books-images/the-hobbit.jpg b/books-images/the-hobbit.jpg
diff --git a/books-images/the-lord-of-the-rings.jpg b/books-images/the-lord-of-the-rings.jpg
diff --git a/books-images/to-kill-a-mockingbird.jpg b/books-images/to-kill-a-mockingbird.jpg
diff --git a/books-images/unknown.jpg b/books-images/unknown.jpg
diff --git a/index.html b/index.html
@@ -1,13 +1,152 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <!-- Don't forget to change the title and connect the CSS file -->
-  <title>Project Library</title>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+  <title>Album Library</title>
 </head>
+
+<!-- Changes for Accessibility: 
+ - Added a Skip to main content" link to improve naviation
+-->
 <body>
-  <h1>Project Library</h1>
-  <!-- Don't forget to connect the JavaScript file -->
+  <a href="#album-container" class="skip-link">Skip to main content</a>
+
+  <div id="fullscreen-overlay" class="fullscreen-overlay"></div>
+  <header class="header">
+    <div class="overlay">
+      <h1>Album Library</h1>
+    </div>
+  </header>
+
+  <!-- Button Container -->
+
+  <!-- Changes for Accessibility: 
+   - Replaced <div> with <nav> for the Navigation buttons. 
+    -->
+  <nav class="button-container">
+    <!-- Filter Button -->
+    <button id="filterButton" class="button">Filter</button>
+
+    <!-- Filter Panel -->
+     <!--  
+    Changes for Accessibility: 
+       - Aria label "Close Filter Panel". 
+       - Changed <span> to <button>.
+       - <section> instead of <div> for the filter panel.
+       - Renamed Apply button to a more descriptive text, Apply filters. 
+       - Fix Lighthouse warning: Updated the heading elements to follow correct order (h1, h2, h3...).
+       -->
+     <section  id="filterPanel" class="panel">
+      <button id="closeFilterPanel" class="closePanel" aria-label="Close Filter Panel">&times;</button>
+      <h2>Filter by</h2>
+      <!--  Select menu for genre  -->
+      <label for="genreSelect">Genre:</label>
+      <select id="genreSelect">
+        <option value="all">Show all</option>
+        <option value="Country">Country</option>
+        <option value="Film score">Film score</option>
+        <option value="Hip hop">Hip hop</option>
+        <option value="Pop">Pop</option>
+        <option value="Rock">Rock</option>
+        <option value="Soul">Soul</option>
+      </select>
+      <label for="artistSelect">Artist:</label>
+      <select id="artistSelect">
+        <option value="all">Show all</option>
+        <option value="Beyoncé">Beyoncé</option>
+        <option value="Danny Elfman">Danny Elfman</option>
+        <option value="Eminem">Eminem</option>
+        <option value="John Williams">John Williams</option>
+        <option value="Led Zeppelin">Led Zeppelin</option>
+        <option value="Linkin Park">Linkin Park</option>
+        <option value="Pearl Jam">Pearl Jam</option>
+        <option value="Queen">Queen</option>
+        <option value="Stevie Wonder">Stevie Wonder</option>
+        <option value="Taylor Swift">Taylor Swift</option>
+      </select>
+       <button id="applyFilters" class="apply">Apply filters</button>
+    </section>
+
+    <!-- Sort Button -->
+    <button id="sortButton" class="button">Sort</button>
+    <!-- Sort Panel -->
+     <!--  Changes for Accessibility: 
+       - Aria label "Close Sort Panel". 
+       - Changed <span> to <button>.
+       - <section> instead of <div> for the sort panel.
+       - Renamed Apply button to a more descriptive text, Apply sorting.
+       - Fix Lighthouse warning: Updated the heading elements to follow correct order (h1, h2, h3...). 
+       - Fix Lighthouse warning: Added a <label> element for the sort <select> element to improve accessibility for screen reader users.
+        -->
+    <section id="sortPanel" class="panel">
+      <button id="closeSortPanel" class="closePanel" aria-label="Close Sort Panel">&times;</button>
+      <h2>Sort</h2>
+      <!-- Select menu for sorting -->
+      <label for="sortSelect">Sort by:</label>
+      <select id="sortSelect">
+        <option value="alpha-title">Alphabetically by Title A-Z</option>
+        <option value="reverse-title">Alphabetically by Title Z-A</option>
+        <option value="alpha-artist">Alphabetically by Artist A-Z</option>
+        <option value="reverse-artist">Alphabetically by Artist Z-A</option>
+        <option value="newest-year">By Release Year Newest to Oldest</option>
+        <option value="oldest-year">By Release Year Oldest to Newest</option>
+        <option value="shortest-length">By Length Shortest to Longest</option>
+        <option value="longest-length">By Length Longest to Shortest</option>
+      </select>
+       <button id="applySort" class="apply">Apply sorting</button>
+    </section>
+  </nav>
+  <div>
+    <!-- Random button -->
+    <button id="randomButton" class="random-button">Show Random Album</button>
+  </div>
+
+  <!-- Album Container -->
+   <!-- Changes for Accessibility: 
+    - Changed <div> to <main>, since this is the main content
+    - Added aria-live=polite on the album container to ensure that dynamically loaded content is announced to screen readers
+  -->
+
+      <main>
+        <div id="album-container" class="album-container" aria-live="polite"></div>
+      </main>
+  <script src="script.js"></script>
+
+  <!-- Personal info -->
+
+  <footer>
+    <div class="personal-info-items">
+      <!-- Changes for Accessibility: 
+       - Fix Lighthouse warning: Updated the heading elements to follow correct order (h1, h2, h3...)
+       - aria-labels that describe the links to the GitHub accounts
+       --->
+      <h3 class="github-account">
+        <a href="https://github.com/JoyceKuode" aria-label="Link to Joyce's GitHub account" target="_blank">
+          <img src="album-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png" alt="GitHub Logo" width="20"> JoyceKuode
+        </a>
+      </h3>
+      <h3>
+        <a href="https://github.com/IamLise" aria-label="Link to Liselotte's GitHub account" target="_blank">
+          <img src="album-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png"
+          alt="GitHub Logo" width="20"> IamLise
+        </a>
+      </h3>
+      <h3>
+        <a href="https://github.com/Joheri1" aria-label="Link to Johanna's GitHub account" target="_blank">
+          <img src="album-images/png-transparent-github-git-hub-logo-icon-thumbnail-removebg-preview.png"
+          alt="GitHub Logo" width="20"> Joheri1
+        </a>
+      </h3>
+    </div>
+    <div>
+      <h3>© 2024 Copyright - Developed by Joyce Kuo, Liselotte Engström, and Johanna Eriksson</h3>
+    </div>
+  </footer>
 </body>
+
 </html>
diff --git a/recipe-images/baked-chicken.jpg b/recipe-images/baked-chicken.jpg
diff --git a/recipe-images/cheat’s-cheesy-focaccia.jpg b/recipe-images/cheat’s-cheesy-focaccia.jpg
diff --git a/recipe-images/chicken-paprikash.jpg b/recipe-images/chicken-paprikash.jpg
diff --git a/recipe-images/deep-fried-fish-bones.jpg b/recipe-images/deep-fried-fish-bones.jpg
diff --git a/recipe-images/fish-dish.jpg b/recipe-images/fish-dish.jpg
diff --git a/recipe-images/grilled.jpg b/recipe-images/grilled.jpg
diff --git a/recipe-images/individual-vegetarian-lasagnes.jpg b/recipe-images/individual-vegetarian-lasagnes.jpg
diff --git a/recipe-images/meat.jpg b/recipe-images/meat.jpg
diff --git a/recipe-images/vegetarian-shepherd's-pie.jpg b/recipe-images/vegetarian-shepherd's-pie.jpg
diff --git a/recipe-images/vegetarian-stir-fried-garlic-s.jpg b/recipe-images/vegetarian-stir-fried-garlic-s.jpg