Hei alle dere fantastiske utviklere der ute! I dette innlegget skal jeg ta deg gjennom å lage et enkelt kontaktskjema ved hjelp av semantisk HTML og en fantastisk CSS-pseudoklasse kjent som :focus-within. De :focus-within klasse gir god kontroll over fokus og lar brukeren din vite at det er akkurat der de er i opplevelsen. Før vi hopper inn, la oss komme til kjernen av hva netttilgjengelighet er.

Skjematilgjengelighet?

Du har mest sannsynlig hørt begrepet "tilgjengelighet" overalt eller numeronymet, a11y. Hva betyr det? Det er et flott spørsmål med så mange svar. Når vi ser på den fysiske verden, betyr tilgjengelighet ting som å ha beholdere for skarpe gjenstander på badene i bedriften din, sørge for at det er ramper for hjulassisterte personer, og å ha periferiutstyr som tastaturer med stor utskrift tilgjengelig for alle som trenger det.

Tilgjengelighetsspekteret stopper ikke der, vi har digital tilgjengelighet som vi også må være klar over, ikke bare for eksterne brukere, men også interne kolleger. Fargekontrast er en lavthengende frukt at vi skal klare å nappe i knoppen. På våre arbeidsplasser sørger vi for at hvis noen ansatt trenger hjelpemidler som en skjermleser, har vi det installert og tilgjengelig. Det er mange ting som må tas i betraktning. Denne artikkelen vil fokusere på netttilgjengelighet ved å beholde WCAG (retningslinjer for tilgjengelighet for nettinnhold) i tankene.

Denne pseudoklassen er virkelig flott når du vil understreke at brukeren faktisk samhandler med elementet. Du kan for eksempel endre bakgrunnsfargen til hele skjemaet. Eller, hvis fokus flyttes til en inngang, kan du gjøre etiketten fet og større for et input-element når fokus flyttes til den inngangen. Det som skjer nedenfor i kodebitene og eksemplene er det som gjør skjemaet tilgjengelig. :focus-within er bare én måte vi kan bruke CSS til vår fordel.

Hvordan fokusere

Fokus, med hensyn til tilgjengelighet og nettopplevelse, er den visuelle indikatoren på at noe blir interaksjon med på siden, i brukergrensesnittet eller i en komponent. CSS kan fortelle når et interaktivt element er fokusert.

Sørg alltid for at fokusindikatoren eller ringen rundt fokuserbare elementer opprettholder riktig fargekontrast gjennom opplevelsen.

Fokus er skrevet slik og kan styles for å matche merkevaren din hvis du velger å style den.

:focus {
  * / INSERT STYLES HERE /*
}

Uansett hva du gjør, sett aldri disposisjonen din til 0 or none. Hvis du gjør det, fjernes en synlig fokusindikator for alle gjennom hele opplevelsen. Hvis du trenger å fjerne fokus, kan du, men sørg for å legge det til igjen senere. Når du fjerner fokus fra CSS eller setter omrisset til 0 or none, fjerner den fokusringen for alle brukerne dine. Dette sees mye når du bruker en CSS-tilbakestilling. En tilbakestilling av CSS vil tilbakestille stilene til et tomt lerret. På denne måten er du ansvarlig for det tomme lerretet for å style som du ønsker. Hvis du ønsker å bruke en CSS-tilbakestilling, sjekk ut Josh Comeaus tilbakestilling.

*IKKE GJØR det som står nedenfor!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Se innover!

En av de kuleste måtene å style fokus ved hjelp av CSS er det denne artikkelen handler om. Hvis du ikke har sjekket ut :focus-within pseudo klasse, definitivt ta en titt! Det er mange skjulte perler når det kommer til bruk av semantisk markup og CSS, og dette er en av dem. Mange ting som blir oversett er tilgjengelige som standard, for eksempel er semantisk markering tilgjengelig som standard og bør brukes over div-er til enhver tid.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/no/">Home</a></li>
      <li><a href="/no/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, asideog footer er alle semantiske elementer. De h1 og ul er også semantiske og tilgjengelige.

Med mindre det er en tilpasset komponent som må opprettes, så en div er fin å bruke, sammen med ARIA (Accessible Rich Internet Applications). Vi kan gjøre et dypdykk i ARIA i et senere innlegg. La oss nå fokusere ... se hva jeg gjorde der ... på denne CSS-pseudoklassen.

De :focus-within pseudo-klassen lar deg velge et element når et etterkommerelement den inneholder har fokus.

:focus-within i aksjon!

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

Eksempelkoden ovenfor vil legge til en bakgrunnsfarge av oransje, legge til litt polstring og endre fargen på etikettene til svart.

Det endelige produktet ser omtrent ut som nedenfor. Mulighetene er selvfølgelig uendelige for å endre stylingen, men dette bør få deg på god vei for å gjøre nettet mer tilgjengelig for alle!

Et annet bruksområde for bruk :focus-within ville gjøre etikettene fete, en annen farge eller forstørre dem for brukere med svaksyn. Eksempelkoden for det vil se omtrent slik ut nedenfor.

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 har også god nettleserstøtte over hele linja iht Kan jeg bruke.

konklusjonen

Å skape en fantastisk, tilgjengelig brukeropplevelse bør alltid være en topp prioritet når du sender programvare, ikke bare eksternt, men også internt. Vi som utviklere, helt opp til seniorledelse, må være klar over utfordringene andre møter og hvordan vi kan være ambassadører for nettplattformen for å gjøre den til et bedre sted.

Å bruke teknologi som semantisk markup og CSS for å skape inkluderende rom er en avgjørende del for å gjøre nettet til et bedre sted, la oss fortsette å bevege oss fremover og endre liv.

Sjekk ut en annen flott ressurs her på CSS-Tricks on ved å bruke :focus-within.

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• PlatoData.Network Vertical Generative Ai. Styrk deg selv. Tilgang her.
• PlatoAiStream. Web3 Intelligence. Kunnskap forsterket. Tilgang her.
• PlatoESG. Karbon, CleanTech, Energi, Miljø, Solenergi, Avfallshåndtering. Tilgang her.
• PlatoHelse. Bioteknologisk og klinisk etterretning. Tilgang her.
• kilde: https://css-tricks.com/accessible-forms-with-pseudo-classes/