Hur - Hanterbarhet

Princip 2: Hanterbar - Komponenter i ett användargränssnitt och navigering måste vara hanterbara

Riktlinje 2.1

Tillgängligt via tangentbord: All funktionalitet ska vara åtkomlig med ett tangentbord. Krav i vänstra kolumnen och lösningsförslag i högra.
Krav Lösningsförslag
2.1.1 Tangentbord: All funktionalitet är hanterbar via ett gränssnitt för tangentbord utan att det krävs särskild timing för varje enskild tangenttryckning. Detta gäller med undantag för när den underliggande funktionaliteten kräver inmatning som är beroende av mönstret som skapas av användarens rörelser och inte bara slutpunkterna.
(Nivå A)

Anmärkning 1: Detta undantag gäller den underliggande funktionaliteten, inte sättet man matar in information. Om man exempelvis använder handskrift för att mata in text så kräver inmatningstekniken (handskrivning) mönsterberoende inmatning, men den underliggande funktionaliteten (textinmatning) kräver inte det.
Anmärkning 2: Detta förbjuder inte, och ska inte avskräcka från, att också använda styrning via mus eller andra inmatningsmetoder utöver tangentbordsstyrning.

Syftet med denna teknik är att använda vanliga formulärkomponenter och länkar för att erbjuda operationer via tangentbord och olika hjälpmedel ska fungera med interaktiva element i användargränssnittet.

Webbläsare fixar det. Dessutom ordnar de formulärkomponenter och länkar i en struktur enligt vissa regler som används av hjälpmedel (tillgänglighetsgränssnitt).

Hjälpmedel använder detta gränssnitt för att extrahera relevant information, som "role", "name", "state", and "value" och presentera dem för användaren.

 

 
2.1.2 Ingen tangentbordsfälla: Om tangentbordsfokus kan flyttas till en komponent på webbsidan via ett gränssnitt för tangentbord så kan också fokus flyttas bort från samma komponent med hjälp av ett gränssnitt för tangentbord. Om det krävs något mer än vanliga piltangenter, tabbtangenter eller andra standardiserade avslutningsmetoder för att flytta bort fokus så ska användaren informeras om hur det går till.
(Nivå A)

Anmärkning: Eftersom innehåll som inte uppfyller detta framgångskriterium kan hindra en användares möjlighet att använda hela sidan, så måste allt innehåll på webbsidan uppfylla detta framgångskriterium (oavsett om innehållet används för att uppfylla andra framgångskriterier eller inte). Se Uppfyllnadskrav 5: inte störande.

Se till att tangentbordsfunktionen för att främja fokus på innehåll (vanligen tabbtangenten) lämnar en delmängd av innehållet efter att den nått den sista navigationsplatsen.

Riktlinje 2.2

Tillräckligt med tid: Ge användaren tillräckligt med tid för att läsa och använda innehållet. Krav i vänstra kolumnen och lösningsförslag i högra.
Krav Lösningsförslag
2.2.1 Justerbar tidsgräns: För varje satt tidsgräns gäller minst ett av följande:
(Nivå A)

  • Stänga av: Användaren tillåts stänga av tidsgränsen i förväg, eller
  • Anpassa: Användaren tillåts justera tidsgränsen i förväg över ett brett intervall som är minst 10 gånger längden på den ursprungliga inställningen, eller
  • Utöka: Användaren varnas innan tiden går ut och ges minst 20 sekunder för att förlänga tidsgränsen genom en enkel handling (t ex "tryck ner mellanslagstangenten"). Användaren tillåts förlänga tidsgränsen åtminstone 10 gånger, eller
  • Undantag: realtid: Tidsgränsen är nödvändig för händelser i realtid (t ex auktioner), och inga alternativ till tidsgränsen är möjliga, eller
  • Undantag: avgörande betydelse: : Tidsgränsen har avgörande betydelse och att förlänga den skulle göra hela aktiviteten ogiltig, eller
  • Undantag: 20 timmar: Tidsgränsen är längre än 20 timmar.
Anmärkning: Detta framgångskriterium säkerställer att användarna kan fullfölja uppgifter utan oväntade förändringar av innehåll eller sammanhang som är resultatet av en tidsgräns. Detta framgångskriterium ska beaktas i samband med framgångskriterium 3.2.1, vilket sätter gränser för förändringar av innehåll eller sammanhang som är resultatet av användarnas agerande. 		Lägg till en kryssruta för att erbjuda att utöka tiden, eller lägg till ett flertal radioknappar som erbjuder valfri tid ("1 minut", "2 minuter", "5 minuter", "10 minuter").
2.2.2 Paus, Stopp, Dölj: För information som rör sig, blinkar, rullar eller uppdateras automatiskt gäller samtliga punkter:
(Nivå A)

  • Rörelse, blinkning, rullning (scrolling): För varje rörelse, blinkning eller rullning som (1) startar automatiskt, (2) pågår i mer än 5 sekunder, och (3) presenteras tillsammans med annat innehåll, finns det en metod/funktion för att pausa, stoppa eller dölja dessa, så länge inte rörelsen, blinkningen eller rullningen har en avgörande betydelse för en aktivitet, och
  • Automatisk uppdatering: För automatiskt uppdaterad information som (1) startar automatiskt och (2) presenteras tillsammans med annat innehåll finns det en metod/funktion för att pausa, stoppa eller dölja den eller en metod/funktion för att kontrollera uppdateringsfrekvensen. Detta gäller förutom om den automatiska uppdateringen har en avgörande betydelse för en aktivitet.
Anmärkning 1: För krav som rör flimmer, se Riktlinje 2.3.

Anmärkning 2: Eftersom innehåll som inte uppfyller detta framgångskriterium kan hindra en användares möjlighet att använda hela sidan, så måste allt innehåll på webbsidan uppfylla detta framgångskriterium (oavsett om innehållet används för att uppfylla andra framgångskriterier eller inte).

Anmärkning 3: I innehåll som uppdateras av mjukvara inom vissa intervall eller som strömmas till användarprogrammet behöver inte informationen som genererats eller tagits emot under pausen sparas eller presenteras, då detta kan vara tekniskt omöjligt och i många situationer missvisande.

Anmärkning 4: En animation som är en del av en inladdningsfas eller liknande, kan betraktas ha avgörande betydelse om användarna inte kan interagera under den fasen och om utebliven visualisering av processen skulle kunna förvirra användarna eller få dem att tro att innehållet har "frusit" eller att koppningen mot innehållet har brutits.

Målet med dessa lösningar är att erbjuda olika vägar att pausa information som rör sig på något sätt.

Om användaren behöver mer tid för att läsa och ta del av innehållet eller om rörelsen är distraherande så ska man kunna pausa och starta igen.

Detta kan ordnas av knappar eller tangenttryckningar. Om snabbkommandon med tangentbord utnyttjas ska det informeras om det.

  • En webbsida med scrollande "banner". Användare som inte hinner läsa kan trycka på "Escape" för att pausa och starta igen med att trycka "Escape".
  • En webbsida som har en länk med namnet "Hur lagar man pannkaka" som länkar till en animation. En liten text följer direkt efter länken där det instrueras om att mellanslag(blanksteg) pausar och startar.

En enda knapp eller styrmöjlighet kan stoppa allt som rör sig påsidan eller så har man en styrmöjlighet för varje del som rör sig. Styrmöjligheten placeras antingen högst upp eller intill den del som rör sig.

Om en blinkande bild startar vid inladdning men stannar automatiskt inom 5 sekunder så behövs ingen åtgärd.

Riktlinje 2.3

Krampanfall: Designa inte innehåll på ett sätt som kan orsaka krampanfall. Krav i vänstra kolumnen och lösningsförslag i högra.
Krav Lösningsförslag
2.3.1 Tre flimmer eller under tröskelvärde: Webbsidor innehåller inget som flimrar mer än tre gånger under en ensekundsperiod, eller så ligger flimret under de generella tröskelvärdena för flimmer och rött flimmer.
(Nivå A)

Anmärkning : Eftersom innehåll som inte uppfyller detta framgångskriterium kan hindra en användares möjlighet att använda hela sidan, så måste allt innehåll på webbsidan uppfylla detta framgångskriterium (oavsett om innehållet används för att uppfylla andra framgångskriterier eller inte).

Målet här är att undvika blinkande delar som är ljusa och kraftiga samt blinkar med en frekvens som kan orsaka krampanfall.

Eftersom vissa användare använder skärmförstoring så ska inget blinkande innehåll oavsett storlek blinka snabbare än 3 gånger per sekund.

 

Riktlinje 2.4

Navigerbart: Tillhandahåll sätt att hjälpa användarna att navigera, hitta innehåll och avgöra var de är. Krav i vänstra kolumnen och lösningsförslag i högra.
Krav Lösningsförslag
2.4.1 Hoppa över grupperat innehåll: Webbsidor har titlar som beskriver ämne eller syfte.
(Nivå A)

Meningen här är att erbjuda en möjlighet att hoppa till det väsentliga på en webbsida. Detta gäller framför allt då flera sidor har liknande startdelar och sidorna har en viktig del (inte ett antal delar av samma relevans). Det ska inte heller finnas flera navigeringsmenyer på webbsidan.

Vi placerar en länk tidigt på sidan innan andra interaktiva komponenter för hopp till början den viktiga delen. Till exempel "Hoppa direkt till viktigaste innehållet på sidan".
2.4.2 Sidans titel: Det finns ledtexter/etiketter eller instruktioner när innehåll kräver inmatning från användaren.
(Nivå A)

Alla webbsidor har ett "title"-element i "head"-elementet. Denna titel ska ha en enkel fras som definierar innehållet på webbsidan.

OBS! Skilj på "title"-elementet som finns endast en gång i varje dokument med "title"-attributet som nästan kan sättas på alla html-element.
2.4.3 Fokusordning: Om man kan navigera stegvis på en webbsida och navigeringsordningen påverkar betydelse eller användning, så ska fokuserbara komponenter få fokus i en ordning som bevarar betydelse och användning.
(Nivå A)

Skapa en naturlig logisk ordning på innehållet. Vill du ändra i logiken så att tabb-ordningen följer relationen mellan delar i innehållet istället för att följa den naturliga ordningen på alla interaktiva element så använd "tabindex".

Ge "tabindex" ett värde mellan 0 och 32767 och på så sätt ordna en ny ordning när man tabbar sig genom sidan.

Exempel

  • En webbsida innehåller ett sökfält i övre högra hörnet. Ge sökfältet tabindex="1" så det är dit man kommer först, även om sökfältet ligger först i html-koden.

  • Ett "tabindex" kan ha samma värde på flera element. I det fallet blir ordningen på dessa element som de ligger i koden. Det kan vara lämpligt när man har ett antal element som hör ihop och om de ska flyttas så flyttas alla med samma inbördes ordning.

    <a href="xxx" tabindex = "1">First link in list</a>
    <a href="xxx" tabindex = "1">Second link in list</a>
     ...
    <a href="xxx" tabindex = "1">Eleventh link in
2.4.4 Syftet med en länk (i sammanhanget): Syftet med varje länk framgår av länktexten i sig själv eller av länktexten tillsammans med sitt automatiskt tydliggjorda länksammanhang, utom då syftet med länken skulle vara tvetydigt för användare i allmänhet.
(Nivå A)

Skriv en tydlig text till länken.

Förtydliga med "title"-attributet.

Exempel

<a href="
http://www.tex.se/afrika/elefant.html" title="En sammanställning över elefanternas utveckling i Kenya sedan 1950">Info om elefanter</a>
2.4.5 Flera olika sätt: Det finns mer är ett sätt att hitta en webbsida inom en uppsättning av webbsidor, utom när webbsidan är ett resultat av eller ett steg i en process.
(Nivå AA) 		Erbjud länkar till relaterade webbsidor.
Erbjud en sitemap.
Erbjud en lista på alla länkar i sajten.
Erbjud en sökfunktion på sidan.
2.4.6 Rubriker och ledtexter/etiketter: Rubriker och ledtexter/etiketter beskriver ämne eller syfte.
(Nivå AA)
 Se till att skriva rubriker och labels som beskriver innehållet.
2.4.7 Synligt fokus: Användargränssnitt som styrs via tangentbord har ett sätt att visa var fokus är vid tangentbordsnavigering.
(Nivå AA)

Första delen här är att försäkra sig om att element som får fokus på webbsidan kan bli visuellt identifierade genom att vi litar på webbläsarens inbyggda support för detta. Vanligtvis får de någon typ av markering när de får fokus.

Exempel på fokus

  • Ett textfält får en blinkande vertikalt streck inuti textfältet för att visa inmatningspunkt.

  • När länkar får fokus så får de en puntad rektangel runt sig.

Den andra delen nedan visar hur vi kan förstärka det visuella när ett element får fokus eller när en användare för markören över elementet.

Ett visuellt förtydligande gör det enklare att se att element är interaktivt.

 

Exempel

Förtydliga när en länk får fokus eller markören förs över länken.

<ul>
<li><a href="banan.html">Banan</a></li>
<li><a href="apelsin.html">Apelsin</a></li>
<li><a href="citron.html">Citron</a></li>
</ul>

Vi markerar extra då länken får mus eller tangentbords fokus.

a:hover, a:active, a:focus {
background-color:#cff;
color:#006;
}

 

Exempel

Förtydliga när ett textfält får fokus genom att ändra bakgrundsfärg.

<p>
<label for="fname">Name: </label>
<input class="text" type="text" name="fname" id="fname" />
</p>

<p>
<input type="radio" name="sex" value="male" id="sm" />
<label for="sm">Male</label><br />
<input type="radio" name="sex" value="female" id="sf" />
<label for="sf">Female</label>
<p>

input.text:focus {
background-color: #0f0;
color: #000;
}

input[type=radio]:focus + label {
background-color: #ff6;
color: #000;
}