Cómo usar texto visualmente escondido
El siguiente método puede ser usado para darle a un elemento un nombre accesible. Un ejemplo donde puede ser útil es en un botón con un ícono que no tiene una etiqueta visible:
/* css */
.visualmente-escondido {
clip: rect(0 0 0 0);
clip-path: inset(100%);
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
/* html */
<button type="button">
<span class="visualmente-escondido">Buscar ingredientes</span>
<icon>
</button>