Técnica Image Replacement

Durante o curso de html e css, foi lecionada uma técnica chamada image replacement, que consiste em adicionar uma imagem através do css e o texto é direcionado para outro lugar fora da página, com a utilização text-indent: -9999; Existe alguma prática que faça esse mesmo processo e que seja uma boa prática no HTML ? Abaixo o texto de exemplo: CSS

.icones-redes-sociais a{
    display: inline-block;
    width: 40px;
    height: 40px;
    text-indent: -99999;

}
.twitter {
    background-image: url(twitter.png);
}
.github {
    background-image: url(github.png);
    }
.linkedin {
    background-image: url(linkedin.png);
}

HTML

<ul class="icones-redes-sociais">
                <li>
                    <a class= "github"href="https://github.com/joaodasilva">
                        Git
                    </a>
                </li>
                <li>
                    <a class= "twitter"href="https://twitter.com/joaodasilva">
                        Twitter
                    </a>
                </li>
                <li>
                    <a class= "linkedin"href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                        Linkedin
                    </a>
                </li>
            </ul>