Product preview card component solution

Community feedback

• 

  Bernardo Poggioni•5,280

  @R3ygoskiPosted 8 months ago

  Olá Guilherme, parabéns pelo seu projeto que ficou idêntico ao design proposto.

  Gostaria de te dar uma dica sobre algo que notei no seu HTML, primeiramente gostaria de dizer que não tem nada de errado nele, é apenas a falta de um pouco de acessibilidade.

  Geralmente quando estamos criando títulos, nós usamos apenas uma tag <h1>, pois isso cria uma estrutura mais correta da leitura de um site pelos leitores de telas.

  E a outra parte é sobre a div.img, como é uma div e você não poder usar o atributo de alt nela, você pode colocar um aria-label="Image of a Perfume " e um role="img", que assim você pode criar algo semelhante ao alt para essa div, o que ajuda bastante na acessibilidade.

  E também tem a parte do HTML semântico, como na parte de information, que poderia ser substituída por um article ou section, na parte de price não era necessário o uso de <h1> e <h2>, o mais semanticamente correto seria <p>, e no final, naquele <h5>, poderia também ser <p>.

  De resto é isso, seu projeto está muito bem feito e impecável, parabéns novamente.

  Edit: Esqueci de mencionar também que geralmente usamos as tags h's de forma hierárquica, evitando de pular de h1 para h3 por exemplo.

  Marked as helpful

  0

  ---

  

  Guilherme Alves•60

  @bitsbyguiPosted 8 months ago

  Obrigado pelo feedback, com certeza irei me aprimora ainda mais em html semântico! @R3ygoski

  1