No curso de HTML5 e CSS3 parte I tem um capítulo que fala sobre semântica onde é mostrado um menu com alguns icones de redes sociais que até então eram carregados via tag img direto no HTML, porém o instrutor usa a técnica image replacement para dar semantica ao menu.
O código fica assim:
<ul class="icones-redes-sociais">
<li>
<a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin">
LinkedIn
</a>
</li>
</ul>Minha dúvida é se ao utilizar icon- fonts como no código abaixo há perda na questão de semântica, já que quando um leitor de tela for ler o ícone não haverá texto e sim uma tag vazia, eu queria saber também o que é mais usado hoje em dia para representar os ícones, image replacement, icons fonts ou a tag svg direto no html igual é utilizado no site do alura.
<ul class="icones-redes-sociais">
<li>
<a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
</ul>
