Icke-modala fönster

Ett icke-modalt fönster "hoppar upp" på en sida, ibland triggas den av själva sidan eller av en händelse utförd av användaren. Sidan bakom är fortfarande åtkomplig, men är nu delvis täckt av det modala fönstret.

Den modala fönstret kan ha olika syften: det kan innehålla en fråga till användaren om att acceptera cookis, efterfråga användarens synpunkter, erbjuda användaren att delta i en undersökning eller ha annat innehåll.

Demonstration av ett icke-modalt fönster

Följande video visar ett typiskt icke-modalt fönstret som triggats på av webbplatsen, och inte av användaren.

Vilka egenskaper har icke-modala dialoger?

Det finns olika definitioner på vad ett icke-modalt fönster är. Det är inte alltid lätt att dra en gräns.

För vissa är den huvudsakliga egenskapen av en dialogruta, oavsett om den är modal eller inte, att tangentbordsfokus cirkulerar inom den (alltså att den innehåller en tabloop), vilket innebär att utvecklare måste se till att fokus hamnar i dialogfönstret när det öppnas.

 

Ett annat synsätt är att den huvudsakliga funktionen av ett icke-modalt fönster att det hoppar upp och täcker annat innehåll på sidan utan att hindra att användaren kommer åt annat innehåll på sidan. Genom att tabba utanför dialogrutan eller klicka någonstans utanför stänger dialogrutan.

En annan aspekt att ha i åtanke är om det innehåll som hoppar upp på skärmen är utformat som ett formulär (och att det tydligt framgår att det är en dialogruta), eller är mer informationsorienterad, som typ en avisering om cookies. In det senare fallet, är attribute role satt till värdet region troligen mest lämpligt snarare än en role="dialog", men gränsen är inte alltid tydlig.

Om den icke-modala dialogen förväntas fortsätta vara åtkomlig för användaren, behöver den en mekanism för att flytta fokus till andra delar av sidan och även tillbaka till dialogrutan. ARIA Authoring Practices 1.0 (som man senare har frångått) föreslår att F6-tangenten ska användas för att åstadkomma detta. Andra lösningar har varit att använda tangenterna CTRL + TAB.

Avisering om cookies

Innehåll som triggas av sidan efter att den har laddats in (som aviseringar om cookies) eller efter en viss fördröjning (som kundundersökningar) är väldigt vanliga och kan vara en plåga för användare som navigerar med tangentbord. Vissa dialogrutor som påminner om kundundersökningar, fångar fokus men andra gör det inte. De flesta cookie-aviseringar fångar inte fokus alls utan undviker att oväntat ändra användarens kontext. Vi tar upp detta här under icke-modala dialoger i brist på ett avsnitt där det passar bättre.

Toast-aviseringar

Det finns en typ av meddelanden som genereras av webbsidan och som automatiskt döljs efter några sekunder (så kallade toast-aviseringar). Sådana meddelanden kan exempelvis innehålla information som "Din inmatning har sparats." eller "Formuläret har skickats." eller liknande. Dessa är definitivt inte icke-modala-dialoger.

 

 

 

Togglings-tips

Togglings-tips eller statusmeddelanden visas vid aktivering av knappar och täcker även den aktuella sidans innehåll, men de innehåller inga aktiva interaktiva element som behöver få fokus. Därför kan dessa meddelanden läsas upp med hjälp av attributet aria-live när innehållet väl har blivit synligt. Jämför med kapitlet om toppglings-tips i Heydon Pickerings Tooltips & Toggletips.

Användargenererade popup-rutor med interaktiva element

En annan typ av innehåll är popup-rutor som visas vid aktivering av inbäddade länkar, exempelvis popup-rutor i ordlistor som innehåller knappar för att stänga rutorna eller "Läs mer"-länkar, men som stängs automatiskt när användaren tabbar till eller klickar på objekt utanför popup-rutan. Dessa är mer komplexa än toggle-tips. De möter inte kriteriet med en tabloop, men vi tar ändå upp dem här som icke-modala dialoger.

Utfällbara objekt

Utfällbara objekt aktiveras också av någon typ av trigger som oftast är en togglingsknapp som visar eller döljer innehåll. De innehåller inte heller någon tabloop och flyttar oftast ner innehåll snarare än att dölja det. Fokus ligger ofta kvar vid det objekt som triggade dialogen vilket är ok om det visas följer direkt efter det objekt som fäller ut innehållet (se sidan om utfällbara objekt).

Megameny

Andra användargenererade objekt (som ibland kallas för megamenyer) kan täcka det mesta av en sida, but fångar normalt sätt inte fokus och stängs inte automatiskt när användaren tabbar utanför eller klickar på något objekt utanför megan. De kan betraktas som ett mellanting av utfällbara objekt och icke-modala dialoger.

Typical usability problems with non-modal dialogs

The following examples show the types of problems that users with different disabilities get when using non-modal dialogs.

For keyboard users, it can be very annoying to locate and dismiss the non-modal dialog - especially when the focus order does not match the visual order.