Szia minden csodálatos fejlesztő! Ebben a bejegyzésben végigvezetem Önt egy egyszerű kapcsolatfelvételi űrlap létrehozásán szemantikus HTML és egy fantasztikus CSS pszeudo osztály használatával. :focus-within Az :focus-within osztály lehetővé teszi a fókusz nagyszerű szabályozását, és tudatja a felhasználóval, hogy pontosan itt van az élményben. Mielőtt belevágnánk, nézzük meg a webes akadálymentesítés lényegét.

Űrlap hozzáférhetősége?

Valószínűleg mindenhol hallotta az „akadálymentesség” kifejezést vagy az a11y számnevet. Mit jelent? Ez egy nagyszerű kérdés, rengeteg válasszal. Ha a fizikai világot nézzük, az akadálymentesítés olyan dolgokat jelent, mint például az éles tárgyakat tartalmazó tartályok elhelyezése a vállalkozás fürdőszobájában, a rámpák biztosítása a keréktárcsás emberek számára, és a perifériás eszközök, például a nagyméretű nyomtatott billentyűzetek kéznél vannak azok számára, akiknek szüksége van rá.

Az akadálymentesítés skálája nem áll meg itt, van digitális akadálymentesítésünk, amivel tisztában kell lennünk, nem csak a külső felhasználóknak, hanem a belső kollégáknak is. A színkontraszt alacsonyan lógó gyümölcs hogy tudnunk kell csípni a bimbót. Munkahelyünkön gondoskodunk arról, hogy ha bármely alkalmazottnak kisegítő technológiára, például képernyőolvasóra van szüksége, az telepítve legyen és elérhető legyen. Nagyon sok dolgot kell figyelembe venni. Ez a cikk a webes akadálymentesítésre összpontosít, megtartva a WCAG (webtartalom hozzáférhetőségi irányelvek) gondolatban.

Ez a pszeudo osztály igazán nagyszerű, ha azt szeretné hangsúlyozni, hogy a felhasználó valójában kölcsönhatásba lép az elemmel. Megváltoztathatja például az egész űrlap háttérszínét. Vagy ha a fókuszt egy bemenetre helyezi át, a címkét félkövérre és nagyobbra állíthatja egy bemeneti elemnél, amikor a fókuszt az adott bemenetre helyezi át. Ami az alábbiakban történik a kódrészletekben és példákban, az az, ami az űrlapot hozzáférhetővé teszi. :focus-within csak egy módja annak, hogy a CSS-t előnyünkre használjuk.

Hogyan kell összpontosítani

A kisegítő lehetőségek és a webes élmény tekintetében a fókusz annak vizuális jelzése, hogy valami interakcióba kerül az oldalon, a felhasználói felületen vagy egy összetevőn belül. A CSS képes megmondani, hogy egy interaktív elem mikor van fókuszban.

Mindig ügyeljen arra, hogy a fókuszjelző vagy a fókuszálható elemek körüli gyűrű fenntartsa a megfelelő színkontrasztot az élmény során.

A Focus így van megírva, és a márkához igazodó stílust alakíthat ki, ha úgy dönt, hogy stílust alakít.

:focus {
  * / INSERT STYLES HERE /*
}

Bármit is csinál, soha ne állítsa be a körvonalait 0 or none. Ezzel eltávolítja a látható fókuszjelzőt mindenki számára a teljes élményben. Ha el kell távolítania a fókuszt, megteheti, de ezt később mindenképpen adja hozzá. Amikor eltávolítja a fókuszt a CSS-ről, vagy beállítja a körvonalat 0 or none, eltávolítja a fókuszgyűrűt az összes felhasználóról. Ez gyakran látható CSS ​​reset használatakor. A CSS alaphelyzetbe állítása visszaállítja a stílusokat egy üres vászonra. Így Ön felel az üres vászonért, hogy stílusát tetszés szerint alakítsa. Ha CSS-visszaállítást szeretne használni, nézze meg Josh Comeau visszaállítása.

*NE TEGYE az alábbiakat!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Nézz Belül!

Ez a cikk az egyik legmenőbb módja annak, hogy CSS-t használva fókuszáljon stílusosan. Ha még nem nézte meg a :focus-within pszeudo osztály, mindenképpen nézd meg! Nagyon sok rejtett drágakő van a szemantikus jelölés és a CSS használata során, és ez az egyik ilyen. Sok figyelmen kívül hagyott dolog alapértelmezés szerint elérhető, például a szemantikai jelölés alapértelmezés szerint elérhető, és mindig div felett kell használni.

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

A header, nav, main, section, asideés footer mind szemantikai elemek. A h1 és a ul szemantikusak és hozzáférhetők is.

Hacsak nincs egyéni összetevő, amelyet létre kell hozni, akkor a div jól használható, párosítva ARIA (Hozzáférhető gazdag internetes alkalmazások). Egy későbbi bejegyzésben mélyrehatóan beleáshatunk az ARIA-ba. Egyelőre koncentráljunk… nézzük meg, mit csináltam ott… erre a CSS pszeudo osztályra.

A :focus-within A pszeudo osztály lehetővé teszi egy elem kiválasztását, ha bármely leszármazott eleme fókuszban van.

:focus-within akcióban!

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

A fenti példakód narancssárga háttérszínt ad hozzá, néhány kitömést ad hozzá, és a címkék színét feketére változtatja.

A végtermék az alábbiak szerint néz ki. Természetesen végtelen a lehetőség a stílus megváltoztatására, de ez jó úton halad, hogy mindenki számára elérhetőbbé tegye az internetet!

Egy másik használati eset a használathoz :focus-within a címkéket félkövérre, más színűre változtatná vagy kinagyítaná a gyengénlátó felhasználók számára. A példakód az alábbiak szerint nézne ki.

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 szerint is nagyszerű böngészőtámogatással rendelkezik Használhatom.

Következtetés

A lenyűgöző, hozzáférhető felhasználói élmény megteremtésének mindig elsődleges prioritásnak kell lennie a szoftver szállítása során, nem csak külsőleg, hanem belsőleg is. Nekünk, fejlesztőknek, egészen a felső vezetésig tisztában kell lennünk azzal, hogy mások milyen kihívásokkal néznek szembe, és hogyan lehetünk a webes platform nagykövetei, hogy jobb hellyé tegyük.

A szemantikus jelöléshez és a CSS-hez hasonló technológiák alkalmazása inkluzív terek létrehozására kulcsfontosságú szerepet játszik abban, hogy az internet jobb hellyé váljon. Haladjunk tovább, és változtassuk meg az életünket.

Nézzen meg egy másik nagyszerű forrást itt a CSS-Tricks on a :focus-in belül használatával.

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• PlatoData.Network Vertical Generative Ai. Erősítse meg magát. Hozzáférés itt.
• PlatoAiStream. Web3 Intelligence. Felerősített tudás. Hozzáférés itt.
• PlatoESG. Carbon, CleanTech, Energia, Környezet, Nap, Hulladékgazdálkodás. Hozzáférés itt.
• PlatoHealth. Biotechnológiai és klinikai vizsgálatok intelligencia. Hozzáférés itt.
• Forrás: https://css-tricks.com/accessible-forms-with-pseudo-classes/