Interactive Rating Component

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  Hey, Óscar Rabadán Martínez! 👋

  Well done on this challenge! 👍

  Here are a couple of things I'd like to suggest,

  • Leaving the alt text for the star icon empty so that screen readers will ignore it. The star icon isn't very important to content of the component, so it doesn't need to be read out by screen readers.
  • Using button elements for the rating buttons in the component. Doing so will make your solution more accessible and your HTML more semantic. At the moment, you cannot use the keyboard to access the rating buttons. Using button elements will solve this problem. 🙂
  • Adding a favicon to your site would be a nice touch! There should be one in the free starter files for this challenge that you can use. 😉

  Hope you find this helpful. 😊

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  2

  ---

  

  Óscar Rabadán Martínez•150

  @OscarandioPosted over 2 years ago

  @ApplePieGiraffe Hello and thank you for the advice. I have applied everything you told me, although I don't know how exactly I can make the access with the keyboard as you suggested. I used the button elements but probably I am missing something else! Or perhaps it is because of the way that my js code works...

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  @Oscarandio

  By using button elements, you've already made your solution keyboard-accessible. Just go to your solution page and press the tab key a couple of times, and you should see the rating buttons highlighted when you do so. You can select a button by pressing the Enter key when it is highlighted. That's why using semantic HTML is such a help! 😉

  Glad to help! Good job on the fixes! 👍

  Marked as helpful

  1

  

  Óscar Rabadán Martínez•150

  @OscarandioPosted over 2 years ago

  @ApplePieGiraffe Ah yes! it's true!! I thought I could use the numbers in the keyboard to select them. If I press 2 then I select number 2. Maybe there's also a way to do that?

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  @Oscarandio

  Hmm... you could that with JS by adding event listeners to the page and listening for key press events for certain keys. Then, when a key such as "2" is pressed, you could select the corresponding button from your HTML and focus it with JS.

  I don't know if I'd recommend doing that, though, since that behavior isn't common to most websites and might end up confusing users if they press the number keys and don't expect that to happen! 😅

  I think that as long as you use button elements, you'll already be doing very well because users will be able to interact with the page in a way that are familiar with. 😉

  Hope that makes sense. 🙂

  Marked as helpful

  1

  

  Óscar Rabadán Martínez•150

  @OscarandioPosted over 2 years ago

  @ApplePieGiraffe Ok thanks to clarify! Have a nice coding~

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  @Oscarandio

  You too!

  1