Vårstäda din webbplats: Dialogrutor

När våren kommer passar många på att storstäda hemma. Vi delar med oss av några tips på hur du kan ge din webbplats kodbas en vårstädning genom att gno bort gammal JavaScript-kod och ersätta den med putsade, moderna standardlösningar.

Fönsterputsskrapa skrapar bort kod framför en blå himmel

Dialogrutor

Dialogrutor eller fönster är ett lika kärt som problematiskt designmönster. Under internetboomen på nittitalet var det populärt att öppna nya fönster automatiskt när en webbsida laddades. Detta var så störande för användare att webbläsartillverkarna tog bort denna möjlighet. Användare måste idag godkänna att webbsidor får öppna nya fönster. Som svar på detta började utvecklare i stället att visa ett HTML-element utformat som en dialogruta på webbsidan, ovanför innehållet. Ett standard-element för att visa dialogrutor föreslogs redan kring 2009 men det var först 10 år senare som standarden var klar och webbläsarstödet var tillräckligt bra. Därmed finns det idag säkert tusentals olika JavaScript-lösningar för att visa dialogrutor. Det är väldigt vanligt att sådana lösningar inte fungerar med tangentbordsnavigation eller hjälpmedel som skärmläsare.

Genom att använda HTML dialog-elementet slipper du ladda in onödig JavaScript-kod. Det är vanligt att JavaScript-lösningar för dialogrutor innehåller flera hundra rader kod. Du unviker också att skapa tillgänglighetsproblem. Genom att använda standard-elementet säkerställer du att tangentbordsnavigation och fokusordning fungerar som förväntat och skärmläsare kan presentera att det är en dialog och meddela när den öppnas eller stängs.

Exemepel på HTML dialog

<button command="show-modal" commandfor="my-dialog">
  Öppna dialogruta
</button>

<dialog id="my-dialog">
  <p>Innehåll för dialogruta.</p>
  <button commandfor="my-dialog" command="close">Stäng</button>
</dialog>

En nyhet som kom så sent som förra året är att det numera går att öppna och stänga dialoger med endast HTML genom command- och command-for-attributen.

Se fler exempel på Dialog i vår CodePen-demo

Webbläsarstöd

Dialog-elementet har haft stöd i alla webbläsare i många år och är markerat som Baseline Widely available. Var försiktig med command-attributen då de är relativt nya och är markerade som Baseline Newly available. Dessa bör användas i kombination med ett polyfill.

Du hittar fler tips i artikelserien Vårstäda din webbplats.

Publicerad:
Andreas Nylin, porträtt

Andreas Nylin

Senior gränssnittsutvecklare och tillgänglighetsexpert