Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Qual a forma mais correta de adicionar um icone dentro de um input?

Referente ao curso React: estilize componentes com Styled Components e manipule arquivos estáticos, no capítulo Componentes iniciais e fontes e atividade Desafio: input estilizado

por Pedro Augusto Adão Silva
| 18.1k xp | 16 posts

A principio coloquei o ícone da lupa como um background=image do input assim: 

input{
    max-width: 602px;
    background: transparent;
    border: none;
    padding: 12px 18px;
    /*background-repeat: no-repeat;
    background-image: url('public/icones/search.png');
    background-position: center right;
    background-size: 30px;*/
}

mas fiquei apreensível quanto a acessibilidade do site e adicionei uma tag img com o endereço do ícone da lupa e define como absolute assim: 

img{
    position: absolute;
    right: 10px;
}

ambos me trouxeram o mesmo resultado estético, mas quanto a acessibilidade na segunda opção eu pude descrever a imagem da lupa pela propriedade alt, devo priorizar a segunda forma ou não faz diferença no quesito da acessibilidade do site?

1 resposta
solução!
por Lorena Garcia
| 8260.5k xp | 12081 posts
Alura Scuba Team Suporte Educacional

Oi Pedro, tudo bem?

A primeira opção que você mencionou, de usar o ícone como um background-image, é uma prática comum e funciona bem para a maioria dos casos. No entanto, como você mesmo mencionou, ela não é a melhor escolha quando pensamos em acessibilidade. Isso porque, os leitores de tela (ferramentas usadas por pessoas com deficiência visual para navegar na web) não conseguem acessar ou descrever imagens que são definidas como background.

A segunda opção, de usar uma tag img com um atributo alt descritivo, é definitivamente a melhor escolha quando pensamos em acessibilidade. O atributo alt é lido pelos leitores de tela e fornece uma descrição do conteúdo da imagem para aqueles que não conseguem vê-la. Além disso, em caso de algum problema no carregamento da imagem, o texto alternativo será exibido.

Então, se a acessibilidade é uma preocupação para o seu projeto (e deveria ser para todos os projetos), eu recomendaria que você use a segunda opção.

Lembre-se, o atributo alt da tag img deve ser descritivo e significativo.

Um abraço e bons estudos.