Dit wordt het tweede bericht in een kleine serie die we maken over de toegankelijkheid van formulieren. Als je het eerste bericht hebt gemist, kijk dan eens Toegankelijke formulieren met pseudo-klassen. In dit bericht gaan we kijken naar:focus-visible en hoe u het op uw websites kunt gebruiken!

Focus-aanraakpunt

Voordat we verder gaan met :focus-visible, laten we nog eens bekijken hoe :focus werkt in uw CSS. Focus is de visuele indicator waarmee een element wordt gebruikt via toetsenbord, muis, trackpad of ondersteunende technologie. Bepaalde elementen zijn van nature interactief, zoals links, knoppen en formulierelementen. We willen ervoor zorgen dat onze gebruikers weten waar ze zijn en welke interacties ze uitvoeren.

Vergeet niet dat u dit niet in uw CSS doet!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Wanneer u de focus verwijdert, verwijdert u deze voor IEDEREEN! We willen ervoor zorgen dat we de focus behouden.

Als u om welke reden dan ook de focus moet verwijderen, zorg er dan voor dat er ook terugval is :focus stijlen voor uw gebruikers. Die terugval kan overeenkomen met de kleuren van uw merk, maar zorg ervoor dat die kleuren ook toegankelijk zijn. Als marketing, design of branding niet van de standaard focusringstijlen houden, is het tijd om gesprekken te beginnen en met hen samen te werken aan de beste manier om deze weer toe te voegen.

Wat is focus-visible?

De pseudo-klasse, :focus-visible, is net als onze standaard :focus pseudo-klasse. Het geeft de gebruiker een indicator dat er iets op de pagina wordt gefocust. De manier waarop je schrijft :focus-visible is gesneden en droog:

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

Tijdens gebruik :focus-visible met een specifiek element ziet de syntaxis er ongeveer zo uit:

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

Het mooie van gebruiken :focus-visible is dat u uw element kunt laten opvallen, helder en krachtig! U hoeft zich geen zorgen te maken dat het wordt weergegeven als er op het element wordt geklikt/getikt. Als u ervoor kiest om de klasse niet te implementeren, zal de standaard de focusring van de user-agent zijn, wat voor sommigen ongewenst is.

Achtergrondverhaal van focus-visible

Voordat we de :focus-visible, zou de stijl van de user-agent van toepassing zijn :focus voor de meeste elementen op de pagina; knoppen, links, enz. Er zou een omtrek of “focusring” op het focusseerbare element worden toegepast. Dit werd als lelijk beschouwd, de meesten hielden niet van de standaard focusring die de browser bood. Omdat de scherpstelring ongunstig was om naar te kijken, hebben de meeste auteurs deze verwijderd… zonder terugval. Onthoud, wanneer u verwijdert :focus, het vermindert de bruikbaarheid en maakt de ervaring ontoegankelijk voor toetsenbordgebruikers.

In de huidige staat van internet geeft de browser niet langer zichtbaar de focus aan rond verschillende elementen wanneer deze focus hebben. De browser gebruikt in plaats daarvan verschillende heuristieken om te bepalen wanneer dit de gebruiker zou helpen, en biedt in ruil daarvoor een focusring. Volgens Khan Academy, een heuristiek is, “een techniek die een algoritme begeleidt bij het vinden van goede keuzes.”

Wat dit betekent is dat de browser kan detecteren of de gebruiker al dan niet interactie heeft met de ervaring via een toetsenbord, muis of trackpad en op basis van dat invoertype de focusring toevoegt of verwijdert. Het voorbeeld in dit bericht benadrukt de invoerinteractie.

In de vroege dagen van :focus-visible wij gebruikten een polyvulling Om de focusring van Alice Boxhall en Brian Kardell te kunnen hanteren, kwam Mozilla ook met hun eigen pseudo-klasse, :moz-focusring, vóór de officiële specificatie. Als je meer wilt weten over de begindagen van de focusring, kijk dan eens A11y-casts met Rob Dodson.

Focus op belang

Er zijn genoeg redenen waarom focus belangrijk is in jouw sollicitatie. Ten eerste moeten wij, zoals ik hierboven al zei, als ambassadeurs van het internet ervoor zorgen dat we de best mogelijke, toegankelijke ervaring bieden. We willen niet dat onze gebruikers raden waar ze zijn terwijl ze door de ervaring navigeren.

Een voorbeeld dat altijd in je opkomt is de Website van Twee Blinde Broers. Als je naar de website gaat en op het gesloten oog linksonder klikt/tikt (dit werkt op mobiel), zie je het oog open en begint een simulatie. Bij beide broers, Bradford en Bryan Manning, werd op jonge leeftijd de ziekte van Stargardt vastgesteld. De ziekte van Stargardt is een vorm van maculaire degeneratie van het oog. Na verloop van tijd zullen beide broers volledig blind zijn. Bezoek de site en klik op het oog om te zien hoe ze zien.

Als je in hun schoenen stond en door een pagina moest navigeren, zou je er zeker van willen zijn dat je gedurende de hele ervaring precies wist waar je was. Een focusring geeft je die kracht.

Demo

De onderstaande demo laat zien hoe :focus-visible werkt wanneer toegevoegd aan uw CSS. Het eerste deel van de video toont de ervaring bij het navigeren met een muis, het tweede toont het navigeren met alleen mijn toetsenbord. Ik heb mezelf ook opgenomen om te laten zien dat ik inderdaad ben overgestapt van het gebruik van mijn muis naar mijn toetsenbord.

De browser voorspelt wat te doen met de focusring op basis van mijn invoer (toetsenbord/muis) en voegt vervolgens een focusring toe aan die elementen. In dit geval, wanneer ik met het toetsenbord door dit voorbeeld navigeer, krijgt alles focus. Bij gebruik van de muis krijgt alleen de invoer focus en de knoppen niet. Als je verwijdert :focus-visible, past de browser de standaard focusring toe.

De onderstaande code is van toepassing :focus-visible naar de focusseerbare elementen.

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

Als u de label of de knop om te ontvangen :focus-visible gewoon de les voorafgaan input or button respectievelijk.

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

Als de browser dit niet ondersteunt :focus-visible je kunt terugvallen op je plaats om de interactie af te handelen. Onderstaande code komt uit de MDN-speeltuin. Je kunt de @ondersteunt bij-regel of “functiequery” ondersteuning te controleren. Eén ding om in gedachten te houden: de regel moet bovenaan de code worden geplaatst of in een andere groep-at-regel worden genest.

<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;
  }
}

Verdere zorgen over toegankelijkheid

Toegankelijkheidsproblemen waarmee u rekening moet houden bij het uitbreiden van uw ervaring:

• Zorg ervoor dat de kleuren die u kiest voor uw focusindicator, of helemaal niet, nog steeds toegankelijk zijn volgens de informatie die is gedocumenteerd in de WCAG 2.2 Niet-tekstcontrast (niveau AA)
• Cognitieve overbelasting kan bij de gebruiker problemen veroorzaken. Zorg ervoor dat de stijlen van verschillende interactieve elementen consistent blijven

Browserondersteuning

Kruisstukken

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• PlatoData.Network Verticale generatieve AI. Versterk jezelf. Toegang hier.
• PlatoAiStream. Web3-intelligentie. Kennis versterkt. Toegang hier.
• PlatoESG. carbon, CleanTech, Energie, Milieu, Zonne, Afvalbeheer. Toegang hier.
• Plato Gezondheid. Intelligentie op het gebied van biotech en klinische proeven. Toegang hier.
• Bron: https://css-tricks.com/managing-user-focus-with-focus-visible/