Förenklad beskrivning av WCAG-kriteriet 1.4.13

Popup-funktioner ska kunna hanteras och stängas av alla

Innehåll, till exempel popup-rutor, som dyker upp vid tangentbordsfokus eller när användaren för muspekaren (hovrar) över ett visst objekt ska kunna uppfattas och hanteras av alla – även av användare som har förstorat sidan eller tar längre tid på sig att komma till innehållet. Det är särskilt viktigt att innehållet enkelt kan tas bort eller stängas.

Det kan till exempel gälla undermenyer, inforutor (tooltips) och icke-modala popup-fönster.

Tyvärr skapar sådant innehåll annars ofta tillgänglighetsproblem, till exempel för att:

  • användaren inte har aktiverat funktionen med avsikt,
  • användaren inte blir medveten om att det har dykt upp nytt innehåll eller
  • det nya innehållet stör användarens förmåga att genomföra en uppgift.

Rekommendationer för tillgängligt popup-innehållLänk hit

  • Överväg att presentera innehållet på något annat sätt.
  • Gör det enkelt att ta bort innehållet.
  • Gör det möjligt att hantera innehållet för alla.

Överväg att presentera innehållet på något annat sättLänk hit

Det finns ibland mer förutsägbara och tillgängliga sätt att presentera samma information eller funktionalitet. Till exempel genom att länka till en annan sida.

Om ni ändå väljer att ha den här typen av innehåll så tänk på följande:


Gör det enkelt att ta bort innehålletLänk hit

Innehållet måste gå att avvisa, så att det inte stör eller blockerar sidans ursprungliga innehåll. Det går att lösa till exempel genom tangentbordskommandot Escape eller en stäng-knapp. Ofta går det även att göra så att ett nytt klick på samma position som öppnade innehållet även stänger det. Implementera gärna alla dessa varianter om det går.


Gör det möjligt att hantera innehållet för allaLänk hit

Muspekare måste kunna flyttas: I vissa fall, till exempel om användaren har förstorat själva muspekaren kan denna skymma innehållet i en inforuta. Av den anledningen behöver det gå att föra muspekaren även över det innehåll som presenteras dynamiskt, utan att det försvinner, se exempel nedan.

Pekarsymbolen (en hand) döljer en hjälptext

En knapps tooltip visas men användaren har förstorat pekaren så att innehållet i själva tooltipen döljs av pilen. Användaren kan flytta pekaren över tooltipen utan att den försvinner så att texten blir synlig.

Ge även användare tillräckligt med tid för att de ska kunna ta till sig och uppfatta innehållet efter att det har blivit synligt. En användare kanske måste ändra förstoringen eller tar tid på sig för att förflytta sig dit.

Innehållet ska vara synligt tills:

  • Användaren tar bort muspekaren eller byter tangentbordsfokus från innehållet eller det som utlöste händelsen.
  • Användaren avfärdar innehållet genom ett tangentbordskommando eller stänga-knapp, se ovan.
  • Informationen inte längre är giltigt, till exempel ett meddelande om att “servern är upptagen”.

Riktlinjen gäller inte i de fall användaren själv styr över när innehållet visas eller inte, till exempel när webbläsaren visar title-attributet i HTML som ett tooltip. Modala fönster är också undantagna eftersom de inte visas och triggas av att muspekaren förs över eller vid tangentbordsfokus. Se även WCAG 3.2.1 Vid fokus.

Tänk på att innehåll som triggas genom att muspekaren förs över en viss punkt också ska kunna styras med hjälp av tangentbordet.


Utdrag från WCAG-standardenLänk hit

Riktlinje 1.4 Urskiljbart: Gör det enklare för användare att se och höra innehåll, bland annat genom att skilja förgrund från bakgrund.


1.4.13: Content on Hover or Focus:
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

Dismissable
A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;

Hoverable
If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;

Persistent
The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author. (Nivå AA)


TeminologiLänk hit

Mouseover eller hover är när muspekaren flyttas över en triggerpunkt, ett objekt eller ett teckenavsnitt och utlöser en händelse såsom att byta bild eller visa adressen till en länk (ofta längst ner i webbläsaren).

Inforuta, på engelska tooltip, är en ruta med text som visas när muspekaren förs över ett område. Det kan till exempel röra sig om hjälprutor.

En modal eller en dialogruta, på engelska dialog box, är ett fönster som öppnas ovanpå användargränssnittet och hindrar annan interaktion. De innehåller ofta ett felmeddelande eller information som användaren behöver ta ställning till genom att avbryta eller stänga fönstret. Termen lightbox förekommer även.

Pop-up window, pop-under window, eller extrafönster, har ett begränsat antal funktioner som öppnas ovanpå eller under ett redan öppnat fönster. De ligger ofta kvar tills de stängs manuellt, men kräver ofta ingen åtgärd av användaren.

 



Kommentarer (0)


    Om denna riktlinje

    Status på vår webbplats


    (Då uppdateras status i checklistorna.)

    Om WCAG

    WCAG (Web Content Accessibility Guidelines) är den standard som bland annat webbdirektivet bygger på. Se även webbriktlinje Följ WCAG 2.1 nivå AA (R1).

    WCAG 2.1 saknar ännu svensk översättning, men för de formuleringar som är identiska i version 2.0 och 2.1 citeras den officiella översättningen av version 2.0. Utdraget kan dock innehålla fel. Den version som är mest giltig vid uttolkning är det engelskspråkiga originalet på W3C:s webbplats.

    Där finns även de officiella förklaringarna och lösningsförslag till riktlinjen (på engelska).