Hej, wszyscy wspaniali programiści! W tym poście poprowadzę Cię przez proces tworzenia prostego formularza kontaktowego przy użyciu semantycznego HTML i niesamowitej pseudoklasy CSS znanej jako :focus-within, :focus-within class pozwala na dużą kontrolę nad skupieniem i pozwala użytkownikowi wiedzieć, że jest dokładnie w tym miejscu, w którym się znajduje. Zanim przejdziemy do rzeczy, przejdźmy do sedna tego, czym jest dostępność sieci.

Dostępność formularza?

Najprawdopodobniej wszędzie słyszałeś termin „dostępność” lub numeronim a11y. Co to znaczy? To świetne pytanie, na które jest tak wiele odpowiedzi. Kiedy patrzymy na świat fizyczny, dostępność oznacza takie rzeczy, jak posiadanie pojemników na ostre przedmioty w łazienkach w firmie, upewnienie się, że są podjazdy dla osób poruszających się na wózkach oraz posiadanie urządzeń peryferyjnych, takich jak klawiatury z dużym drukiem, pod ręką dla każdego, kto ich potrzebuje.

Na tym gama dostępności się nie kończy. Mamy dostępność cyfrową, o której musimy być świadomi, nie tylko dla użytkowników zewnętrznych, ale także współpracowników wewnętrznych. Kontrast kolorów to owoc nisko wiszący które powinniśmy móc zdusić w zarodku. W naszych miejscach pracy upewniamy się, że jeśli jakikolwiek pracownik potrzebuje technologii wspomagających, takich jak czytnik ekranu, mamy ją zainstalowaną i dostępną. Jest wiele rzeczy, które należy wziąć pod uwagę. W tym artykule skupimy się na dostępności sieci, zachowując WCAG (wytyczne dotyczące dostępności treści internetowych) na uwadze.

Ta pseudoklasa jest naprawdę świetna, gdy chcesz podkreślić, że użytkownik faktycznie wchodzi w interakcję z elementem. Można np. zmienić kolor tła całego formularza. Lub, jeśli fokus zostanie przeniesiony na dane wejściowe, możesz pogrubić i powiększyć etykietę elementu wejściowego, gdy fokus zostanie przeniesiony na to wejście. To, co dzieje się poniżej we fragmentach kodu i przykładach, sprawia, że ​​formularz jest dostępny. :focus-within to tylko jeden ze sposobów wykorzystania CSS na naszą korzyść.

Jak się skupić

Koncentracja, jeśli chodzi o dostępność i doświadczenie sieci, to wizualny wskaźnik interakcji z czymś na stronie, w interfejsie użytkownika lub w komponencie. CSS potrafi stwierdzić, kiedy element interaktywny jest skupiony.

Zawsze upewnij się, że wskaźnik ostrości lub pierścień wokół elementów, na których można ustawić ostrość, utrzymuje odpowiedni kontrast kolorów przez cały czas oglądania.

Fokus jest napisany w ten sposób i można go stylizować tak, aby pasował do Twojego brandingu, jeśli zdecydujesz się go stylizować.

:focus {
  * / INSERT STYLES HERE /*
}

Cokolwiek robisz, nigdy nie ustawiaj swojego konspektu 0 or none. Spowoduje to usunięcie widocznego wskaźnika skupienia dla wszystkich podczas całego doświadczenia. Jeśli chcesz usunąć fokus, możesz to zrobić, ale pamiętaj, aby dodać go z powrotem później. Kiedy usuniesz fokus ze swojego CSS lub ustawisz kontur na 0 or none, usuwa pierścień ostrości dla wszystkich użytkowników. Jest to często widoczne podczas korzystania z resetowania CSS. Reset CSS zresetuje style do pustego płótna. W ten sposób jesteś odpowiedzialny za puste płótno i możesz je stylizować według własnego uznania. Jeśli chcesz użyć resetowania CSS, sprawdź Reset Josha Comeau.

*NIE rób tego, co jest poniżej!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Spojrzeć w głąb!

Jeden z najfajniejszych sposobów na stylizację za pomocą CSS jest tematem tego artykułu. Jeśli nie sprawdziłeś :focus-within pseudoklasa, zdecydowanie spójrz na to! Istnieje wiele ukrytych perełek, jeśli chodzi o używanie znaczników semantycznych i CSS, a to jest jedna z nich. Wiele pomijanych rzeczy jest dostępnych domyślnie, na przykład znaczniki semantyczne są domyślnie dostępne i powinny być zawsze używane zamiast elementów div.

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

Połączenia header, nav, main, section, aside, footer wszystkie są elementami semantycznymi. The h1 i ul są również semantyczne i przystępne.

O ile nie trzeba utworzyć komponentu niestandardowego, wówczas a div jest w porządku w użyciu, w połączeniu z ARIA (dostępne bogate aplikacje internetowe). Możemy głębiej zagłębić się w ARIA w późniejszym poście. Na razie skupmy się… zobaczmy, co tam zrobiłem… na tej pseudo klasie CSS.

Połączenia :focus-within pseudoklasa pozwala wybrać element, gdy dowolny element potomny, który zawiera, jest aktywny.

:focus-within w akcji!

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

Powyższy przykładowy kod doda pomarańczowy kolor tła, doda trochę dopełnienia i zmieni kolor etykiet na czarny.

Produkt końcowy wygląda mniej więcej tak jak poniżej. Oczywiście możliwości zmiany stylu są nieograniczone, ale to powinno naprowadzić Cię na dobrą drogę, aby uczynić sieć bardziej dostępną dla wszystkich!

Kolejny przypadek użycia do użycia :focus-within byłoby pogrubienie etykiet, nadanie im innego koloru lub powiększenie ich dla użytkowników słabowidzących. Przykładowy kod mógłby wyglądać mniej więcej tak jak poniżej.

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 ma również świetną obsługę przeglądarek na całym świecie, zgodnie z Mogę uzyć.

Wnioski

Tworzenie niesamowitego, dostępnego doświadczenia użytkownika powinno zawsze być najwyższym priorytetem podczas dostarczania oprogramowania, nie tylko na zewnątrz, ale także wewnętrznie. Jako programiści, aż do kadry kierowniczej wyższego szczebla, musimy być świadomi wyzwań stojących przed innymi i tego, w jaki sposób możemy być ambasadorami platformy internetowej, aby uczynić ją lepszym miejscem.

Używanie technologii takich jak znaczniki semantyczne i CSS do tworzenia inkluzywnych przestrzeni jest kluczowym elementem w czynieniu sieci lepszym miejscem. Kontynuujmy postęp i zmieniajmy życie.

Sprawdź kolejny świetny zasób tutaj na temat CSS-Tricks on używając :focus-wewnątrz.

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• PlatoData.Network Pionowe generatywne AI. Wzmocnij się. Dostęp tutaj.
• PlatoAiStream. Inteligencja Web3. Wiedza wzmocniona. Dostęp tutaj.
• PlatonESG. Węgiel Czysta technologia, Energia, Środowisko, Słoneczny, Gospodarowanie odpadami. Dostęp tutaj.
• Platon Zdrowie. Inteligencja w zakresie biotechnologii i badań klinicznych. Dostęp tutaj.
• Źródło: https://css-tricks.com/accessible-forms-with-pseudo-classes/