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.
Beskrivning av video
En användare som navigerar med tangentbord besöker en sida på en webbplats som beskriver hur en beställning av pass går till.
- Sidan laddas och användaren börjar att tabba sig igenom sidan
- Det finns tydliga effekter som visar fokusmarkeringen visuellt
- En icke-modal dialog visas längst ner på sidan
- Användaren fortsätter tabba, fokus hamnar direkt på elementen i dialogen
- Användaren trycker bort dialogen.
- Fokus återvänder till början av sidan - men inte till den position där användaren befann sig innan dialogen öppnades
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.
1 Keyboard use: Dismissing the modal dialog
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.
Video description
A keyboard user opens the Website of the German Ministry of Traffic and Digital Infrastructure (bmvi.de).
- Immedialtely after accessing the start page, a cookie dialog pops up over the main navigation.
- The user repeatedly uses the TAB key to tab onwards in order to focus the OK button to dismiss the cookie info dialog.
- The user has to tab through the entire page until the OK -Button gets focused.
- The user hits ENTER to close the non-modal dialog.
It would be quicker to tab backwards to enter the end of the page and then tab upwards to reach the cookie info non-modal dialog, but this will not be obvious for most users.