Ahoj všichni skvělí vývojáři! V tomto příspěvku vás provedu vytvořením jednoduchého kontaktního formuláře pomocí sémantického HTML a úžasné pseudo třídy CSS známé jako :focus-within, :focus-within třída umožňuje velkou kontrolu nad zaměřením a dává uživateli vědět, že je to přesně tam, kde se právě nachází. Než se do toho pustíme, pojďme k jádru toho, co je přístupnost webu.

Dostupnost formuláře?

S největší pravděpodobností jste všude slyšeli termín „dostupnost“ nebo numeronymum a11y. Co to znamená? To je skvělá otázka s tolika odpověďmi. Když se podíváme na fyzický svět, dostupnost znamená věci, jako je mít nádoby na ostré předměty v koupelnách ve vaší firmě, zajistit, aby tam byly rampy pro lidi s kolečky, a mít periferní zařízení, jako jsou velké tiskové klávesnice, po ruce pro každého, kdo to potřebuje.

Rozsah přístupnosti tím nekončí, máme digitální přístupnost, kterou musíme mít na paměti, a to nejen pro externí uživatele, ale také pro interní kolegy. Barevný kontrast je nízko visící ovoce že bychom měli být schopni uštípnout v zárodku. Na našich pracovištích zajišťujeme, že pokud nějaký zaměstnanec potřebuje asistenční technologii, jako je čtečka obrazovky, máme ji nainstalovanou a dostupnou. Je třeba vzít v úvahu spoustu věcí. Tento článek se zaměří na přístupnost webu zachováním WCAG (pokyny pro přístupnost webového obsahu) na mysli.

Tato pseudo třída je opravdu skvělá, když chcete zdůraznit, že uživatel s prvkem ve skutečnosti interaguje. Můžete změnit například barvu pozadí celého formuláře. Nebo, pokud se fokus přesune do vstupu, můžete popisek změnit tučně a zvětšit vstupní prvek, když se fokus přesune do tohoto vstupu. Níže ve fragmentech kódu a příkladech se děje to, co zpřístupňuje formulář. :focus-within je jen jedním ze způsobů, jak využít CSS ve svůj prospěch.

Jak se zaměřit

Zaměření, pokud jde o přístupnost a webový zážitek, je vizuální indikátor toho, že se na stránce, v uživatelském rozhraní nebo v rámci komponenty s něčím interaguje. CSS dokáže rozpoznat, kdy je interaktivní prvek zaměřen.

Vždy se ujistěte, že indikátor zaostření nebo kroužek kolem zaostřitelných prvků udržuje správný barevný kontrast během zážitku.

Focus je napsán takto a lze jej upravit tak, aby odpovídal vaší značce, pokud se jej rozhodnete upravit.

:focus {
  * / INSERT STYLES HERE /*
}

Ať děláte cokoli, nikdy nenastavujte svůj obrys na 0 or none. Pokud tak učiníte, odstraní se viditelný indikátor zaostření pro všechny v celém prostředí. Pokud potřebujete odstranit fokus, můžete, ale nezapomeňte to přidat později. Když odeberete fokus ze svého CSS nebo nastavíte obrys na 0 or none, odebere kroužek ostření pro všechny vaše uživatele. To je vidět hodně při použití resetu CSS. Resetování CSS obnoví styly na prázdné plátno. Tímto způsobem máte na starosti prázdné plátno, které můžete stylizovat, jak si přejete. Pokud chcete použít reset CSS, podívejte se Josh Comeau byl resetován.

*NEDĚLEJTE, co je uvedeno níže!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Podívejte se dovnitř!

Jedním z nejlepších způsobů, jak stylizovat zaměření pomocí CSS, je tento článek. Pokud jste se nezkontrolovali :focus-within pseudo třída, určitě se na to podívejte! Existuje mnoho skrytých drahokamů, pokud jde o používání sémantického značení a CSS, a toto je jeden z nich. Mnoho věcí, které jsou přehlíženy, je ve výchozím nastavení přístupných, například sémantické označení je ve výchozím nastavení přístupné a mělo by být vždy používáno přes div.

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

Projekt header, nav, main, section, aside, a footer jsou všechny sémantické prvky. The h1 a ul jsou také sémantické a přístupné.

Pokud neexistuje vlastní komponenta, kterou je třeba vytvořit, pak a div dobře se používá, spárovaný s ARIA (Accessible Rich Internet Applications). Můžeme se hlouběji ponořit do ARIA v pozdějším příspěvku. Nyní se zaměřme...podívejte se, co jsem tam udělal...na tuto pseudotřídu CSS.

Projekt :focus-within pseudo třída vám umožňuje vybrat prvek, když je aktivní jakýkoli podřízený prvek, který obsahuje.

:focus-within v akci!

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

Výše uvedený příklad kódu přidá barvu pozadí oranžovou, přidá výplň a změní barvu štítků na černou.

Konečný produkt vypadá asi jako níže. Samozřejmě, že možností, jak změnit styl, je nepřeberné množství, ale toto by vás mělo dostat na dobrou cestu, aby byl web přístupnější pro každého!

Další případ použití pro použití :focus-within by bylo otočení štítků tučným písmem, jinou barvou nebo jejich zvětšení pro uživatele se slabým zrakem. Příklad kódu pro to by vypadal asi jako níže.

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 má také skvělou podporu prohlížečů ve všech oblastech podle Mohu použít.

Proč investovat do čističky vzduchu?

Vytváření úžasných a dostupných uživatelských zkušeností by mělo být vždy nejvyšší prioritou při dodávání softwaru, a to nejen externě, ale také interně. My jako vývojáři, až po vrcholové vedení, si musíme být vědomi výzev, kterým čelí ostatní, a toho, jak můžeme být ambasadory webové platformy, abychom z ní udělali lepší místo.

Využití technologií, jako je sémantické značení a CSS, k vytváření inkluzivních prostorů, je klíčovou součástí při vytváření lepšího webu, pojďme se i nadále posouvat vpřed a měnit životy.

Podívejte se na další skvělý zdroj zde na CSS-Tricks on pomocí :focus-within.

• SEO Powered Content & PR distribuce. Získejte posílení ještě dnes.
• PlatoData.Network Vertikální generativní Ai. Zmocnit se. Přístup zde.
• PlatoAiStream. Inteligence Web3. Znalosti rozšířené. Přístup zde.
• PlatoESG. Uhlík, CleanTech, Energie, Životní prostředí, Sluneční, Nakládání s odpady. Přístup zde.
• PlatoHealth. Inteligence biotechnologií a klinických studií. Přístup zde.
• Zdroj: https://css-tricks.com/accessible-forms-with-pseudo-classes/