Interaktive elementer

Hva er problemet?

HTML-standarden forbyr nøsting av interaktive elementer. Det betyr at du ikke kan ha en knapp inni en lenke, eller en lenke inni en knapp.

<!-- UGYLDIG -->
<a href="/side">
  <div>
    <h2>Tittel</h2>
    <button>Klikk meg</button> <!-- Feil! -->
  </div>
</a>

Hvorfor er dette viktig?

• Nettlesere blir forvirret: Hva skal skje når du klikker? Skal den følge lenken eller trykke på knappen? Resultatet varierer mellom nettlesere.
• Hjelpemidler feiler: Skjermlesere klarer ofte ikke å navigere eller aktivere det innerste elementet.

Hvordan fikse det?

Omorganiser HTML-en din slik at interaktive elementer ligger ved siden av hverandre, ikke inni hverandre. Bruk CSS posisjonering hvis du vil at de skal se ut som de ligger oppå hverandre.

Hvis du vil at "hele kortet" skal være klikkbart, men også ha en egen knapp inni:

1. La lenken bare dekke tittelen.
2. Bruk CSS (f.eks. ::after på lenken som dekker hele kortet) for å gjøre hele området klikkbart.
3. Sørg for at den indre knappen har høyere z-index slik at den fortsatt kan klikkes separat.