Hallo allemaal, geweldige ontwikkelaars daar! In dit bericht ga ik je begeleiden bij het maken van een eenvoudig contactformulier met behulp van semantische HTML en een geweldige CSS-pseudoklasse die bekend staat als :focus-within. De :focus-within class zorgt voor grote controle over de focus en laat uw gebruiker weten dat dit precies is waar hij zich in de ervaring bevindt. Voordat we hierop ingaan, moeten we eerst tot de kern komen van wat webtoegankelijkheid is.

Formuliertoegankelijkheid?

U heeft waarschijnlijk overal de term ‘toegankelijkheid’ gehoord, of het numeroniem a11y. Wat betekent het? Dat is een geweldige vraag met zoveel antwoorden. Als we naar de fysieke wereld kijken, betekent toegankelijkheid zaken als het hebben van naaldcontainers in de badkamers van uw bedrijf, het zorgen dat er opritten zijn voor mensen met wielondersteuning en het bij de hand hebben van randapparatuur zoals grootgedrukte toetsenborden voor iedereen die dit nodig heeft.

Het scala aan toegankelijkheid stopt daar niet: we hebben digitale toegankelijkheid waar we ook rekening mee moeten houden, niet alleen voor externe gebruikers, maar ook voor interne collega's. Kleurcontrast is laaghangend fruit dat we in de kiem moeten kunnen smoren. Op onze werkplekken zorgen we ervoor dat als een medewerker ondersteunende technologie zoals een schermlezer nodig heeft, wij die geïnstalleerd en beschikbaar hebben. Er zijn veel dingen waarmee rekening moet worden gehouden. Dit artikel richt zich op webtoegankelijkheid door de WCAG (richtlijnen voor toegankelijkheid van webinhoud) in het achterhoofd.

Deze pseudoklasse is echt geweldig als je wilt benadrukken dat de gebruiker daadwerkelijk interactie heeft met het element. U kunt bijvoorbeeld de achtergrondkleur van het hele formulier wijzigen. Of, als de focus naar een invoer wordt verplaatst, kunt u het label van een invoerelement vetgedrukt en groter maken wanneer de focus naar die invoer wordt verplaatst. Wat hieronder in de codefragmenten en voorbeelden gebeurt, maakt het formulier toegankelijk. :focus-within is slechts één manier waarop we CSS in ons voordeel kunnen gebruiken.

Hoe te focussen?

Focus, met betrekking tot toegankelijkheid en de webervaring, is de visuele indicator dat er interactie is met iets op de pagina, in de gebruikersinterface of binnen een component. CSS kan zien wanneer een interactief element de focus heeft.

Zorg er altijd voor dat de focusindicator of de ring rond focusseerbare elementen tijdens de ervaring het juiste kleurcontrast behoudt.

Focus is zo geschreven en kan worden gestyled zodat het bij uw branding past, als u ervoor kiest om dit te stylen.

:focus {
  * / INSERT STYLES HERE /*
}

Wat u ook doet, stel nooit uw schets in 0 or none. Als u dit wel doet, wordt voor iedereen in de hele ervaring een zichtbare focusindicator verwijderd. Als u de focus wilt verwijderen, kunt u dat doen, maar zorg ervoor dat u deze later weer toevoegt. Wanneer u de focus uit uw CSS verwijdert of de omtrek instelt op 0 or none, wordt de scherpstelring voor al uw gebruikers verwijderd. Dit zie je veel bij het gebruik van een CSS-reset. Een CSS-reset zal de stijlen opnieuw instellen op een leeg canvas. Zo ben jij de baas over het lege canvas en kun je het stylen zoals jij dat wilt. Als je een CSS-reset wilt gebruiken, ga dan naar De reset van Josh Comeau.

*DOEN NIET wat hieronder staat!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Kijk naar binnen!

Een van de coolste manieren om focus te stylen met behulp van CSS is waar dit artikel over gaat. Als u de :focus-within pseudo-klasse, kijk daar zeker eens naar! Er zijn veel verborgen juweeltjes als het gaat om het gebruik van semantische markup en CSS, en dit is er een van. Veel dingen die over het hoofd worden gezien, zijn standaard toegankelijk. Semantische markup is bijvoorbeeld standaard toegankelijk en moet te allen tijde over div's worden gebruikt.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/nl/">Home</a></li>
      <li><a href="/nl/about">About</a></li>
    </ul>
  </nav>
</header>

<section><!-- Code goes here --></section>

<section><!-- Code goes here --></section>

<aside><!-- Code goes here --></aside>

<footer><!-- Code goes here --></footer>

De header, nav, main, section, aside en footer zijn allemaal semantische elementen. De h1 en ul zijn ook semantisch en toegankelijk.

Tenzij er een aangepaste component moet worden gemaakt, dan is a div is prima te gebruiken, gecombineerd met ARIA (Toegankelijke Rich Internet-applicaties). We kunnen in een later bericht dieper ingaan op ARIA. Laten we ons nu concentreren... kijken wat ik daar deed... op deze CSS-pseudoklasse.

De :focus-within Met pseudo-klasse kunt u een element selecteren wanneer een afstammend element dat het bevat focus heeft.

:focus-within in Actie!

HTML

<form>
  <div>
    <label for="firstName">First Name</label><input id="firstName" type="text">
  </div>
  <div>
    <label for="lastName">Last Name</label><input id="lastName" type="text">
  </div>
  <div>
    <label for="phone">Phone Number</label><input id="phone" type="text">
  </div>
  <div>
    <label for="message">Message</label><textarea id="message"></textarea>
  </div>
</form>

CSS

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

De bovenstaande voorbeeldcode voegt een achtergrondkleur oranje toe, voegt wat opvulling toe en verandert de kleur van de labels in zwart.

Het eindproduct ziet er ongeveer zo uit als hieronder. Natuurlijk zijn de mogelijkheden eindeloos om de styling te veranderen, maar dit zou je op een goed spoor moeten zetten om het internet voor iedereen toegankelijker te maken!

Nog een use-case voor het gebruik :focus-within zou de labels vetgedrukt maken, een andere kleur geven of ze vergroten voor slechtziende gebruikers. De voorbeeldcode daarvoor zou er ongeveer als volgt uitzien.

HTML

<form>
  <h1>:focus-within part 2!</h1>
  <label for="firstName">First Name: <input name="firstName" type="text" /></label>
  <label for="lastName">Last Name: <input name="lastName" type="text" /></label>
  <label for="phone">Phone number: <input type="tel" id="phone" /></label>
  <label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>

CSS

label {
  display: block;
  margin-right: 10px;
  padding-bottom: 15px;
}

label:focus-within {
  font-weight: bold;
  color: red;
  font-size: 1.6em;
}

:focus-within heeft ook geweldige browserondersteuning over de hele linie, aldus Kan ik gebruiken.

Conclusie

Het creëren van een geweldige, toegankelijke gebruikerservaring moet altijd een topprioriteit zijn bij het distribueren van software, niet alleen extern maar ook intern. Wij als ontwikkelaars, tot aan het senior leiderschap, moeten ons bewust zijn van de uitdagingen waarmee anderen worden geconfronteerd en hoe we ambassadeurs kunnen zijn voor het webplatform om er een betere plek van te maken.

Het gebruik van technologie zoals semantische markup en CSS om inclusieve ruimtes te creëren is een cruciaal onderdeel om van het internet een betere plek te maken. Laten we vooruitgang blijven boeken en levens veranderen.

Bekijk hier nog een geweldige bron op CSS-Tricks met behulp van:focus-binnen.

• 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/accessible-forms-with-pseudo-classes/