Pada artikel sebelumnya, kita telah membahas bahwa aksesibilitas (Accessibility atau a11y) bukan sekadar fitur tambahan, melainkan bagian dari kualitas sebuah website. Website yang aksesibel tidak hanya lebih mudah digunakan oleh penyandang disabilitas, tetapi juga lebih mudah dipahami oleh browser, mesin pencari, dan pengembang lain yang akan memelihara kode tersebut.

Fondasi pertama dari website yang aksesibel adalah struktur HTML yang benar.

Bayangkan Anda memasuki sebuah supermarket besar tanpa satu pun papan petunjuk. Tidak ada tulisan "Buah", "Minuman", "Kasir", atau "Pintu Keluar". Semua lorong terlihat sama. Anda tentu masih bisa berkeliling, tetapi akan membutuhkan waktu lebih lama untuk menemukan barang yang dicari.

Hal serupa dapat terjadi pada pengguna screen reader ketika sebuah website dibangun hanya menggunakan elemen <div> tanpa struktur HTML yang semantik. Isi halaman memang tetap dapat dibaca, tetapi screen reader kehilangan informasi penting mengenai bagian-bagian halaman, seperti navigasi, konten utama, atau footer. Akibatnya, proses navigasi menjadi jauh lebih sulit.

Pada artikel ini kita akan mempelajari bagaimana mengubah halaman web dari sekadar kumpulan <div> menjadi struktur HTML yang bermakna menggunakan HTML Semantik.

Masalah Utama: "Div Soup"

Istilah Div Soup digunakan untuk menggambarkan halaman web yang hampir seluruh strukturnya dibangun menggunakan elemen <div>.

Contohnya seperti berikut.

Secara tampilan, halaman tersebut mungkin terlihat baik karena CSS dapat mengubahnya menjadi antarmuka yang menarik.

Namun dari sudut pandang browser, screen reader, maupun teknologi bantu lainnya, semua bagian tersebut hanyalah kumpulan elemen <div> yang tidak memiliki arti khusus.

Class seperti:

hanya dipahami oleh developer dan CSS, bukan oleh teknologi bantu.

Solusinya: Gunakan HTML Semantik

HTML5 menyediakan berbagai elemen yang memiliki makna bawaan (built-in semantics). Beberapa di antaranya juga berfungsi sebagai landmark, yaitu penanda bagian penting halaman yang dapat dikenali oleh browser dan teknologi bantu.

Berikut elemen yang paling sering digunakan.

Transformasi: Sebelum dan Sesudah

Mari kita ubah struktur sebelumnya menjadi HTML semantik.

Sekarang struktur halaman menjadi jauh lebih mudah dipahami, baik oleh browser maupun teknologi bantu.

Mengapa HTML Semantik Sangat Penting?

1. Mempermudah Navigasi bagi Pengguna Screen Reader

Sebagian besar screen reader menyediakan fitur untuk berpindah langsung ke bagian penting halaman, seperti:

1. Navigation (<nav>)
2. Main Content (<main>)
3. Banner (<header>)
4. Footer (<footer>)

Pengguna tidak perlu membaca halaman dari awal setiap kali membuka sebuah website. Mereka dapat langsung menuju bagian yang diinginkan.

Jika halaman hanya terdiri dari <div>, informasi mengenai struktur tersebut menjadi jauh berkurang sehingga navigasi menjadi kurang efisien.

2. Membantu Browser dan Teknologi Bantu Memahami Struktur Halaman

HTML semantik memberikan informasi mengenai fungsi setiap bagian halaman.

Sebagai contoh:

1. browser mengetahui mana area navigasi;
2. screen reader mengetahui lokasi konten utama;
3. teknologi bantu dapat menyajikan struktur halaman dengan lebih jelas.

Hal ini membuat pengalaman pengguna menjadi lebih baik, terutama bagi pengguna yang mengandalkan keyboard atau pembaca layar.

3. Mendukung Praktik SEO yang Baik

Mesin pencari seperti Google menggunakan struktur HTML sebagai salah satu cara untuk memahami isi sebuah halaman.

Penggunaan elemen semantik, heading yang benar, serta struktur dokumen yang jelas membantu mesin pencari mengenali bagian-bagian penting halaman. Meskipun hal ini tidak secara otomatis meningkatkan peringkat pencarian, struktur HTML yang baik merupakan bagian dari praktik SEO yang direkomendasikan.

Praktik Instan: Periksa Struktur HTML Anda

Buka file HTML atau komponen frontend yang sedang Anda kerjakan.

Kemudian periksa beberapa hal berikut.

1. Apakah area navigasi utama masih menggunakan <div class="menu">? Jika ya, pertimbangkan menggunakan <nav>.
2. Apakah konten utama halaman sudah menggunakan <main>?
3. Apakah bagian kaki halaman masih menggunakan <div id="footer">? Jika memang merupakan footer halaman, gunakan <footer>.
4. Apakah setiap <section> sudah memiliki heading yang menjelaskan isi bagiannya?

Perubahan-perubahan sederhana tersebut akan membantu browser, screen reader, dan teknologi bantu memahami struktur halaman dengan lebih baik.

Penggunaan HTML semantik juga mendukung pemenuhan WCAG Success Criterion 1.3.1 – Info and Relationships, meskipun kepatuhan terhadap kriteria tersebut tetap bergantung pada aspek lain, seperti penggunaan heading yang benar, label formulir yang jelas, serta hubungan antar elemen yang sesuai.

Ringkasan

HTML semantik bukan sekadar membuat kode terlihat lebih rapi. Elemen-elemen seperti <header>, <nav>, <main>, <article>, <section>, <aside>, dan <footer> membantu membangun struktur halaman yang dapat dipahami oleh manusia, browser, mesin pencari, dan teknologi bantu.

Dengan menggunakan elemen yang sesuai dengan fungsinya, Anda tidak hanya meningkatkan kualitas kode, tetapi juga menghadirkan pengalaman yang lebih inklusif bagi seluruh pengguna. Dalam pengembangan web modern, HTML semantik adalah fondasi penting menuju website yang lebih mudah diakses, lebih mudah dipelihara, dan lebih sesuai dengan prinsip-prinsip WCAG.