interactive rating component using HTML CSS JS[ DOM MANIPULATION]
Design comparison
Solution retrospective
Your feedbacks are welcomed
Community feedback
- @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 helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord