Radio Stations Application using JavaScript

Project Feedback
#1

Demo: https://goofy-heisenberg-6c54ca.netlify.com
Source: https://github.com/tpkahlon/javascript-projects

Let me know if you have any feedback for UI/UX/colour improvements.

Any knowledge of open source radio station URLs is highly appreciated!

#2

Some accessibility issues:

  • You should have at least an h1 heading. Personally, I would also have a bit of introductory text/instructions.
  • Your buttons need to have some sort of text/label. When a user tabs through your buttons with a screen reader they just hear “button” and have no idea what the button actually does. What should probably happen is that when they tab to a play button the screen reader should say something like “Listen to [name of radio station]”. And then similar for the pause button. There are many ways to implement this, so I’ll leave that up to you. If you have never used a screen reader then you can download NVDA for free and use it with FF.
  • The keyboard focus for your buttons (the light shadow that appears around the button) is barely noticeable. I think you need to make it stand out more.
  • When I click the play button with the keyboard the associated pause button lights up like it is in focus but I can’t click it. I have to hit tab again to actually get it in focus so it is clickable. That is very confusing. The active shadow around the button should only be there if it is actually active.
  • I would recommend you use this with only your keyboard so you can find all of the keyboard issues yourself.
2 Likes
#5

Very nice improvements on accessibility. The only issue I am still having from my list above is that after you click the play button with the keyboard the pause button next to it lights up like it is active but it is not, I still have to hit the tab key again to get it to be active.

Here are a few more very picky suggestions:

  • The h2 heading is too long. I don’t think that text needs to be a heading, it can just be a <p>.
  • Make each of the radio station names a heading. If you get rid of the <h2> at the top then each of the radio station names would be in an <h2>. When people are using screen readers they often navigate the page by headings. So making each of these a heading will help with that.
  • For each of the stations, have them link to their website (if they have one). Maybe have a small description (where it is located, what type of music it plays, etc…)
  • Instead of having separate play and pause buttons, just have play buttons and when you click one have it turn into a pause button (and then turn back into a play button when you click pause).

Again, very nice job.

1 Like