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

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.