Modala fönster

Ett modalt fönster dyker upp och placeras ovanpå den sida där användaren befinner sig när denne har utfört en åtgärd. Det modala fönstret inväntar därefter input från användaren och sidan bakom är inte åtkomlig. Ofta är bakgrunden även nedtonad.

Det modala fönstret kan ha flera syften: Det kan vara att be användaren välja ett av flera alternativt, för att bekräfta en åtgärd innan den utförs, för göra en ändring eller för att skriva en kommentar eller ett meddelande.

Demonstration av ett modalt fönster

Följande video visar ett typiskt modalt fönster.

Beskrivning av video

På sidan twitter.com (efter inloggning), öppnar knappen Twittra ett modalt fönster för inmatning av ett meddelande.

  • Användaren tabbar till knappen Twittra i det övre högra hörnet och aktiverar den med ENTER
  • Det modala fönstret öppnas med fokus i textfältet
  • Användaren skriver "Hello!" i textfältet
  • Användaren tabbar genom flera kontroller för att ta sig till knappen Twittra
  • Användaren aktiverar knappen Twittra med ENTER
  • Tweeten "Hello!" skickas och det modala fönstret stängs

Olika typer av modala fönster

Modala fönster eller dialogrutor är generellt sett vanliga element i applikationer. I webbaserat innehåll dök de först upp som små och grå systemgenererade meddelanden som skapades med metoder för varningar och bekräftelser i JavaScript.

Utseendet på dessa meddelanden var inte möjliga att anpassa och var mycket begränsade när det gällde innehåll, vilket är anledningen varför man började skapa anpassade modala fönster som lager med elementet div.

Det ökade behovet av att kunna visa webbinnehåll på mobila enheter har lett till en minskad användning av modala dialoger - åtminstone om en dialog ska uppfattas som ett pseudofönster ovanpå en aktiv sida. På webbplatser som optimerats för mobila skärmar består modala dialoger vanligtvis av mellanliggande vyer som visas i fullskärm.

Slutligen finns HTML5-baserade modala dialoger som bör kunna göra livet något enklare för både skapare av webbinnehåll och för användare. Tyvärr är webbläsarstödet för dessa än så länge för dåligt för att anses vara tillräckligt tillförlitliga att användas på webben (se nuvarande status för tillgänglighet i modala dialoger). Microsofts webbläsare Internet Explorer och Edge samt Apples webbläsare Safari, stöder än så länge inte HTML5-baserade modala dialoger fullt ut. Mozilla Firefox har förvisso stöd, men endast om användaren aktiverar stödet manuellt (vilket de flesta användare inte känner till). Det finns hur som helst en fix, dialog polyfill, som genererar modala dialoger i webbläsare som saknar inbyggt stöd (notera att vi inte har testat hur väl detta fungerar).

Typiska användbarhetsproblem med modala fönster

Följande exempel visar vanliga problem som användare med olika typer av funktionsnedsättningar kan råka ut för med modala fönster.

1 Användning med nedsatt syn: Hitta ett modalt fönster

Att använda hög förstoring innebär att modala fönster ofta öppnas helt eller delvis utanför det område som för närvarande syns på skärmen.

Beskrivning av video

En användare med nedsatt syn och Förstoringsglaset i Windows 10 på 700 %, använder Twitter (twitter.com). Användaren har loggat in och vill posta en tweet.

  • Användaren stänger sektionen för aviseringar som ber honom att validera sin e-postadress.
  • Han söker längs toppen av sidan mot höger, hittar knappen Tweet och klickar på denna.
  • På en nedtonad bakgrund öppnas ett modalt fönster där tweeten ska skrivas. Fönstret öppnas utanför det område som för närvarande förstoras på skärmen.
  • Användaren flyttar muspekaren, och det uppförstorade området följer efter.
  • Användaren upptäcker det modala fönstret med inmatningsfältet för att skriva in en tweet.

2 Användning med tangentbord: otydligt fokus, dålig fokushantering och namnlösa kontroller

Beskrivning av video

På sidan simplesite.com, som är ett verktyg för att visuellt skapa webbplatser, interagerar en användare som navigerar med tangentbord med en modal dialog för att välja element för webbinnehåll.

  • Användaren sätter fokus på knappen "ADD CONTNT", som inte visar någon visuell fokusmarkering, och aktiverar denna (se anteckning)
  • Dialogen öppnas
  • Användaren fortsätter att tabba, ingen fokusmarkering visas på knappen som beskrivs med ett x
  • Användaren tabbar vidare, ingen fokusmarkering visas på något av elementen
  • Användaren tabbar vidare och fokus försvinner nu ut från dialogen till webbläsaren Chromes adressfält
  • När användaren fortsätter att tabba passerar denne alla tabbningsbara objekt på sidan bakom dialogen

Notera: För att göra det enklare att följa vad som sker i exemplet ovan, har vi aktiverat en skärmläsare. En seende användare skulle inte veta var fokus är, och skulle därför inte kunna öppna dialogen - såvida inte hen använder en funktion för att tvinga fram en indikator som visar vilket objekt som har fokus.

Tillgänglighetstips för modala fönster

  • Gör modalen noterbar. Innehållet i ett modalt fönster visas inte initialt på sidan. För användare som inte ser är det viktigt att de märker när ett modalt fönster öppnas. Om det inte är korrekt uppmärkt, uppfattar inte användaren att det finns en modal.
  • Ge modalen ett meningsfullt namn och se till att namnet är åtkomligt för hjälpmedel när modalen öppnas.
  • Flytta tangentbordsfokus till modalen. För användare som navigerar med tangentbord (vilket inkluderar blinda användare), är det viktigt att tangentbordsfokus flyttas till det modala fönstret när det öppnas så att användaren kan interagera med innehållet.
  • Håll fokus inne i modalen. Tangentbordsfokus ska stanna i modalen tills att den är stängd.
  • När det modala fönstret stängs, flytta fokus tillbaka till det objekt som triggade modalen. När modalen stängs ska tangentbordsfokus flytta tillbaka till det objekt som orsakade att modalen öppnades.
  • Sätt etiketter på alla kontroller i en modal, även den knapp som stänger modalen. Varje modal ska ha en tydligt beskriven kontroll för att stänga modalen. Ofta har modala fönster ett litet kryss i det övre högra hörnet. Användare som kan uppfatta krysset visuellt vet att det stänger modalen. Stängningsknappen måste också ha en visuellt dold etikett som läses upp av skärmläsare så att blinda användare vet vad kontrollen gör.

Resurser för modala fönster