Hey, siz harika geliştiriciler oradasınız! Bu yazıda, anlamsal HTML ve harika bir CSS sözde sınıfı kullanarak basit bir iletişim formu oluşturma konusunda size yol göstereceğim. :focus-within. :focus-within class, odaklanma üzerinde mükemmel kontrol sağlar ve kullanıcılarınızın deneyimde tam olarak bu noktada olduklarını bilmelerini sağlar. Konuya girmeden önce web erişilebilirliğinin ne olduğuna değinelim.

Formun Erişilebilirliği?

Büyük ihtimalle “erişilebilirlik” terimini her yerde duymuşsunuzdur veya a11y adını da duymuşsunuzdur. Bu ne anlama geliyor? Bu pek çok cevabı olan harika bir soru. Fiziksel dünyaya baktığımızda erişilebilirlik, işletmenizdeki banyolarda kesici alet kaplarının bulunması, tekerlekli sandalye kullananlar için rampaların bulunması ve ihtiyacı olan herkesin büyük baskılı klavye gibi çevre birimlerinin hazır bulunması gibi şeyler anlamına gelir.

Erişilebilirlik yelpazesi burada bitmiyor; yalnızca harici kullanıcılar için değil şirket içi meslektaşlarımız için de bilgi sahibi olmamız gereken dijital erişilebilirliğe sahibiz. Renk kontrastı düşük asılı bir meyvedir daha başlangıçta kıstırabilmeliyiz. İşyerlerimizde, herhangi bir çalışanın ekran okuyucu gibi yardımcı teknolojiye ihtiyaç duyması durumunda, bu teknolojinin kurulu ve kullanıma hazır olduğundan emin oluyoruz. Dikkate alınması gereken pek çok şey var. Bu makale web erişilebilirliğine odaklanacaktır. WCAG (web içeriği erişilebilirlik yönergeleri) akılda.

Bu sözde sınıf, kullanıcının aslında öğeyle etkileşime girdiğini vurgulamak istediğinizde gerçekten harikadır. Örneğin tüm formun arka plan rengini değiştirebilirsiniz. Veya odak bir girişe taşınırsa, odak o girişe taşındığında etiketi kalın ve giriş öğesinin daha büyük olmasını sağlayabilirsiniz. Aşağıdaki kod parçacıklarında ve örneklerde olup bitenler, formun erişilebilir olmasını sağlayan şeydir. :focus-within CSS'yi kendi avantajımıza kullanmamızın yollarından sadece biri.

Nasıl Odaklanırız?

Erişilebilirlik ve web deneyimi açısından odak, sayfada, kullanıcı arayüzünde veya bir bileşen içinde bir şeyle etkileşimde bulunulduğunun görsel göstergesidir. CSS, etkileşimli bir öğenin ne zaman odaklandığını anlayabilir.

Odak göstergesinin veya odaklanılabilir öğelerin etrafındaki halkanın deneyim boyunca uygun renk kontrastını koruduğundan daima emin olun.

Odaklanma bu şekilde yazılır ve stillendirmeyi seçerseniz markanıza uyacak şekilde stillendirilebilir.

:focus {
  * / INSERT STYLES HERE /*
}

Ne yaparsanız yapın, asla taslağınızı 0 or none. Bunu yapmak, tüm deneyim boyunca herkes için görünür bir odak göstergesini kaldıracaktır. Odağı kaldırmanız gerekiyorsa bunu yapabilirsiniz, ancak bunu daha sonra tekrar eklediğinizden emin olun. Odağı CSS'nizden kaldırdığınızda veya taslağı şu şekilde ayarladığınızda: 0 or nonetüm kullanıcılarınız için odak halkasını kaldırır. Bu, CSS sıfırlama kullanıldığında çok görülür. CSS sıfırlaması, stilleri boş bir tuvale sıfırlayacaktır. Bu şekilde boş tuvalin istediğiniz gibi şekillendirilmesinden siz sorumlusunuz. CSS sıfırlamayı kullanmak istiyorsanız şuraya göz atın: Josh Comeau'nun sıfırlanması.

*Aşağıdakileri YAPMAYIN!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

İçine Bak!

CSS kullanarak odaklamayı şekillendirmenin en harika yollarından biri bu makalenin konusu. Eğer kontrol etmediyseniz :focus-within sözde sınıf, buna kesinlikle bir göz atın! Anlamsal işaretleme ve CSS kullanımı söz konusu olduğunda pek çok gizli mücevher vardır ve bu da onlardan biri. Gözden kaçan birçok şeye varsayılan olarak erişilebilir; örneğin anlamsal işaretlemeye varsayılan olarak erişilebilirdir ve her zaman div'ler üzerinde kullanılmalıdır.

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

The header, nav, main, section, aside, ve footer hepsi anlamsal unsurlardır. h1 ve ul aynı zamanda anlamsal ve erişilebilirdir.

Oluşturulması gereken özel bir bileşen olmadığı sürece, div kullanımı gayet iyi, eşleştirilmiş ARIA (Erişilebilir Zengin İnternet Uygulamaları). Daha sonraki bir yazıda ARIA'ya derinlemesine bakabiliriz. Şimdilik odaklanalım… orada ne yaptığımı görelim… bu CSS sözde sınıfına.

The :focus-within sözde sınıf, içerdiği herhangi bir alt öğenin odağı olduğunda bir öğeyi seçmenize olanak tanır.

:focus-within Eylemde!

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

Yukarıdaki örnek kod, turuncu bir arka plan rengi ekleyecek, bir miktar dolgu ekleyecek ve etiketlerin rengini siyah olarak değiştirecektir.

Nihai ürün aşağıdakine benzer. Elbette stili değiştirmek için olasılıklar sonsuzdur, ancak bu sizi web'i herkes için daha erişilebilir hale getirmek için iyi bir yola sokacaktır!

Kullanmak için başka bir kullanım durumu :focus-within Etiketlerin kalınlaştırılması, farklı bir renge dönüştürülmesi veya az gören kullanıcılar için büyütülmesi olabilir. Bunun için örnek kod aşağıdaki gibi görünecektir.

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 ayrıca genel olarak harika bir tarayıcı desteğine sahip Kullanabilirmiyim.

Sonuç

Şaşırtıcı, erişilebilir kullanıcı deneyimi yaratmak, yazılımın yalnızca harici olarak değil dahili olarak da nakliyesi sırasında her zaman en önemli öncelik olmalıdır. Biz geliştiriciler olarak, üst düzey liderliğe kadar, başkalarının karşılaştığı zorlukların ve web platformunu daha iyi bir yer haline getirmek için nasıl elçiler olabileceğimizin farkında olmamız gerekiyor.

Kapsayıcı alanlar oluşturmak için anlamsal işaretleme ve CSS gibi teknolojileri kullanmak, web'i daha iyi bir yer haline getirmenin çok önemli bir parçasıdır, ilerlemeye ve hayatları değiştirmeye devam edelim.

CSS-Tricks ile ilgili başka bir harika kaynağa göz atın: :focus-in kullanımı.

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• PlatoData.Network Dikey Üretken Yapay Zeka. Kendine güç ver. Buradan Erişin.
• PlatoAiStream. Web3 Zekası. Bilgi Genişletildi. Buradan Erişin.
• PlatoESG. karbon, temiz teknoloji, Enerji, Çevre, Güneş, Atık Yönetimi. Buradan Erişin.
• PlatoSağlık. Biyoteknoloji ve Klinik Araştırmalar Zekası. Buradan Erişin.
• Kaynak: https://css-tricks.com/accessible-forms-with-pseudo-classes/