Pernahkah Anda bertanya-tanya bagaimana teknologi pendukung, seperti pembaca layar, mengetahui apa yang harus diumumkan kepada pengguna? Jawabannya adalah bahwa teknologi ini mengandalkan developer yang me-markup halaman mereka dengan HTML semantik. Namun, apa itu semantik, dan bagaimana pembaca layar menggunakannya?
Kemampuan dan semantik
Sebelum mempelajari semantik, sebaiknya pahami istilah lain: kemampuan. {i>affordance<i} adalah objek yang menawarkan, atau memberi, penggunanya peluang untuk melakukan suatu tindakan. Contoh klasiknya adalah teko:
Teko ini tidak memerlukan panduan petunjuk. Sebagai gantinya, desain fisiknya akan memberi tahu pengguna cara pengoperasiannya. Alat ini memiliki handle, dan karena Anda telah melihat objek lain di dunia dengan handle yang serupa, Anda dapat menyimpulkan cara mengambil dan mengoperasikannya.
Ketika membuat antarmuka pengguna grafis, kita menggunakan hal-hal seperti CSS untuk menambahkan kemampuan visual ke UI. Misalnya, Anda dapat memberi tombol sebuah drop shadow dan batas sehingga menyerupai tombol sebenarnya di dunia nyata.
Namun, jika pengguna tidak dapat melihat layar, kemampuan visual ini tidak akan disampaikan kepada mereka. Oleh karena itu, Anda perlu memastikan bahwa UI dibuat dengan cara yang dapat menyampaikan kemampuan yang sama ini kepada teknologi pendukung. Eksposur non-visual dari kemampuan elemen UI ini disebut semantik.
Menggunakan HTML semantik
Cara termudah untuk menyampaikan semantik yang tepat adalah dengan menggunakan elemen HTML yang kaya secara semantik.
Dengan CSS, Anda dapat
menata gaya elemen <div> dan <button> agar menyampaikan kemampuan visual yang sama,
tetapi kedua pengalaman tersebut sangat berbeda saat menggunakan pembaca layar.
<div> hanyalah elemen pengelompokan generik,
sehingga pembaca layar hanya membacakan konten teks <div>.
<button> diumumkan sebagai "tombol",
sinyal yang jauh lebih kuat bagi pengguna bahwa mereka dapat berinteraksi dengan sesuatu hal tersebut.
Solusi paling sederhana dan sering kali untuk masalah ini adalah dengan menghindari kontrol interaktif kustom sama sekali.
Misalnya, ganti <div> yang bertindak seperti tombol
dengan <button> yang sebenarnya.
Properti semantik dan hierarki aksesibilitas
Secara umum, setiap elemen HTML akan memiliki beberapa properti semantik berikut:
- Peran atau jenis
- Nama
- value (opsional)
- state (opsional)
Peran elemen menjelaskan jenisnya, misalnya, "tombol", "input", atau bahkan hanya
"group" untuk hal-hal seperti elemen div dan span.
Nama elemen adalah label yang dihitung. Pembaca layar biasanya mengucapkan
nama elemen diikuti dengan perannya, misalnya "Daftar, tombol". Algoritma
yang menentukan nama elemen berdasarkan hal-hal seperti apakah ada konten teks
di dalam elemen, apakah elemen tersebut memiliki atribut seperti title
atau placeholder, apakah elemen tersebut terkait dengan elemen <label>
yang sebenarnya, dan apakah elemen tersebut memiliki atribut ARIA seperti
aria-label dan aria-labelledby atau tidak.
Beberapa elemen mungkin memiliki nilai. Misalnya, <input type="text"> mungkin
memiliki nilai yang mencerminkan apa pun yang telah diketik pengguna di kolom teks.
Beberapa elemen mungkin juga memiliki state, yang menunjukkan statusnya saat ini.
Misalnya, elemen <select> dapat berada dalam status diperluas atau diciutkan, bergantung pada apakah elemen tersebut terbuka atau tertutup.
Hierarki aksesibilitas
Untuk setiap node dalam DOM, browser akan menentukan apakah node "menarik" secara semantik dan menambahkannya ke hierarki aksesibilitas. Saat teknologi pendukung, seperti pembaca layar, menyediakan UI alternatif kepada pengguna, teknologi tersebut sering kali melakukannya dengan mengikuti hierarki aksesibilitas ini.
Dengan Chrome DevTools, Anda dapat memeriksa properti semantik elemen dan mempelajari posisinya di hierarki aksesibilitas.
Langkah berikutnya
Setelah mengetahui sedikit tentang semantik dan bagaimana semantik membantu navigasi pembaca layar, Anda akan mempertimbangkan untuk melihat halaman yang Anda buat secara berbeda. Di bagian berikutnya, kita akan mundur ke belakang dan mempertimbangkan bagaimana seluruh garis batas halaman dapat disampaikan menggunakan judul dan penanda yang efektif.