interactive rating component using HTML CSS JS[ DOM MANIPULATION]

Community feedback

• 

  Adriano•310

  @adriano-wbPosted over 1 year ago

  O seu HTML está bem estruturado do jeito certo, mas ah algumas questões de acessibilidade que podem ser tratadas, aqui vai uma lista explicadinha para você :):

  1. Adicione um atributo alt descritivo para a imagem:

  <img src="/images/icon-star.svg" alt="Five stars rating icon" />
  

  2. Adicione um atributo aria-label para os botões de classificação, descrevendo claramente a função dos botões:

  <button class="rating" id="btn1" aria-label="1 star">1</button>
  

  3. Adicione um atributo aria-live para o elemento que contém a atualização da classificação, para que os usuários com deficiência visual possam receber feedback imediato:

  <div class="bot" aria-live="polite">
    <div class="rating-update">You selected 4 out of 5</div>
  </div>
  

  4. Considere fornecer um feedback tátil para os usuários que usam teclado para navegar pelos botões de classificação. Por exemplo, usando o CSS :focus ou JavaScript para mudar a cor ou o estilo do botão quando estiver em foco.

  5. Verifique se todo o conteúdo é acessível por meio de um teclado e se a ordem de tabulação faz sentido. Por exemplo, ao pressionar a tecla "Tab", a ordem deve ser a seguinte: botão 1, botão 2, botão 3, botão 4, botão 5, botão Enviar.

  6. Considere usar um esquema de cores que seja acessível para pessoas com daltonismo. Há ferramentas disponíveis online para verificar a acessibilidade das cores, como o site a11y.css.

  Marked as helpful

  0

  ---

  

  fakunle israel•470

  @maxibrain4Posted over 1 year ago

  @adriano-wb Thank you friend, i will take note

  0