Hai semua pengembang hebat di luar sana! Dalam posting ini, saya akan memandu Anda membuat formulir kontak sederhana menggunakan HTML semantik dan kelas semu CSS mengagumkan yang dikenal sebagai :focus-within. itu :focus-within kelas memungkinkan kontrol besar atas fokus dan memberi tahu pengguna bahwa ini adalah tempat mereka berada dalam pengalaman tersebut. Sebelum kita masuk lebih dalam, mari kita bahas inti dari apa itu aksesibilitas web.

Aksesibilitas Formulir?

Anda kemungkinan besar pernah mendengar istilah “aksesibilitas” di mana-mana atau numeronimnya, a11y. Apa artinya? Itu adalah pertanyaan bagus dengan begitu banyak jawaban. Ketika kita melihat dunia fisik, aksesibilitas berarti hal-hal seperti memiliki wadah benda tajam di kamar mandi di bisnis Anda, memastikan adanya jalur landai untuk orang yang dibantu roda, dan menyediakan periferal seperti keyboard cetak besar untuk siapa saja yang membutuhkannya.

Keseluruhan aksesibilitas tidak berhenti sampai disitu saja, kita memiliki aksesibilitas digital yang perlu kita sadari juga, tidak hanya untuk pengguna eksternal, namun juga rekan internal. Kontras warna adalah buah yang tergantung rendah yang harus kita hentikan sejak awal. Di tempat kerja kami, untuk memastikan bahwa jika ada karyawan yang membutuhkan teknologi pendukung seperti pembaca layar, kami telah memasang dan menyediakannya. Ada banyak hal yang perlu dipertimbangkan. Artikel ini akan fokus pada aksesibilitas web dengan menjaga WCAG (pedoman aksesibilitas konten web) dalam pikiran.

Kelas semu ini sangat bagus ketika Anda ingin menekankan bahwa pengguna sebenarnya berinteraksi dengan elemen tersebut. Anda dapat mengubah warna latar belakang seluruh formulir, misalnya. Atau, jika fokus dipindahkan ke input, Anda dapat membuat label elemen input menjadi tebal dan lebih besar saat fokus dipindahkan ke input tersebut. Apa yang terjadi di cuplikan kode dan contoh di bawah inilah yang membuat formulir dapat diakses. :focus-within hanyalah salah satu cara kita dapat menggunakan CSS untuk keuntungan kita.

Cara Fokus

Fokus, dalam kaitannya dengan aksesibilitas dan pengalaman web, adalah indikator visual bahwa ada sesuatu yang sedang berinteraksi di halaman, di UI, atau di dalam komponen. CSS dapat mengetahui kapan elemen interaktif difokuskan.

Selalu pastikan bahwa indikator fokus atau lingkaran di sekeliling elemen yang dapat difokuskan mempertahankan kontras warna yang tepat sepanjang pengalaman.

Fokus ditulis seperti ini dan dapat ditata agar sesuai dengan merek Anda jika Anda memilih untuk menatanya.

:focus {
  * / INSERT STYLES HERE /*
}

Apa pun yang Anda lakukan, jangan pernah menetapkan garis besarnya 0 or none. Melakukan hal ini akan menghapus indikator fokus yang terlihat untuk semua orang di seluruh pengalaman. Jika Anda perlu menghapus fokus, Anda bisa, tapi pastikan untuk menambahkannya kembali nanti. Saat Anda menghapus fokus dari CSS atau menyetel kerangka ke 0 or none, tindakan ini menghilangkan cincin fokus untuk semua pengguna Anda. Ini sering terlihat saat menggunakan reset CSS. Reset CSS akan mengatur ulang gaya ke kanvas kosong. Dengan cara ini Anda bertanggung jawab atas kanvas kosong untuk ditata sesuai keinginan. Jika Anda ingin menggunakan reset CSS, periksa Reset Josh Comeau.

*JANGAN LAKUKAN apa yang ada di bawah ini!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Lihatlah ke Dalam!

Salah satu cara paling keren untuk menata fokus menggunakan CSS adalah inti dari artikel ini. Jika Anda belum memeriksanya :focus-within kelas semu, coba lihat itu! Ada banyak permata tersembunyi dalam penggunaan markup semantik dan CSS, dan ini adalah salah satunya. Banyak hal yang diabaikan dapat diakses secara default, misalnya, markup semantik secara default dapat diakses dan harus digunakan pada div setiap saat.

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

Grafik header, nav, main, section, aside, dan footer semuanya merupakan elemen semantik. Itu h1 dan ul juga semantik dan dapat diakses.

Kecuali ada komponen custom yang perlu dibuat, maka a div boleh digunakan, dipasangkan dengan ARIA (Aplikasi Internet Kaya yang Dapat Diakses). Kita bisa mendalami ARIA lebih dalam di postingan selanjutnya. Untuk saat ini mari fokus…lihat apa yang saya lakukan di sana…pada kelas semu CSS ini.

Grafik :focus-within kelas pseudo memungkinkan Anda memilih elemen ketika elemen turunan apa pun yang dikandungnya memiliki fokus.

:focus-within sedang beraksi!

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

Contoh kode di atas akan menambahkan warna background oranye, menambahkan beberapa padding, dan mengubah warna label menjadi hitam.

Produk akhirnya terlihat seperti di bawah ini. Tentu saja kemungkinannya tidak terbatas untuk mengubah gaya, namun hal ini akan membawa Anda pada jalur yang baik untuk membuat web lebih mudah diakses oleh semua orang!

Kasus penggunaan lain untuk digunakan :focus-within akan mengubah label menjadi tebal, warna berbeda, atau memperbesarnya untuk pengguna dengan gangguan penglihatan. Contoh kodenya akan terlihat seperti di bawah ini.

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 juga memiliki dukungan browser yang hebat secara menyeluruh menurut Bisakah saya menggunakan.

Kesimpulan

Menciptakan pengalaman pengguna yang luar biasa dan mudah diakses harus selalu menjadi prioritas utama saat mengirimkan perangkat lunak, tidak hanya secara eksternal tetapi juga secara internal. Kami sebagai pengembang, hingga pimpinan senior, harus menyadari tantangan yang dihadapi pihak lain dan bagaimana kami dapat menjadi duta platform web untuk menjadikannya tempat yang lebih baik.

Menggunakan teknologi seperti markup semantik dan CSS untuk menciptakan ruang inklusif adalah bagian penting dalam membuat web menjadi tempat yang lebih baik, mari terus bergerak maju dan mengubah kehidupan.

Lihat sumber daya hebat lainnya di sini di CSS-Tricks menggunakan :fokus-dalam.

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• PlatoData.Jaringan Vertikal Generatif Ai. Berdayakan Diri Anda. Akses Di Sini.
• PlatoAiStream. Intelijen Web3. Pengetahuan Diperkuat. Akses Di Sini.
• PlatoESG. Karbon, teknologi bersih, energi, Lingkungan Hidup, Tenaga surya, Penanganan limbah. Akses Di Sini.
• PlatoHealth. Kecerdasan Uji Coba Biotek dan Klinis. Akses Di Sini.
• Sumber: https://css-tricks.com/accessible-forms-with-pseudo-classes/