Skip to content
OverviewSolutions
3
Comments
4
Ian Farias Paixão
@IanFarias

All comments

  • Ian Farias Paixão•90
    @IanFariasPosted about 2 years ago

    Olá Ana!

    Parabéns pela solução, muito bom!!

    Tenho alguns pontos e sugestões no qual você poderia ajustar:

    1. <button class="butt" id="buttao">2</button> <button class="butt" id="buttao">3</button> <button class="butt" id="buttao">4</button> O código possui três botões com o mesmo id. Id's devem ser unicos para garantir o controle correto do código, id's repetidos podem gerar até problemas relacionados à acessibilidade. Se você precisa de algum marcador para selecionar mais de um elemento do por vez, você pode usar uma class ou melhor ainda, atributos data-. Segue o link sobre atributos data-: https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Howto/Use_data_attributes

    2. O elemento de cabeçalho está apenas como h: <h class="title">How did we do?</h>. Deveria ser <h1>.

    3. Lembre-se sempre de colocar textos alt nas imagens para melhorar acessibilidade do seu código (imagens meramente ilustrativas sem informação relevante, podem ser ocultadas para leitores de tela adicionando o atributo aria-hidden="true", mesmo assim é recomendado a img possuir um texto alt também) e, possuir algum texto explicativo caso a imagem não carregue.

    4. Procure envolver seu código em tag's landmarks para melhorar a semântica do código. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role https://dequeuniversity.com/rules/axe/html/4.3/region?application=axeAPI

    Novamente, parabéns! Bons estudos!!

    Marked as helpful
    0
  • Ian Farias Paixão•90
    @IanFariasPosted about 2 years ago

    Hi!! Great solution! Congrats!!!

    I have a sugestion that you work on:

    • In this img element [ <img src="images/icon-cart.svg" class="btn-img"> ] , the alt text is missing. It is a best practice for accessibility that each image has alternative text, even for decorative images. In the case of decorative images, which are not relevant to screen readers, you can hide them by adding an aria-hidden="true" attribute.

    • In <div class="attribution"> you can replace the div with a footer element, to improve code semantics

    1
  • André Barbosa•40
    @andrebdasilvaSubmitted over 2 years ago

    I had a lot of difficulty in responsiveness. For example using the "Clamp(Min, Default, Max)" function, does anyone have any tips on how to use this better? the default value I used vw and px!

    I want feedback on my javascript. How would I refactor this code?

    I would like to know in this project how are the best practices?

    Interactive Rating Component - HTML, CSS, JS

    1
    Ian Farias Paixão•90
    @IanFariasPosted over 2 years ago

    Hi André!

    Great job! Congratulations!

    I have a few suggestions for you to think about:

    • Your rank numbers are just a <li>, and that's bad for accessibility. Users browsing with a screen reader cannot focus on the number and select it. It's a best practice to use radio buttons inside the <li>, or something that tells the screen reader that the element is selected and can be focused using keyboard navigation. Using the radio button has the advantage of not needing javascript to indicate who is selected, but it is just a suggestion.

    • The variable "listNumbers" apparently it's not being used.

    • Button with type="submit" are use to fire a submit event on a form. So to work better with HTML you can wrap the options and submit button in a <form> element.

    • `<div class="rating-select"> <p> You selected <span class="rating-result"> </span> out of 5 </p> </div>`` Again for accessibility, in this <p> element, a role="alert" can be added. That way, when the element appears on the screen, someone using a screen reader will be notified with that information. Reading suggestion: WAI-ARIA attributes.

    Marked as helpful
    2
  • Ian Farias Paixão•90
    @IanFariasPosted over 2 years ago

    Very good, congrats! I just have a few suggestions that I think you could work on. First of all, in the "add to cart" button, it's better to use the actually button tag's for acessibility. Because links (tag <a>) should be use when the click action redirect you to another page or place. And button's are for other actions that not necessarily redirects the user. Another thing is, it's better to try to represent in code what are you seeing in the layout, if something looks like a button, then it's probably one (not necessarily, but it's something to think about it). Last thing, always put some alt text in images, even if they are decorative. If the image is irrelevant to someone using a screen reader, you can hide it using aria-hidden="true".

    Marked as helpful
    0