DEV Community

Eris Sulistina
Eris Sulistina

Posted on

📝 Kasih Panggung untuk Attribute karena Accesibility perlu disambut

#webdev #css #indonesia

Selector untuk memberikan style ke elemen dapat menggunakan banyak cara yang di antaranya adalah Universal Selector *, Type Selector header, ID selector #header, Class Selector: .header, dan selector lainnya. Tapi dari sekian banyaknya selector, saya lebih sering menggunakan dan melihat developer lain menggunakan class selector untuk memberikan style. Saya paham penggunaan class lebih fleksibel, tapi bukan berarti kamu perlu menggunakannya di semua tempat. Bisa jadi kamu hanya membutuhkan type selector, atau bisa jadi kamu hanya membutuhkan attribute selector. Penggunaan class di semua tempat akan membutakan matamu terhadap kemampuan-kemampuan unik dari selector lain.

Selain attribute, ternyata accessibility juga sering diabaikan oleh developer. Walaupun pengerjaannya seakan membuat developer jadi kerja 2 kali, tapi penerapan accessibility akan membuat website lebih sehat, lebih banyak merangkul user, dan akan menaikkan value kamu sebagai developer.

Pada tulisan ini saya akan membukakan matamu agar lebih perhatian terhadap attribute selector sekaligus penggunaannya bersamaan dengan accessibility.

🤔 Apa Itu Attribute Selector?

Attribute selector adalah jenis selector yang menargetkan elemen berdasarkan atribut HTML-nya. Aturan penulisannya adalah nama elemen diapit oleh kurung siku [attribute].

/* Menargetkan elemen yang memiliki atribut hidden */
[hidden] { .... }

/* Menargetkan elemen input yang memiliki atribut required */
input[required] { .... }

/* Menargetkan elemen yang memiliki atribut aria-hidden dengan value true */
[aria-hidden="true"] { .... }
Enter fullscreen mode Exit fullscreen mode

🎯 Kapan Attribute Selector Lebih Baik?

  1. Atribut memiliki arti semantik/fungsional yang jelas
  2. Tidak memungkinkan atau tidak efisien menambahkan class
  3. Kamu ingin styling berdasarkan data- attribute

✅ Atribut Semantik

💡 Contoh 1: Alert UI 

<div role="alert" aria-live="assertive">
    Berhasil mengupdate profile
</div>
Enter fullscreen mode Exit fullscreen mode 
[role="alert"] {
    background-color: green;
}
Enter fullscreen mode Exit fullscreen mode

Tanpa perlu class .alert, kita bisa styling berdasarkan arti semantiknya langsung.

💡 Contoh 2: Form Wajib Isi 

<form action="#">
    <div>
        <label for="name">Name</label>
        <input type="text" required>
    </div>
</form>
Enter fullscreen mode Exit fullscreen mode 
label:has(+ [required])::after {
    content: "*"
}
Enter fullscreen mode Exit fullscreen mode

Selector ini membantu kita untuk memberikan indikator visual ke field yang wajib diisi.

💡 Contoh 3: Tab UI 

<button role="tab" aria-selected="true">Tab 1</button>
Enter fullscreen mode Exit fullscreen mode 
[aria-selected="true"] {
    color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Selector ini bisa menggantikan class .active dengan lebih semantik.

💡 Contoh 4: Navigation Aktif 

<a href="/" aria-current="page">Beranda</a>
Enter fullscreen mode Exit fullscreen mode 
[aria-current="page"] {
    color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Aksesibilitas dapet, styling pun tetap rapi.

🚫 Tidak memungkinkan atau tidak efisien menggunakan class

💡 Contoh 1: Elemen dari Framework 

<button type="button" data-bs-button>Click</button>
Enter fullscreen mode Exit fullscreen mode 
[data-bs-button] {
    background-color: indigo;
}
Enter fullscreen mode Exit fullscreen mode

Kalau elemen dari third-party library gak bisa diutak-atik, ini solusinya.

💡 Contoh 2: Deteksi Gambar Tanpa alt 

<img src="https://picsum.photos/600/400">
Enter fullscreen mode Exit fullscreen mode 
img:not([alt]), img[alt=""] {
    filter: blur(4px);
}
Enter fullscreen mode Exit fullscreen mode

Bisa buat debugging atau memperingatkan kalau ada gambar yang lupa dikasih deskripsi.

💡 Contoh 3: Label tanpa for 

<label>Name</label>
<input id="name">
Enter fullscreen mode Exit fullscreen mode 
label:not([for]), label[for=""] {
    opacity: .3;
}
Enter fullscreen mode Exit fullscreen mode

Bantu mendeteksi potensi masalah UX di form.

⚙️ Styling Berdasarkan data-* Attribute

💡 Contoh 1: Dark Mode 

<html lang="en" data-theme="dark">
Enter fullscreen mode Exit fullscreen mode 
[data-theme="dark"] {
    background-color: black;
}
Enter fullscreen mode Exit fullscreen mode

💡 Contoh 2: Variant Button 

<button data-variant="primary">Submit</button>
Enter fullscreen mode Exit fullscreen mode 
button[data-variant="primary"] {
    background-color: cyan;
}
Enter fullscreen mode Exit fullscreen mode

✨ Penutup

Semoga tulisan ini bisa bikin kamu lebih terbuka untuk mempertimbangkan attribute selector dalam styling, terutama untuk kasus-kasus yang menyangkut semantik dan aksesibilitas.

Dengan pemakaian yang tepat, kita bisa menulis CSS yang:

  • Lebih bersih
  • Lebih semantik
  • Lebih inklusif

Yuk, mulai sekarang, kasih panggung untuk attribute karena accessibility perlu disambut 🙌

Punya trik menarik dengan attribute selector? Share di kolom komentar ya!

Kalau kamu suka artikel ini, jangan lupa 💖 save, 🗨️ comment, dan 🔁 share ke teman developer lainnya!

Sampai jumpa di tulisan berikutnya 👋

Top comments (0)