music-playlist-app accessibility enhancements
Closed this issue · 2 comments
bbsmooth commented
Hey @jdwilkin4, I'm starting with the big stuff first. I know that accessibility probably isn't the main concern for this project. But it is also nice to set a good example.
- The four control buttons at the top need text associated with them. I would probably use sr-only text but you can use aria-label if you prefer. Additionally, the text for the play/pause button should be updated depending on the status of the player. I would also recommend that the text for the play button include the name of the song to be played. For example, when the app first loads, the play button will play the first song in the list, so the sr-only text should say "play [song name]" with [song name] being the first song in the list.
- The playlist itself feels like it should be coded as an HTML list. This would also automatically tell screen reader users how many songs are in the list. There is another advantage to using a list here which I won't go into now.
- The delete button for each song should have sr-only text that includes the name of the song to be deleted. That way screen readers will hear "Delete [song name]". This is especially important if they are navigating by Tab or listing all buttons.
- Adding a click handler to a div is inaccessible, especially for keyboard users. Any element that can be clicked must have a well-defined role and accessible name. The better option here is to probably use a button, since this does seem to be acting as a play button for the song. I wouldn't have two
pelements in there, just text, perhaps something like "Play [song name] by [artist]". The words "Play" and "by" would be sr-only. Addspans where needed for styling. - When you mouse over a song row, the entire row changes color but only clicking over the song name/artist text triggers the song to play. In other words, there are gray areas around the delete button that do nothing. There are various options for handling this, I'll let you decide on which one you like best.
You might not consider all of these to be important, I completely understand. But I would definitely implement the sr-only text for the four buttons and removing the click handler on the divs.