När vi tillgänglighetsgranskar webbplatser är en av alla de saker vi testar att sidan går att använda med endast tangentbordet. Enligt WCAG riktlinje 2.1 ska all funktionallitet vara åtkomlig med ett tangentbord.
En av de vanligaste anledningarna till att tangentbordsnavigering inte fungerar är att det inte är synligt vilket element på sidan som har fokus för tillfället - det element som är aktivt. När en användare klickar på en knapp är det tydligt att just den knappen är aktiv men när användare trycker på tab-tangenten för att förflytta sig genom sidan är det viktigt med en tydlig markering av var användaren befinner sig för tillfället.
Webbläsare har som standard en markering för fokus och det finns också en WCAG-riktlinje för synligt fokus. Det ser även ut som att nästa version av WCAG verkar skärpa kraven för synligt fokus. Fokusmarkering är i sitt standardutförande ofta mycket diskret vilket gör att den kan vara svår att urskilja. Fokusmarkering kan även döljas med CSS och tyvärr sker detta ofta. Många upplever fokusmarkeringen som ful och störande för användare som använder en mus och klickar på sidan, utan att tänka på att den är viktig för andra användare.
En lösning för detta problem har varit att använda JavaScript för att visa eller dölja fokusmarkering beroende på om användaren klickade med mus eller tryckte ner en tangent på tangentbordet. Det har i många fall fungerat bra men som alltid med speciallösningar tar det tid att utveckla och det finns risk att det leder till oväntade problem.
Ny CSS-pseudoklass: focus-visible
Det finns nu ett utkast till en ny CSS-pseudoklass för att lösa problemet med fokusmarkering: focus-visible. Genom att erbjuda olika sätt att markera fokus beroende på om användaren nyttjar mus eller tangentbord är tanken att formgivare inte ska behöva tveka att göra sidan tillgänglig med tangentbord på grund av estetiska överväganden för den som använder mus.
Till skillnad från den sedan tidigare existerande pseudoklassen focus så reagerar focus-visibile bara på om användaren använder tangentbord eller annat hjälpmedel för att navigera där det är viktigt att se vilket element som har fokus. Om användaren klickar med en mus eller trycker på en touchskärm kommer inte style-regler för focus-visible att tillämpas. Men focus-visible tar också hänsyn till inställningar i användarens webbläsare. En del webbläsare har inställningar för att alltid markera det element som har fokus. Om denna inställning har aktiverats kommer focus-visible även gälla vid klick och tryck.
Exempel på hur focus-visible används i CSS
/* Alla element får två pixlar svart ram vid fokus */
:focus-visible {
outline: black solid 2px;
}
/* A-element får två pixlar blå streckad ram vid fokus */
a:focus-visible {
outline: blue dashed 2px;
}Eftersom focus-visible är en ny teknik som i dag bara fungerar fullt ut i webbläsarna Chrome och Edge behöver den kompletteras med focus för att inte förstöra fokushatering för användare med äldre webbläsare.
/* Fokusmarkering för äldre webbläsare utan stöd för focus-visible */
:focus {
outline: blue dashed 2px;
}
/* Kontrollera om webbläsaren har stöd för focus-visible */
@supports (selector(focus-visible)) {
/* Dölj standard fokusmarkering för alla element */
:focus {
outline: none;
}
/* Vid behov får element som har fokus två pixlar blå ram */
:focus-visible {
outline: blue dashed 2px;
}
}Webbläsaren Firefox har ännu inte stöd för focus-visible men har pseudoklassen -moz-focusring som fungerar på samma sätt.