freeCodeCamp/CurriculumExpansion

music-playlist-app additional accessibility enhancements

Closed this issue · 4 comments

@jdwilkin4 More accessibility improvements after we finish #319.

[ ] When the user clicks the prev/next song button, screen readers should automatically announce the name of the new song. I think this would be best done with a hidden active region. I will be happy to implement this once we have the other issues in #319 fixed.

[ ] The next song button rolls over to the beginning of the list after you reach the last song but the previous song button does not roll over to the end of the list after you reach the first song.

[ ] We might think about splitting the play/pause button icon into separate icons and then show the appropriate icon based on the status of the button (i.e. show the play icon when the player is paused and the pause icon when the player is playing a song). Granted, most people are going to hear that the music is playing and so they will know what the button is going to do when they click it. But that is not a 100% guarantee, so having the button only show one icon will make this clear for people who can't hear the music.

[ ] We should probably have a header (it can be sr-only) for the song displayed at the top of the player. Perhaps something like "Current song".

[ ] The mic graphic at the top seems like it is purely decorative to me and should probably have blank alt text to hide it from screen readers. But if we feel that it is important for screen reader users to know what the image is then it needs a better alt text description.

[ ] We need to manage the keyboard focus after a song has been deleted by explicitly setting it.

[ ] When the user clicks the prev/next song button, screen readers should automatically announce the name of the new song. I think this would be best done with a hidden active region. I will be happy to implement this once we have the other issues in #319 fixed.

If you are interested in working on this and creating a PR, that is totally fine with me. 👍

I am going to be working on this issue and reach out to Naomi and Kris to help me test out the app some more to find any more bugs.

Should this issue be close now since we have the PR with a new prototype ? #338

@RafaelDavisH

If all of the accessibility issues have been resolved, then this will close when the PR is merged since I liked the issue with the PR.

I still think there are a few accessibility enhancements that could be added. I will create my own PRs for them.