Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
58 commits
Select commit Hold shift + click to select a range
dea4a83
Update README.md
joheri1 Sep 17, 2024
592cdc0
Testing to push
joheri1 Sep 17, 2024
3615bdd
Something
IamLise Sep 17, 2024
3a09629
add comment to README and add album-images folder
JoyceKuode Sep 17, 2024
ebad5bf
update README
JoyceKuode Sep 17, 2024
d972d91
Update README.md
joheri1 Sep 17, 2024
1dfbee0
add Queen album image
JoyceKuode Sep 17, 2024
3096d84
Merge branch 'main' of https://github.com/JoyceKuode/project-library
JoyceKuode Sep 17, 2024
a0aa046
Add Pearl Jam Ten Album image
joheri1 Sep 17, 2024
3a9806a
add eminem photo to album-imeges
IamLise Sep 17, 2024
4f423f4
add 3 more images to album-images folder
JoyceKuode Sep 17, 2024
7242680
Add more images to album-images
joheri1 Sep 17, 2024
d94a817
Add more images to album-images
joheri1 Sep 17, 2024
47f08d7
Add three more images to album-images
joheri1 Sep 17, 2024
d656c8b
added 3 more pictures
IamLise Sep 17, 2024
17c7a1c
update html and add basic css styling and create album and function t…
JoyceKuode Sep 18, 2024
fc6009a
adjust css to avoid horizontal scrolling
JoyceKuode Sep 18, 2024
4c70818
Add album data for Stevie Wonder and Queen. Add image for Linkin Park…
joheri1 Sep 18, 2024
a51a43b
Add two albums from Pearl Jam
joheri1 Sep 18, 2024
ab124c7
Add four albums by John Williams.
joheri1 Sep 18, 2024
65e7fc0
Replace apostrophe ´with ' in the description of a few albums
joheri1 Sep 18, 2024
e9dcf4e
fix album-container to make cards the same height, add gradient color…
JoyceKuode Sep 18, 2024
f6047c9
Add more album data
JoyceKuode Sep 19, 2024
3424c8d
added Taylor Swift
IamLise Sep 19, 2024
c6e3d61
add Taylor Swift
IamLise Sep 19, 2024
97a869b
add missing ,
IamLise Sep 19, 2024
737ff06
add 4 more albums
IamLise Sep 19, 2024
ba6676c
Add header image
JoyceKuode Sep 19, 2024
215de38
Add shimmer effect to header
JoyceKuode Sep 19, 2024
a26084a
Change font size and adjust h1 color
JoyceKuode Sep 19, 2024
f72892d
Add filter and sort buttons with hidden panels and create genre filte…
JoyceKuode Sep 20, 2024
e63c6b9
Add random button and random album function, add filter artist functi…
joheri1 Sep 20, 2024
35c8656
Add sort option function. Set default sort to alphabetical by Title
joheri1 Sep 20, 2024
b94dc0d
Add Apply filter button to the HTML and Apply filter fun
joheri1 Sep 20, 2024
939b4b5
Edit styling on panel and buttons
JoyceKuode Sep 20, 2024
2b442d5
Add CSS styling to buttons and panels, add panel Close button, create…
JoyceKuode Sep 21, 2024
2f0c5c5
Edit files to make code more DRY
JoyceKuode Sep 21, 2024
f603da9
Change button colors
JoyceKuode Sep 21, 2024
5cb2434
Edit panel styling
JoyceKuode Sep 21, 2024
96fe2c3
Add box-shadow to select box when clicked
JoyceKuode Sep 21, 2024
7434a2a
Add footer with links to GitHub accounts
joheri1 Sep 22, 2024
dbde760
Center the content in the footer
joheri1 Sep 22, 2024
4376766
Change link to a GitHub account
joheri1 Sep 22, 2024
6d4fa6a
Create two columns and hide some info on mobile and update README file
JoyceKuode Sep 22, 2024
1357a91
Add feature to toggle cards and display more info on mobile screens
JoyceKuode Sep 23, 2024
04b15f2
Improve accessibility by adding descriptive alt attributes to images
joheri1 Oct 2, 2024
60dc9ac
Update HTML semantic elements, improve accessibility, and fix aria la…
joheri1 Oct 3, 2024
25707a8
Fix closePanel button styling after changing from span. Add a Skip to…
joheri1 Oct 3, 2024
f3399b6
Fix Lighthouse warning for select#sortSelect by adding a label for so…
joheri1 Oct 4, 2024
3f07ea6
Move array to top and add comment sections for Array and DOM Selectors
joheri1 Oct 4, 2024
1a00144
Remove duplicate genreSelect DOM Selector
joheri1 Oct 4, 2024
279e8bd
Change color for button:hover to a darker grey to get a higher contra…
joheri1 Oct 6, 2024
4f2317e
Add README file. Add min-width and min-height of 44px to buttons and …
joheri1 Oct 6, 2024
c479867
Fix the code snippets in the README file
joheri1 Oct 6, 2024
fcffabf
Add triple backticks to code snippets in the README file
joheri1 Oct 6, 2024
fe3924d
Update README.md
joheri1 Oct 6, 2024
f1f2a89
Add a div section i
joheri1 Oct 6, 2024
f2b8bcc
Add If I had more time to the README file. Create a div section in th…
joheri1 Oct 6, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
Binary file not shown.
36 changes: 35 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -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/
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/Beyoncé_-_Cowboy_Carter.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/CorpseBride.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/Dangerously_In_Love_Album(2003).png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/Encore_(Eminem_album)_coverart.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/HarrypotterPSsoundtrack.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/Jurassicpark-1-.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/Led_Zeppelin_-_Led_Zeppelin_IV.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/Minutes_to_Midnight_cover.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/PearlJam-Ten2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/PearlJamVitalogy.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/Taylor_Swift_-_Lover.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/Taylor_Swift_-_Taylor_Swift.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/header-image.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/queen-innuendo.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/queen-opera.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/queen-queenII.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added album-images/stevie-wonder-sitkol.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed books-images/1984.jpg
Binary file not shown.
Binary file removed books-images/harry-potter-and-the-sorcerer.jpg
Binary file not shown.
Binary file removed books-images/moby-dick.jpg
Diff not rendered.
Binary file removed books-images/pride-and-prejudice.jpg
Diff not rendered.
Binary file removed books-images/the-chronicles-of-narnia.jpg
Diff not rendered.
Binary file removed books-images/the-great-gatsby.jpg
Diff not rendered.
Binary file removed books-images/the-hobbit.jpg
Diff not rendered.
Binary file removed books-images/the-lord-of-the-rings.jpg
Diff not rendered.
Binary file removed books-images/to-kill-a-mockingbird.jpg
Diff not rendered.
Binary file removed books-images/unknown.jpg
Diff not rendered.
147 changes: 143 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
Binary file removed recipe-images/baked-chicken.jpg
Diff not rendered.
Binary file removed recipe-images/cheat’s-cheesy-focaccia.jpg
Diff not rendered.
Binary file removed recipe-images/chicken-paprikash.jpg
Diff not rendered.
Binary file removed recipe-images/deep-fried-fish-bones.jpg
Diff not rendered.
Binary file removed recipe-images/fish-dish.jpg
Diff not rendered.
Binary file removed recipe-images/grilled.jpg
Diff not rendered.
Binary file removed recipe-images/individual-vegetarian-lasagnes.jpg
Diff not rendered.
Binary file removed recipe-images/meat.jpg
Diff not rendered.
Binary file removed recipe-images/vegetarian-shepherd's-pie.jpg
Diff not rendered.
Binary file removed recipe-images/vegetarian-stir-fried-garlic-s.jpg
Diff not rendered.
Loading