Pernahkah Anda bertanya-tanya bagaimana teknologi pendukung, seperti layar pembaca, tahu apa yang harus diumumkan kepada pengguna? Jawabannya adalah bahwa teknologi ini mengandalkan developer yang menandai halaman mereka dengan HTML semantik. Namun, apa semantik, dan bagaimana pembaca layar menggunakannya?
{i>Affordances<i} dan semantik
Sebelum mendalami semantik, sebaiknya pahami istilah lain: kemampuan. {i>affordance<i} adalah objek apa pun yang menawarkan, atau memberikan, penggunanya kesempatan untuk melakukan suatu tindakan. Contoh yang klasik adalah teko teh:
Teko ini tidak memerlukan manual petunjuk; alih-alih desain fisiknya menyampaikan kepada pengguna bagaimana perangkat tersebut harus dioperasikan. Terdapat {i>handle<i}, dan karena melihat objek lain di dunia dengan {i>handle<i} yang serupa, Anda dapat menyimpulkan bagaimana Anda harus mengambilnya dan mengoperasikannya.
Saat membangun antarmuka pengguna grafis, kita menggunakan hal-hal seperti CSS untuk menambahkan {i>affordances<i} ke UI. Misalnya, Anda dapat memberikan {i>drop shadow<i} pada tombol dan {i>border<i} sehingga menyerupai tombol yang sebenarnya di dunia nyata.
Tetapi jika pengguna tidak dapat melihat layar, maka kemampuan visual ini akan tidak tersampaikan kepada mereka. Oleh karena itu, Anda perlu memastikan bahwa UI Anda dengan cara yang dapat menyampaikan kemampuan yang sama ini untuk membantu teknologi baru. Eksposur non-visual dari kemampuan elemen UI ini disebut semantiknya.
Menggunakan HTML semantik
Cara termudah untuk menyampaikan semantik yang tepat adalah menggunakan HTML yang kaya secara semantik yang kurang penting.
Dengan menggunakan CSS, Anda dapat
untuk menata gaya elemen <div> dan <button> sehingga menyampaikan kemampuan visual yang sama,
tetapi kedua pengalaman tersebut sangat berbeda
saat menggunakan {i>screen reader<i}.
<div> hanyalah elemen pengelompokan umum,
sehingga pembaca layar hanya mengucapkan konten teks <div>.
<button> diumumkan sebagai "tombol",
sinyal yang jauh lebih kuat kepada pengguna bahwa itu adalah sesuatu
yang dapat mereka gunakan untuk berinteraksi.
Cara termudah
dan sering kali menjadi solusi terbaik
untuk masalah ini
adalah menghindari kontrol interaktif kustom sama sekali.
Misalnya, ganti <div> yang berfungsi seperti tombol
dengan <button> aktual.
Properti semantik dan hierarki aksesibilitas
Secara umum, setiap elemen HTML akan memiliki beberapa properti:
- Peran atau jenis
- Nama
- Nilai (opsional)
- Status (opsional)
Peran elemen menjelaskan jenisnya, misalnya, "tombol", "masukan," atau bahkan hanya
"grup" untuk hal-hal seperti elemen div dan span.
Nama elemen adalah label yang dihitung. Pembaca layar biasanya membacakan
nama elemen diikuti dengan perannya, misalnya "Tombol Daftar". Algoritma
yang menentukan faktor nama elemen dalam hal-hal seperti apakah ada
konten di dalam elemen, baik memiliki atribut seperti title atau tidak
atau placeholder, terlepas dari apakah elemen tersebut terkait dengan atau tidak
<label>, dan jika elemen tersebut memiliki atribut ARIA apa pun seperti
aria-label dan aria-labelledby.
Beberapa elemen mungkin memiliki nilai. Misalnya, <input type="text"> mungkin
memiliki nilai yang mencerminkan apa pun yang diketik pengguna ke dalam kolom teks.
Beberapa elemen mungkin juga memiliki status, yang menunjukkan statusnya saat ini.
Misalnya, elemen <select> dapat berupa elemen diperluas atau
status diciutkan, bergantung pada apakah status terbuka atau tertutup.
Hierarki aksesibilitas
Untuk setiap simpul dalam DOM, browser akan menentukan apakah node secara semantik "menarik" dan menambahkannya ke aksesibilitas hierarki. Saat teknologi pendukung, seperti pembaca layar, menyediakan UI alternatif bagi pengguna, hal ini sering kali dilakukan dengan mengikuti pohon aksesibilitas ini.
Dengan DevTools Chrome, Anda dapat memeriksa semantik elemen properti dan mengeksplorasi posisinya di hierarki aksesibilitas.
Langkah berikutnya
Setelah Anda mengetahui sedikit tentang semantik dan bagaimana semantik itu membantu navigasi pembaca layar, Anda perlu melihat laman yang Anda buat secara berbeda. Pada bagian berikutnya, kita akan mundur selangkah dan mempertimbangkan bagaimana seluruh garis besar laman dapat disampaikan menggunakan judul dan penanda yang efektif.