Mengapa aksesibilitas ada
Aksesibilitas adalah sifat halaman yang bisa dipakai semua orang, termasuk orang dengan disabilitas. Singkatannya a11y, huruf a, sebelas huruf di tengah, lalu huruf y. Angkanya bukan kategori kecil. WHO memperkirakan sekitar 1,3 miliar orang, sekitar satu dari enam manusia, hidup dengan disabilitas yang berarti.
Yang terbantu bukan cuma satu kelompok. Orang buta warna sulit membedakan pesan kesalahan yang hanya ditandai merah. Pengguna dengan gangguan motorik mungkin tidak bisa menekan tombol kecil, tapi lancar memakai keyboard. Pengguna tua butuh teks lebih besar dan kontras lebih jelas. Aksesibilitas juga menolong semua orang di saat tertentu, subtitle di kereta yang bising, keyboard saat mouse rusak, alt text saat gambar gagal dimuat.
Halaman yang tidak aksesibel menolak pembaca tanpa pernah mengatakannya. Kabar baiknya, bedanya dengan halaman yang aksesibel sering bukan fitur tambahan, melainkan pilihan elemen yang lebih benar sejak awal.
Bagaimana halaman dibaca tanpa mata
Alat yang paling sering mewakili pengguna disabilitas disebut teknologi bantu, perangkat lunak atau alat yang membantu orang memakai komputer. Contohnya pembaca layar, perangkat lunak yang membacakan isi layar dengan suara.
Pembaca layar tidak melihat tampilan. Ia membaca pohon DOM, struktur objek yang dibangun browser dari HTML seperti di bab 8. Lewat DOM itulah ia tahu mana judul, mana tombol, mana daftar, dan urutan bacanya mengikuti urutan elemen di HTML. Halaman dengan HTML rapi sudah setengah aksesibel. Halaman dengan tumpukan div tanpa makna terdengar seperti kalimat tanpa tanda baca.
HTML semantik adalah fondasi
Bab 2 memperkenalkan elemen semantik, elemen yang membawa makna, bukan sekadar kotak. Ini fondasi aksesibilitas yang paling murah. Elemen <button> lahir dengan tiga kemampuan sekaligus, bisa menerima fokus, bisa ditekan dengan Enter dan Spasi, dan diumumkan pembaca layar sebagai tombol. Elemen <div> dengan pendengar klik hanya bisa satu hal, diklik mouse.
Aturan pertamanya sederhana. Sebelum menambah apa pun, pilih elemen HTML yang benar. <label> untuk nama input, <nav> untuk navigasi, <button> untuk aksi, <img> dengan alt untuk gambar. Bagian besar pekerjaan aksesibilitas selesai sebelum JavaScript menyentuh apa pun.
Keyboard harus selalu jalan
Uji tercepat sebuah halaman aksesibel, cabut mouse lalu coba pakai halamannya dengan Tab. Saat berpindah dengan Tab, satu elemen ditandai kotak atau cincin. Tanda itu disebut fokus, penanda letak aksi keyboard berikutnya akan mendarat. Urutannya mengikuti urutan elemen di HTML, jadi HTML yang tertata logis menghasilkan urutan keyboard yang logis.
Kebiasaan yang merusak ini biasanya kecil. Outline fokus yang dihapus karena dianggap mengganggu, tombol tiruan dari div, atau urutan elemen yang dibalik lewat CSS. Kalau suatu elemen memang bukan elemen bawaan yang bisa difokus, atribut tabindex="0" bisa memasukkannya ke urutan Tab. Tetapi kalau solusinya butuh tabindex, biasanya elemennya salah dari awal.
Alt text dan kontras
Dua hal kecil yang sering terlewat. Pertama alt text, isi atribut alt yang menjelaskan gambar dalam teks untuk yang tidak bisa melihatnya. Kalimatnya pendek dan menjelaskan isi gambar, misalnya "grafik konsumsi kopi naik dua kali lipat". Gambar dekoratif yang tidak membawa informasi diberi alt="" kosong, agar dilewati pembaca layar, bukan dibacakan sebagai "gambar".
Kedua kontras, ukuran perbedaan terang antara warna teks dan warna latarnya. Teks abu muda di atas putih sering tidak terbaca bagi pengguna dengan penglihatan rendah. Standar dunia untuk ini bernama WCAG, Web Content Accessibility Guidelines, kumpulan pedoman aksesibilitas web yang jadi rujukan di banyak negara. WCAG menetapkan rasio kontras minimal untuk teks, dan DevTools punya pemeriksa kontras bawaan untuk mengujinya.
ARIA, tambahan bukan pengganti
Ada keadaan saat HTML baku tidak cukup menjelaskan. Tombol yang membuka dan menutup bagian halaman, misalnya, sebaiknya mengumumkan keadaannya, terbuka atau tertutup. Untuk ini ada ARIA, Accessible Rich Internet Applications, kumpulan atribut yang menambahkan makna ke elemen. Atribut aria-expanded="true" pada tombol memberi tahu pembaca layar bahwa tombol itu membuka bagian lain yang sedang terbuka.
Aturan pakainya jelas, ARIA adalah jalan terakhir. Elemen HTML yang benar mengalahkan elemen salah yang diberi ARIA. ARIA di elemen yang salah bahkan bisa menipu, seperti papan petunjuk yang dipasang di tembok mati.
Analogi: tangga dan ram
Satu gambar untuk semuanya. Gedung yang hanya punya tangga menolak pengguna kursi roda. Gedung dengan ram, jalan landai di sisi tangga, menerima semua orang, termasuk tamu yang bawa koper dan orang yang dorong kereta bayi. Itulah aksesibilitas web. HTML semantik adalah pintu lebar yang sudah baku. Keyboard dan fokus adalah ramnya, jalan masuk tanpa tangga. Alt text dan kontras adalah pencahayaan dan label ruangannya. ARIA adalah papan petunjuk tambahan, dipasang hanya kalau pintu baku tidak menjelaskan apa pun.
Pasangan contoh
Contohnya tombol buka tutup daftar belanja. Tombol yang benar memakai elemen <button>, atribut aria-expanded, dan daftar yang disembunyikan dengan atribut hidden. Vanilanya menyimpan dua elemen di variabel, pendengar klik membaca keadaan sekarang, membalik properti hidden, lalu menulis ulang aria-expanded dan teks tombol. React-nya menyimpan keadaan terbuka di state, atribut aria-expanded dan isi tombol ditulis dari state yang sama, dan daftar hanya muncul saat terbuka benar. JSX di kolom kanan sudah diajarkan di bab 15.
Vanilla JavaScript
<button id="tombol-daftar" aria-expanded="false">
Tampilkan daftar
</button>
<ul id="daftar" hidden>
<li>Kopi</li>
<li>Teh</li>
<li>Gula</li>
</ul>
const tombol = document.querySelector("#tombol-daftar");
const daftar = document.querySelector("#daftar");
tombol.addEventListener("click", function () {
const terbuka =
tombol.getAttribute("aria-expanded") === "true";
daftar.hidden = terbuka;
tombol.setAttribute("aria-expanded", String(!terbuka));
tombol.textContent = terbuka
? "Tampilkan daftar"
: "Sembunyikan daftar";
});React
function DaftarBelanja() {
const [terbuka, setTerbuka] = React.useState(false);
return (
<>
<button aria-expanded={terbuka}
onClick={() => setTerbuka(!terbuka)}>
{terbuka ? "Sembunyikan daftar"
: "Tampilkan daftar"}
</button>
{terbuka && (
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Gula</li>
</ul>
)}
</>
);
}Perbedaan inti bab ini ada di sini. Aksesibilitas tidak berpindah antara stack, sebutan untuk pasangan teknologi yang dipakai, di sini vanilla atau React. Kedua versi memakai elemen dan atribut yang sama persis, <button> dan aria-expanded. Yang berganti hanya cara nilainya diperbarui, perintah DOM langsung di vanilla, state yang menurunkan atribut di React. Prinsip yang dipelajari sekali, dipakai di dua dunia.
Demo Hidup
Demo memasang tombol buka tutup yang sama dengan pasangan contoh, vanilla JavaScript tanpa build tool. Tekan tombolnya dengan mouse, daftar muncul. Lalu coba tanpa mouse, tekan Tab sampai tombolnya mendapat cincin fokus, tekan Enter atau Spasi, dan perilakunya sama persis.
Demo ini memakai elemen button sungguhan dan atribut aria-expanded. Tanpa mouse pun tetap bisa dipakai, dan cincin fokusnya terlihat saat tombol ditab.
- Kopi
- Teh
- Gula
Buka DevTools, pilih elemen tombolnya, dan lihat aria-expanded berpindah antara false dan true setiap kali ditekan.
Begini cara baca demonya. Pendengar klik membaca keadaan sekarang dari atribut aria-expanded, true berarti daftar sedang terbuka. Nilai itu dipakai untuk mengisi properti hidden daftar, maka daftar berpindah tersembunyi dan terlihat. setAttribute menulis ulang aria-expanded dengan kebalikannya, dan teks tombol mengikuti. Pembaca layar yang mendengar aria-expanded berpindah ke false tahu persis bahwa daftarnya ikut tertutup, tanpa melihat apa pun.
Ringkasan bab ini. Aksesibilitas berarti halaman bisa dipakai semua orang, dan teknologi bantu membacanya lewat pohon DOM. Fondasinya HTML semantik, diteruskan dengan keyboard dan fokus, alt text, kontras, lalu ARIA sebagai tambahan terakhir. Bab berikutnya kembali ke tampilan, styling modern dengan variabel dan design token.