Se xa organizamos a estrutura da nosa web con <header> ou <main>, o seguinte paso é interactuar con ela. Aquí é onde moitos desenvolvedores caen nun erro común: facer que todo pareza o que non é.

1. Botóns vs. Ligazóns

A regra de ouro é sinxela:

• <a> (Ligazón): úsase para navegar. Se ao facer clic levas ao usuario a outra páxina ou a outra parte da mesma web, usa un <a>.
• <button> (Botón): úsase para accións. Enviar un formulario, abrir un menú despregable, reproducir un vídeo ou borrar un elemento.

2. O perigo de facer “botóns” con <div>

É moi tentador coller un <div>, poñerlle un fondo bonito con CSS e dicir: onclick="facerAlgo()". Pero para unha persoa que usa un lector de pantalla ou só o teclado:

• O teclado non o ve: Un <div> non recibe o foco coa tecla Tab. O usuario nunca chegará a el.
• O lector non sabe que é: O dispositivo non lle dirá ao usuario “isto é un botón”, polo que non saberá que pode interactuar con el.

Se podes usar un elemento nativo (<button>), úsao. Xa vén con toda a accesibilidade “de serie”.