Pernahkah Anda berhenti sejenak untuk bertanya-tanya bagaimana teknologi pendukung, seperti pembaca layar, mengetahui apa yang harus diumumkan kepada pengguna? Jawabannya adalah teknologi ini mengandalkan developer yang memberi markup pada halaman mereka dengan HTML semantik. Namun, apa itu semantik, dan bagaimana pembaca layar menggunakannya?
Kemampuan dan semantik
Sebelum mempelajari semantik, sebaiknya pahami istilah lain: affordance. Affordance adalah objek apa pun yang menawarkan, atau memberi, penggunanya kesempatan untuk melakukan tindakan. Contoh klasiknya adalah teko:
Teko ini tidak memerlukan manual petunjuk; sebagai gantinya, desain fisiknya memberi tahu pengguna cara mengoperasikannya. Alat ini memiliki pegangan, dan karena Anda telah melihat objek lain di dunia dengan pegangan serupa, Anda dapat menyimpulkan cara mengambil dan mengoperasikannya.
Saat membuat antarmuka pengguna grafis, kita menggunakan hal-hal seperti CSS untuk menambahkan affordance visual ke UI. Misalnya, Anda dapat memberi tombol bayangan jatuh dan batas sehingga menyerupai tombol yang 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 Anda dibuat dengan cara yang dapat menyampaikan kemampuan yang sama ini ke teknologi bantuan. 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 semantik.
Dengan menggunakan CSS, Anda dapat
memberi gaya pada elemen <div> dan <button> sehingga elemen tersebut 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 kepada pengguna bahwa ini adalah sesuatu yang dapat mereka gunakan untuk berinteraksi.
Solusi paling sederhana
dan sering kali terbaik untuk masalah ini
adalah menghindari kontrol interaktif kustom sepenuhnya.
Misalnya, ganti <div> yang berfungsi 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
- Nilai (opsional)
- status (opsional)
Peran elemen menjelaskan jenisnya, misalnya, "tombol", "input", atau bahkan
"grup" untuk hal-hal seperti elemen div dan span.
Nama elemen adalah label yang dikomputasi. Pembaca layar biasanya mengumumkan
nama elemen, diikuti dengan perannya, misalnya "Daftar, tombol". Algoritma
yang menentukan faktor nama elemen dalam 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.
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 menunjukkan statusnya saat ini.
Misalnya, elemen <select> dapat berada dalam status diperluas atau
ditutup, bergantung pada apakah elemen tersebut terbuka atau tertutup.
Hierarki aksesibilitas
Untuk setiap node di DOM, browser menentukan apakah node tersebut secara semantik "menarik" dan menambahkannya ke hierarki aksesibilitas. Saat teknologi pendukung, seperti pembaca layar, menyediakan UI alternatif kepada pengguna, teknologi tersebut sering melakukannya dengan menelusuri hierarki aksesibilitas ini.
Dengan menggunakan DevTools Chrome, Anda dapat memeriksa properti semantik elemen dan mempelajari posisinya dalam hierarki aksesibilitas.
Langkah berikutnya
Setelah mengetahui sedikit tentang semantik dan cara semantik membantu navigasi pembaca layar, Anda tidak dapat tidak melihat halaman yang Anda buat secara berbeda. Di bagian berikutnya, kita akan mundur sejenak dan mempertimbangkan bagaimana seluruh garis besar halaman dapat disampaikan menggunakan judul dan penanda yang efektif.