Hej alle jer vidunderlige udviklere derude! I dette indlæg vil jeg tage dig igennem at oprette en simpel kontaktformular ved hjælp af semantisk HTML og en fantastisk CSS pseudo klasse kendt som :focus-within. Det :focus-within klasse giver mulighed for stor kontrol over fokus og lade din bruger vide, at det er præcis, hvor de er i oplevelsen. Før vi hopper ind, lad os komme til kernen af, hvad webtilgængelighed er.

Formtilgængelighed?

Du har højst sandsynligt hørt udtrykket "tilgængelighed" overalt eller numeronymet, a11y. Hvad betyder det? Det er et godt spørgsmål med så mange svar. Når vi ser på den fysiske verden, betyder tilgængelighed ting som at have beholdere til skarpe ting på badeværelserne i din virksomhed, sørge for, at der er ramper til hjulassisterede personer, og at have ydre enheder som tastaturer med stort tryk ved hånden til alle, der har brug for det.

Viften af ​​tilgængelighed stopper ikke der, vi har digital tilgængelighed, som vi også skal være opmærksomme på, ikke kun for eksterne brugere, men også interne kolleger. Farvekontrast er en lavthængende frugt at vi skulle kunne nappe i opløbet. På vores arbejdspladser sørger vi for, at hvis nogen medarbejder har brug for hjælpemidler som en skærmlæser, har vi det installeret og tilgængeligt. Der er mange ting, der skal tages i betragtning. Denne artikel vil fokusere på webtilgængelighed ved at beholde WCAG (retningslinjer for tilgængelighed til webindhold) i tankerne.

Denne pseudo-klasse er virkelig fantastisk, når du vil understrege, at brugeren faktisk interagerer med elementet. Du kan f.eks. ændre baggrundsfarven for hele formularen. Eller, hvis fokus flyttes til et input, kan du gøre etiketten fed og større for et inputelement, når fokus flyttes til det input. Det, der sker nedenfor i kodestykkerne og eksemplerne, er det, der gør formularen tilgængelig. :focus-within er kun én måde, vi kan bruge CSS til vores fordel.

Sådan fokuserer du

Fokus, med hensyn til tilgængelighed og weboplevelsen, er den visuelle indikator for, at noget bliver interageret med på siden, i brugergrænsefladen eller i en komponent. CSS kan fortælle, hvornår et interaktivt element er fokuseret.

Sørg altid for, at fokusindikatoren eller ringen omkring fokuserbare elementer bevarer den korrekte farvekontrast gennem oplevelsen.

Fokus er skrevet sådan og kan styles til at matche din branding, hvis du vælger at style den.

:focus {
  * / INSERT STYLES HERE /*
}

Uanset hvad du gør, skal du aldrig sætte din disposition til 0 or none. Hvis du gør det, fjernes en synlig fokusindikator for alle på tværs af hele oplevelsen. Hvis du har brug for at fjerne fokus, kan du, men sørg for at tilføje det igen senere. Når du fjerner fokus fra din CSS eller indstiller omridset til 0 or none, fjerner den fokusringen for alle dine brugere. Dette ses meget, når du bruger en CSS-nulstilling. En CSS-nulstilling vil nulstille stilene til et tomt lærred. På denne måde er du ansvarlig for det tomme lærred for at style som du ønsker. Hvis du ønsker at bruge en CSS-nulstilling, så tjek ud Josh Comeaus nulstilling.

*GØR IKKE det, der står nedenfor!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Kig indenfor!

En af de fedeste måder at style fokus ved hjælp af CSS er, hvad denne artikel handler om. Hvis du ikke har tjekket ud :focus-within pseudo klasse, giv det bestemt et kig! Der er mange skjulte perler, når det kommer til at bruge semantisk markup og CSS, og dette er en af ​​dem. Mange ting, der er overset, er tilgængelige som standard, for eksempel er semantisk markup som standard tilgængelig og bør bruges over div'er til enhver tid.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/da/">Home</a></li>
      <li><a href="/da/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>

header, nav, main, section, asideog footer er alle semantiske elementer. Det h1 , ul er også semantiske og tilgængelige.

Medmindre der er en brugerdefineret komponent, der skal oprettes, så en div er fin at bruge, parret med ARIA (Accessible Rich Internet Applications). Vi kan dykke ned i ARIA i et senere indlæg. Lad os nu fokusere ... se hvad jeg gjorde der ... på denne CSS pseudo klasse.

:focus-within pseudo-klassen giver dig mulighed for at vælge et element, når et hvilket som helst nedstammende element, det indeholder, har fokus.

:focus-within i aktion!

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 tilføje en baggrundsfarve af orange, tilføje noget polstring og ændre farven på etiketterne til sort.

Det endelige produkt ser nogenlunde ud som nedenfor. Mulighederne er selvfølgelig uendelige for at ændre stylingen, men dette burde få dig på et godt spor for at gøre nettet mere tilgængeligt for alle!

En anden use case til brug :focus-within ville gøre etiketterne fed, en anden farve eller forstørre dem for brugere med nedsat syn. Eksempelkoden for det ville se nogenlunde ud som 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å stor browserunderstøttelse over hele linjen iflg Kan jeg bruge.

Konklusion

At skabe en fantastisk, tilgængelig brugeroplevelse bør altid være en topprioritet, når du sender software, ikke kun eksternt, men også internt. Vi som udviklere skal helt op til seniorledelse være bevidste om de udfordringer, andre står over for, og hvordan vi kan være ambassadører for webplatformen for at gøre den til et bedre sted.

Brug af teknologi som semantisk markup og CSS til at skabe inkluderende rum er en afgørende del af at gøre nettet til et bedre sted, lad os fortsætte med at bevæge os fremad og ændre liv.

Tjek en anden fantastisk ressource her på CSS-Tricks på ved hjælp af :focus-within.

• SEO Powered Content & PR Distribution. Bliv forstærket i dag.
• PlatoData.Network Vertical Generative Ai. Styrk dig selv. Adgang her.
• PlatoAiStream. Web3 intelligens. Viden forstærket. Adgang her.
• PlatoESG. Kulstof, CleanTech, Energi, Miljø, Solenergi, Affaldshåndtering. Adgang her.
• PlatoHealth. Bioteknologiske og kliniske forsøgs intelligens. Adgang her.
• Kilde: https://css-tricks.com/accessible-forms-with-pseudo-classes/