Detta kommer att bli det andra inlägget i en liten serie vi gör om formulärtillgänglighet. Om du missade det första inlägget, kolla in Tillgängliga formulär med pseudoklasser. I det här inlägget kommer vi att titta på :focus-visible och hur du använder det på dina webbplatser!

Fokusera Touchpoint

Innan vi går vidare med :focus-visible, låt oss återkomma till hur :focus fungerar i din CSS. Fokus är den visuella indikatorn på att ett element interageras med via tangentbord, mus, styrplatta eller hjälpmedel. Vissa element är naturligt interaktiva, som länkar, knappar och formulärelement. Vi vill se till att våra användare vet var de är och vilka interaktioner de gör.

Kom ihåg att inte göra detta i din CSS!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

När du tar bort fokus tar du bort det för ALLA! Vi vill se till att vi behåller fokus.

Om du av någon anledning behöver ta bort fokus, se till att det också finns en fallback :focus stilar för dina användare. Denna reserv kan matcha dina varumärkesfärger, men se till att dessa färger också är tillgängliga. Om marknadsföring, design eller varumärkesbyggande inte gillar standardstilarna för fokusring, är det dags att börja föra konversationer och samarbeta med dem om det bästa sättet att lägga till det igen.

Vad är focus-visible?

Pseudoklassen, :focus-visible, är precis som vår standard :focus pseudoklass. Det ger användaren en indikator på att något fokuseras på sidan. Sättet du skriver :focus-visible skärs och torkas:

:focus-visible {
  /* ... */
}

När man använder :focus-visible med ett specifikt element ser syntaxen ut ungefär så här:

.your-element:focus-visible {
  /*...*/
}

Det fantastiska med att använda :focus-visible är du kan få ditt element att sticka ut, ljusa och djärva! Du behöver inte oroa dig för att det ska visas om elementet klickas/knackas. Om du väljer att inte implementera klassen kommer standarden att vara användaragentens fokusring vilket för vissa är oönskat.

Bakgrund till focus-visible

Innan vi hade :focus-visible, skulle användaragentens stil gälla :focus till de flesta element på sidan; knappar, länkar etc. Det skulle applicera en kontur eller "fokusring" på det fokuserbara elementet. Detta ansågs vara fult, de flesta gillade inte standardfokusringen som webbläsaren gav. Som ett resultat av att fokusringen var ogynnsam att titta på, tog de flesta författare bort den... utan att behöva göra något. Kom ihåg när du tar bort :focus, minskar användbarheten och gör upplevelsen otillgänglig för tangentbordsanvändare.

I det aktuella tillståndet på webben indikerar webbläsaren inte längre fokus kring olika element när de har fokus. Webbläsaren använder istället olika heuristik för att avgöra när det skulle hjälpa användaren, och ger en fokusring i gengäld. Enligt Khan Academy, en heuristik är, "en teknik som vägleder en algoritm för att hitta bra val."

Vad detta betyder är att webbläsaren kan upptäcka om användaren interagerar med upplevelsen från ett tangentbord, mus eller styrplatta och baserat på den inmatningstypen lägger den till eller tar bort fokusringen. Exemplet i det här inlägget belyser ingångsinteraktionen.

I de tidiga dagarna av :focus-visible vi använde en polyfyll för att hantera fokusringen skapad av Alice Boxhall och Brian Kardell, kom Mozilla också med sin egen pseudoklass, :moz-focusring, före den officiella specifikationen. Om du vill lära dig mer om fokusringens tidiga dagar, kolla in A11y Casts med Rob Dodson.

Fokus vikt

Det finns många anledningar till varför fokus är viktigt i din ansökan. För det första, som jag nämnde ovan, måste vi som ambassadörer för webben se till att vi tillhandahåller den bästa, tillgängliga upplevelsen vi kan. Vi vill inte att någon av våra användare ska gissa var de är medan de navigerar genom upplevelsen.

Ett exempel som alltid kommer att tänka på är Two Blind Brothers hemsida. Om du går in på hemsidan och klickar/trycker (detta fungerar på mobilen), det stängda ögat i nedre vänstra hörnet ser du att ögat öppnas och en simulering börjar. Båda bröderna, Bradford och Bryan Manning, diagnostiserades i unga år med Stargardts sjukdom. Stargardts sjukdom är en form av makuladegeneration i ögat. Med tiden kommer båda bröderna att bli helt blinda. Besök webbplatsen och klicka på ögat för att se hur de ser.

Om du var i deras skor och du var tvungen att navigera genom en sida, skulle du vilja vara säker på att du visste exakt var du var under hela upplevelsen. En fokusring ger dig den kraften.

demo

Demon nedan visar hur :focus-visible fungerar när den läggs till i din CSS. Den första delen av videon visar upplevelsen när man navigerar med en mus, den andra visar hur man navigerar med bara mitt tangentbord. Jag spelade in mig själv också för att visa att jag bytte från att använda min mus till mitt tangentbord.

Webbläsaren förutspår vad den ska göra med fokusringen baserat på min inmatning (tangentbord/mus), och lägger sedan till en fokusring till dessa element. I det här fallet, när jag navigerar genom det här exemplet med tangentbordet, får allt fokus. När du använder musen är det bara ingången som får fokus och knapparna inte. Om du tar bort :focus-visible, kommer webbläsaren att tillämpa standardfokusringen.

Koden nedan gäller :focus-visible till de fokuserbara elementen.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Om du vill specificera label eller knappen för att ta emot :focus-visible bara förbereda klassen med input or button respektive.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Support

Om webbläsaren inte stöder :focus-visible du kan ha ett fall tillbaka på plats för att hantera interaktionen. Koden nedan är från MDN Lekplats. Du kan använda @stödjer at-regel eller "funktionsfråga" för att kontrollera supporten. En sak att tänka på är att regeln ska placeras överst i koden eller kapslas in i en annan grupp at-regel.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Ytterligare tillgänglighetsproblem

Tillgänglighetsproblem att tänka på när du bygger upp din upplevelse:

• Se till att de färger du väljer för din fokusindikator, om de över huvud taget är, fortfarande är tillgängliga enligt informationen som dokumenteras i WCAG 2.2 Icke-textkontrast (nivå AA)
• Kognitiv överbelastning kan orsaka en användares nöd. Se till att hålla stilar på olika interaktiva element konsekventa

browser Support

vänster

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• PlatoData.Network Vertical Generative Ai. Styrka dig själv. Tillgång här.
• PlatoAiStream. Web3 Intelligence. Kunskap förstärkt. Tillgång här.
• Platoesg. Kol, CleanTech, Energi, Miljö, Sol, Avfallshantering. Tillgång här.
• PlatoHealth. Biotech och kliniska prövningar Intelligence. Tillgång här.
• Källa: https://css-tricks.com/managing-user-focus-with-focus-visible/