Hej alla underbara utvecklare där ute! I det här inlägget kommer jag att ta dig genom att skapa ett enkelt kontaktformulär med hjälp av semantisk HTML och en fantastisk CSS-pseudoklass känd som :focus-within. De :focus-within klass ger stor kontroll över fokus och låter din användare veta att det är precis där de är i upplevelsen. Innan vi hoppar in, låt oss komma till kärnan av vad webbtillgänglighet är.

Formtillgänglighet?

Du har med största sannolikhet hört termen "tillgänglighet" överallt eller numeronymen, a11y. Vad betyder det? Det är en bra fråga med så många svar. När vi tittar på den fysiska världen innebär tillgänglighet saker som att ha vassa behållare i badrummen på ditt företag, se till att det finns ramper för hjulassisterade personer och att ha kringutrustning som tangentbord med stora tryck till hands för alla som behöver det.

Omfånget av tillgänglighet stannar inte där, vi har digital tillgänglighet som vi måste vara medvetna om också, inte bara för externa användare, utan även interna kollegor. Färgkontrast är en lågt hängande frukt att vi ska kunna nappa i knoppen. På våra arbetsplatser ser vi till att om någon anställd behöver hjälpmedel som en skärmläsare så har vi det installerat och tillgängligt. Det finns många saker som måste beaktas. Den här artikeln kommer att fokusera på webbtillgänglighet genom att behålla WCAG (riktlinjer för tillgänglighet för webbinnehåll) i åtanke.

Denna pseudoklass är riktigt bra när du vill betona att användaren faktiskt interagerar med elementet. Du kan till exempel ändra bakgrundsfärgen för hela formuläret. Eller, om fokus flyttas till en ingång, kan du göra etiketten fet och större för ett inmatningselement när fokus flyttas till den ingången. Det som händer nedan i kodavsnitten och exemplen är det som gör formuläret tillgängligt. :focus-within är bara ett sätt vi kan använda CSS till vår fördel.

Hur man fokuserar

Fokus, när det gäller tillgänglighet och webbupplevelsen, är den visuella indikatorn på att något interageras med på sidan, i användargränssnittet eller inom en komponent. CSS kan berätta när ett interaktivt element är fokuserat.

Se alltid till att fokusindikatorn eller ringen runt fokuserbara element bibehåller rätt färgkontrast genom upplevelsen.

Fokus är skrivet så här och kan stylas för att matcha ditt varumärke om du väljer att styla det.

:focus {
  * / INSERT STYLES HERE /*
}

Vad du än gör, ställ aldrig din disposition till 0 or none. Om du gör det tar du bort en synlig fokusindikator för alla under hela upplevelsen. Om du behöver ta bort fokus kan du, men se till att lägga till det igen senare. När du tar bort fokus från din CSS eller ställer in konturen till 0 or none, tar den bort fokusringen för alla dina användare. Detta ses mycket när du använder en CSS-återställning. En CSS-återställning kommer att återställa stilarna till en tom arbetsyta. På så sätt är du ansvarig för den tomma duken för att styla som du vill. Om du vill använda en CSS-återställning, kolla in Josh Comeaus återställning.

*GÖR INTE det som står nedan!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Titta inuti!

Ett av de coolaste sätten att utforma fokus med CSS är vad den här artikeln handlar om. Om du inte har kollat ​​in :focus-within pseudoklass, titta definitivt på det! Det finns många dolda pärlor när det kommer till att använda semantisk uppmärkning och CSS, och det här är en av dem. Många saker som förbises är tillgängliga som standard, till exempel är semantisk uppmärkning som standard tillgänglig och bör användas över div:er hela tiden.

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

Smakämnen header, nav, main, section, asideoch footer är alla semantiska element. De h1 och ul är också semantiska och tillgängliga.

Om det inte finns en anpassad komponent som måste skapas, då en div är bra att använda, ihopkopplad med ARIA (Accessible Rich Internet Applications). Vi kan göra en djupdykning i ARIA i ett senare inlägg. Låt oss nu fokusera...se vad jag gjorde där...på den här CSS-pseudoklassen.

Smakämnen :focus-within pseudo-klassen låter dig välja ett element när något underordnat element som det innehåller 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;
}

Exempelkoden ovan kommer att lägga till en bakgrundsfärg av orange, lägga till lite stoppning och ändra färgen på etiketterna till svart.

Den slutliga produkten ser ut ungefär som nedan. Möjligheterna är förstås oändliga att ändra stylingen, men detta borde få dig på ett bra spår för att göra webben mer tillgänglig för alla!

Ett annat användningsfall för användning :focus-within skulle göra etiketterna fetstilt, en annan färg eller förstora dem för användare med nedsatt syn. Exempelkoden för det skulle se ut ungefär som nedan.

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 även bra webbläsarstöd över hela linjen enligt Kan jag använda.

Slutsats

Att skapa en fantastisk, tillgänglig användarupplevelse bör alltid ha högsta prioritet vid leverans av programvara, inte bara externt utan också internt. Vi som utvecklare, hela vägen upp till seniort ledarskap måste vara medvetna om de utmaningar andra möter och hur vi kan vara ambassadörer för webbplattformen för att göra den till en bättre plats.

Att använda teknik som semantisk uppmärkning och CSS för att skapa inkluderande utrymmen är en avgörande del för att göra webben till en bättre plats, låt oss fortsätta att gå framåt och förändra liv.

Kolla in en annan bra resurs här på CSS-Tricks on med :focus-within.

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