3-column preview card component

Community feedback

• 

  Bernardo Poggioni•6,790

  @R3ygoski

  Posted about 1 month ago

  Olá Guilherme, parabéns pela conclusão do desafio, ele está muito bem-feito.

  Uma dica quanto ao HTML, quando se tem imagens que não tem importância ou são apenas ícones, não passamos um alt descritivo, nós o passamos vazio, dessa forma: alt="".

  E uma observação, os headings estão na cor preta, não sei se isso foi proposital ou não, já que até cheguei a ver que no seu último projeto antes desse, também tinha um heading na cor preta. Bom isso não é um problema, mas no caso desse projeto pode causar uma estranheza de design, já que todos os textos são brancos com exceção do título.

  Sobre acessibilidade sobre contraste dessa cor de título, note que a cor preta no segundo card não desempenha tão bem no WCAG 2.1, e no terceiro card nem sequer cumpre os requisitos mínimos.

  Obs.: Isso também ocorre no seu outro projeto, na parte de título (seu nome) e na descrição.

  Uma recomendação sobre SEO é sempre de utilizar a tag <h1> na página, nesse caso você pode colocar o <h1> fora dos cards e adicionar esse estilo ao seu título:

  h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  

  Isso irá deixá-lo invisível, não irá interferir no layout e vai permitir que leitores de tela consigam ler esse <h1>.

  E é isso! Novamente parabéns pela conclusão do desafio, continue praticando e se aprimorando, e caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.

  02

  Marked as helpful