Visuellt fokus

På Funka hade vi redan börjat mäta och kontrollera mycket av det som är ”nyheter” i WCAG 2.0 långt innan riktlinjerna var färdiga. I och med lanseringen av WCAG 2.0 kan vi nu också peka på ett formellt stöd för våra rekommendationer.

En av de ”nyheter” som bör kunna föras in på webbplatsen utan större problem är visuellt fokus. Funka ger gratis tips om hur och varför.

Vad är visuellt fokus?

Visuellt fokus innebär att det objekt på sidan som just nu har fokus markeras tydligt. Det gäller oftast länkar, knappar och formulärsobjekt, men i och med en ökad användning av RIA (Rich Internet Application) och ARIA (Accessible Rich Internet Application) kan fler typer av objekt ha fokus, exempelvis texter, bilder, rörliga gränssnitt med mera. Tanken med den nya WCAG-punkten (2.4.7) är att säkra att det är visuellt tydligt var fokus är.

Det enklaste exemplet på detta är en användare som navigerar med tangentbordet. Användaren flyttar från länk till länk på sidan genom att upprepade gånger trycka på Tabb-tangenten på tangentbordet. För att då kunna se var man befinner sig behöver länken markeras. Det kan ske på olika sätt.

Markering i webbläsaren

Meny med markerat fokus i form av en tunn linje runt menyknappen. SkärmbildMånga webbläsare markerar länkar och knappar som har fokus genom att rita en tunn, prickad linje. Detta kan i princip tolkas som tillräckligt för att punkt 2.4.7 i WCAG ska vara uppfyllt så länge bakgrunden inte gör att linjen döljs, men vi anser att det inte är tillräckligt. Användaren ska inte behöva lita på att en webbläsare gör denna förändring och ska inte behöva se så bra att de upptäcker en extremt tunn linje. Se exemplet till höger.

De webbläsare som är bäst på att markera fokus är de som används i mobiltelefoner som saknar tryckkänslig skärm. Här förflyttar sig användaren från länk till länk med pilarna på telefonen. Detta brukar markeras mycket tydligt med en invertering av länk och bakgrund.

Markering i stilmallarna

Vi rekommenderar att webbplatsen i stilmallarna anger hur fokus ska markeras. Det gör att webbplatsen blir oberoende av webbläsarversion och alltid markerar fokus tydligt. Du kan i stilmallarna ange att exempelvis färg och bakgrundsfärg på länken med fokus ska inverteras:

 a {background-color: #FFF;
color:#000088;
}
 a:hover, a:active, a:focus {
background-color: #000088;
color:#FFF;
}

Länken ser då ut så här utan fokus: 

En blå understukem länk. Skärmbild

…och så här när den har fokus:

En länk med blått fokus. Skärmbild
 
Andra sätt att markera aktiva områden är exempelvis med understrykning eller en ram. I exemplet nedan markeras det menyalternativ som just nu har fokus med en understrykning:

Mrny med understruken länk. Skärmbild

Dolda länkar

Sedan lång tid tillbaka rekommenderar vi att webbplatser förses med minst en dold genväg som flyttar användaren från sidhuvudet till sidans innehåll, förbi menyerna. Tanken med detta är dels att gravt synskadade användare ska hitta var innehållet börjar och dels att seende användare som navigerar med tangentbordet inte ska behöva tabba igenom hela menysystemet på alla sidor.

Även denna typ av dolda genvägar ska visas visuellt tydligt när användaren tabbar till dem, alltså när de har fokus. Detta kan dock kräva lite mer jobb än att bara markera de synliga länkarna på webbplatsen eftersom det någonstans i sidhuvudet måste finnas plats att faktiskt visa länkarna.

Funka tipsar

  • Teckenspråk, textning och syntolkning

    Vi har skrivit en liten manual om teckenspråk, textning och syntolkning. Vad är det som gäller och när? Vilka användare har behov av vad? Finns det några undantag? Hur gör man? Det försöker vi svara på.
  • Tjäna på tillgänglighet

    Tillgänglighet på internet innebär både kundnytta och användarnytta. Vi har samlat några argument för teknisk tillgänglighet som kompletterar det självklara - nämligen att fler kan använda en tillgänglig webbplats.
  • Låt besökaren använda bilder!

    Det är inte bara Funka som tipsar om tillgänglighet. Våra testanvändare kommer ofta med smarta idéer. Den här gången handlar det om att låta bilderna tala.
  • Hjälp användaren när det blir fel

    Om du skriver begripliga felmeddelanden hjälper du besökaren att göra rätt. Det finns riktlinjer att följa. Funka tipsar om hur du ska göra.
  • Visuellt fokus

    Visuellt fokus är en nyhet i WCAG 2.0 men egentligen en rekommendation som funnits länge. Funka reder ut vad som gäller och berättar hur du ska göra för att generera visuellt fokus.
  • Även texter behöver luft

    Språkexpert Karin Forsell tipsar om att ge texten struktur för att underlätta läsningen.
  • Var personlig med din läsare

    Språkexpert Karin Forsell vill att du skriver direkt till din läsare.
  • Enkla ord kan vara svåra

    Språkexpert Karin Forsell tipsar om att fundera på vilka ord vi använder av bara farten.
  • Test och format

    Funkas tillgänglighetsexpert Andreas Cederbom om hur man testar och använder pdf-dokument på ett bra sätt på webben.
  • Formulär - nyckeln till interaktion

    Idag finns det fler webbformulär på internet än någonsin. Många organisationer har förstått nyttan och möjligheterna med att användaren själv kan utföra uppgifter på webbplatsen. Problemet är att formulären ibland inte är anpassade till webben som kanal.
  • Gå igenom och städa er webbplats

    Efter ett tag har alla webbplatser till viss del degenererat i form av att länkar börjar se lite olika ut på olika ställen av webbplatsen även om det är samma typer av länkar och så vidare. Det är därför bra att med jämna mellanrum gå igenom
  • Om sökmotorer och sökträfflistor

    Många frågor vi får handlar om sökmotorer, vilka är bra, hur många användare använder dem osv. Därför ägnar jag ytterligare en tipsomgång åt dessa frågor. En av de vanligaste frågorna är hur en bra sökträfflista ser ut.
  • Låt datorn göra jobbet!

    Att arbeta effektivt och strukturerat med webbplatsen bidrar till att webbplatsen fungerar bättre. Många gånger blir informationen på webbplatsen något som man lägger ut lite snabbt när man kommer på att det som står där inte är uppdaterat,
  • Rensa bort onödig information

    Vi har tidigare talat om statistik från webbplatsens sökmotor. Det finns ofta annan statistik att tillgå från servern där webbplatsen finns. Ofta fokuseras på vilka sidor som är mest besökta, ”Högst hitrate”.
  • Planera webbplatsens uppdateringar

    Vill användare samma sak med er webbplats i april som i september, vill de samma sak morgon och kväll? Finns det säsongsvariationer i vad användarna vill ha?
  • Trimma sökmotorn

    Är er sökmotor optimal? Många sökmotorer har möjlighet att fördefiniera sökningar. Det går att manuellt ställa in svar på sådant som man vet att användarna kommer att söka efter. Gör man denna typ av inställningar är det viktigt att dessa manuellt
  • Lyssna på dina användare

    Det är viktigt att ha ett system för att fånga upp idéer och förslag på vidareutveckling kontinuerligt. Det är trots allt användarna som använder systemet och de har därför mycket bra information som är synd att gå miste om.
  • Möjliggör en dialog med användarna

    Detta är grunden för all förvaltning. Vanligt är att förvaltningsorganisationen sitter avskilt och inte har någon direktkontakt med slutanvändarna. Detta mönster måste brytas och förvaltarna måste få en kontinuerlig kontakt med användarna.
  • Hur gör jag min röst hörd internt?

    Funkas tillgänglighetsexpert Andreas Cederbom tipsar om hur man med list och knep kan se till att få gehör för tillgänglighetsfrågorna i en motsträvig organisation.
  • Extrafunktioner

    När du är färdig med det grundläggande tillgänglighetsarbetet är dags att ägna sig åt extrafunktioner för ökad tillgänglighet: teckenspråk, Talande Webb och språkligt bearbetad information är exempel på extra funktionalitet för ökad tillgänglighet.
  • Pdf och tillgänglighet

    Funka får en del frågor om pdf som format. När ska pdf användas och hur pass tillgängligt är det?
  • Tio tips till redaktörer

    Funkas tio tips till webbredaktörer är så populära att vi har låtit trycka upp dem som musmatta!