Project a11y / Accessibility #56
Conversation
… Minutes to Midnight
…on to the filter artist button
ction to the JavaScript file. Remove comments not in use
… slide in and out effect on toggle
… main content at the top of the site to improve navigation.
…rtSelect, to improve accessibility for screen reader users
…clickable areas to meet the recommended touch target size.
Add triple backtick\ns at the end of one code snipets.
n the main section for the album container, and add aria-live polite to make the screen rea der read the text on each album card. Update the readme file with If I had more time.
…e main section for the album container, and add aria-live = polite, so that screen reader read the text in the album cards
There was a problem hiding this comment.
Thanks for sharing your process in your readme, you’ve done an extensive work this week!
Nice job with aria labels, skip links, alt tags and usage of semantic elements (including label for form elements) 👍
Your lighthouse report comes back good and you have all sufficient contrasts. Keep up the good work!
There was a problem hiding this comment.
Really nice accessibility improvements, Johanna! ⭐
Some suggestions to improve it even further:
-
The focus styling is quite hard to see. Consider changing the focus styling to be more prominent. One idea could be to add a general
:focus-visibleto all focusable elements, like this for example:
*:focus-visible { outline: 2px solid white; outline-offset: 2px; } -
Adding the number of albums before the album list could be helpful for screen reader users. Then that text could also be updated after the user has filtered so they know how many matches their filter had.
-
WCAG recommends that no text should be under 12px in size. I noticed the artist name on mobile is only 0.65em (= 10.4px). Might be a good idea to change to at least 0.75em (= 12px).
-
To avoid the filter and sort panels to be tabable even when they are not open you could trigger a class, you could call it
.is-visible. On your panel classes you can addvisibility: hidden;as default. Then when the user clicks the filter or sort button you could add the is-visible class which will have the CSSvisibility: visible;
Again - great work with the accessibility 👌
Netlify link
https://a11yjojolialbumlibrary.netlify.app/