Pernahkah Anda berhenti sejenak untuk bertanya-tanya bagaimana teknologi pendukung, seperti pembaca layar, mengetahui apa yang harus diumumkan kepada pengguna? Jawabannya adalah bahwa teknologi ini mengandalkan developer yang memberi markup halaman mereka dengan HTML semantik. Namun, apa itu semantik, dan bagaimana pembaca layar menggunakannya?
Kemampuan dan semantik
Sebelum mempelajari semantik, sebaiknya pahami dulu afordans. Afordans adalah objek apa pun yang menawarkan peluang kepada penggunanya untuk melakukan tindakan. Contoh klasiknya adalah teko:
Tekonya tidak memerlukan buku petunjuk. Sebaliknya, desain fisiknya memberi tahu pengguna cara mengoperasikannya. Objek tersebut memiliki pegangan, dan karena Anda telah melihat objek lain di dunia dengan pegangan serupa, Anda dapat menyimpulkan cara mengambil dan mengoperasikannya.
Saat membangun antarmuka pengguna grafis, kita menggunakan CSS untuk menambahkan afordans visual ke antarmuka kita. Misalnya, Anda dapat memberikan bayangan drop dan batas pada tombol agar menyerupai tombol sebenarnya di dunia nyata.
Namun, bagi pengguna yang tidak dapat melihat layar, kemampuan visual ini tidak disampaikan kepada mereka. Oleh karena itu, Anda harus memastikan bahwa antarmuka Anda dibuat sedemikian rupa sehingga dapat menyampaikan kemampuan yang sama ini ke teknologi pendukung. Eksposur non-visual terhadap kemampuan elemen UI ini disebut semantiknya.
Menulis HTML semantik
Cara termudah untuk menyampaikan semantik yang tepat adalah dengan menggunakan elemen HTML yang kaya semantik.
Dengan menggunakan CSS, elemen <div> dan <button> dapat diberi gaya sehingga
menyampaikan kemampuan visual yang sama, tetapi kedua pengalaman tersebut sangat berbeda
saat menggunakan pembaca layar. <div> hanyalah elemen pengelompokan generik,
sehingga pembaca layar hanya mengumumkan konten teks <div>.
<button> diumumkan sebagai "tombol", sinyal yang jauh lebih kuat bagi pengguna
bahwa itu adalah sesuatu yang dapat mereka ajak berinteraksi.
Sering kali, solusi terbaik untuk masalah ini adalah menghindari kontrol interaktif kustom sama sekali. Misalnya, ganti <div> yang bertindak seperti tombol dengan <button> yang sebenarnya.
Properti semantik dan pohon aksesibilitas
Secara umum, setiap elemen HTML akan memiliki beberapa properti semantik berikut:
- Peran atau jenis
- Nama
- Nilai (opsional)
- state (opsional)
Peran elemen mendeskripsikan jenisnya, misalnya, "tombol", "input", atau bahkan hanya "grup" untuk hal-hal seperti elemen div dan span.
Nama elemen adalah label yang dikomputasinya. Pembaca layar biasanya mengumumkan nama elemen, diikuti dengan perannya, seperti "Daftar, tombol". Algoritma yang menentukan nama elemen mempertimbangkan hal-hal seperti apakah ada konten teks di dalam elemen, apakah elemen memiliki atribut seperti title atau placeholder, apakah elemen dikaitkan dengan elemen <label> yang sebenarnya, dan apakah elemen memiliki atribut ARIA seperti aria-label dan aria-labelledby.
Beberapa elemen mungkin memiliki nilai. Misalnya, <input type="text"> mungkin memiliki nilai yang mencerminkan apa pun yang telah diketik pengguna ke dalam kolom teks.
Beberapa elemen mungkin juga memiliki status, yang menyampaikan statusnya saat ini.
Misalnya, elemen <select> dapat berada dalam status diluaskan atau
dikecilkan, bergantung pada apakah elemen tersebut terbuka atau tertutup.
Hierarki aksesibilitas
Untuk setiap node di DOM, browser menentukan apakah node tersebut "menarik" secara semantik dan menambahkannya ke pohon aksesibilitas. Saat teknologi pendukung, seperti pembaca layar, menyediakan UI alternatif kepada pengguna, teknologi tersebut sering kali melakukannya dengan menelusuri hierarki aksesibilitas ini.
Dengan Chrome DevTools, Anda dapat memeriksa properti semantik elemen dan menjelajahi posisinya di pohon aksesibilitas.
Langkah berikutnya
Setelah Anda mengetahui sedikit tentang semantik dan cara semantik membantu navigasi pembaca layar, Anda pasti akan melihat halaman yang Anda buat secara berbeda. Di bagian berikutnya, kita akan mundur selangkah dan mempertimbangkan bagaimana keseluruhan struktur halaman dapat disampaikan menggunakan judul dan penanda yang efektif.