Pengantar semantik

Pengantar semantik dan teknologi pendukung

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Anda telah melihat cara membuat situs dapat diakses oleh pengguna yang tidak dapat menggunakan mouse atau perangkat penunjuk — baik karena gangguan fisik, masalah teknologi, atau preferensi pribadi — dengan menangani penggunaan keyboard saja. Meskipun memerlukan kehati-hatian dan pemikiran, ini bukanlah pekerjaan yang besar jika Anda merencanakannya dari awal. Setelah pekerjaan dasar selesai, Anda akan melanjutkan ke situs yang dapat diakses sepenuhnya dan lebih rapi.

Dalam pelajaran ini, kita akan mengembangkan pekerjaan tersebut dan membuat Anda memikirkan faktor aksesibilitas lainnya, seperti cara membuat situs untuk mendukung pengguna seperti Victor Tsaran, yang tidak dapat melihat layar.

Pertama, kita akan mempelajari teknologi pendukung, yaitu istilah umum untuk alat seperti pembaca layar yang membantu pengguna yang memiliki gangguan fungsi agar tidak dapat mengakses informasi.

Selanjutnya, kita akan melihat beberapa konsep umum pengalaman pengguna dan mengembangkannya untuk lebih mendalami pengalaman pengguna teknologi pendukung.

Terakhir, kita akan melihat cara menggunakan HTML secara efektif untuk menciptakan pengalaman yang baik bagi para pengguna ini, dan bagaimana hal itu sedikit tumpang tindih dengan cara kita menangani fokus sebelumnya.

Teknologi bantu/pendukung

Teknologi pendukung adalah istilah umum untuk perangkat, software, dan alat yang membantu penyandang disabilitas menyelesaikan tugas. Dalam arti luas, teknologi ini dapat berupa teknologi rendah seperti kruk untuk berjalan atau kaca pembesar untuk membaca, atau teknologi tinggi seperti lengan robot atau software pengenalan citra di smartphone.

Contoh teknologi pendukung termasuk kaca pembesar kruk dan prostesis robot.

Teknologi pendukung dapat mencakup sesuatu yang umum seperti zoom browser, atau spesifik seperti pengontrol game yang dirancang khusus. Fitur ini dapat berupa perangkat fisik terpisah seperti penampil braille, atau diterapkan sepenuhnya dalam software seperti kontrol suara. Alat ini dapat menjadi bawaan dalam sistem operasi seperti pembaca layar tertentu, atau dapat berupa add-on seperti ekstensi Chrome.

Contoh teknologi pendukung lainnya termasuk penampil braille zoom browser dan
kontrol suara.

Garis antara teknologi pendukung dan teknologi secara umum kabur; bagaimana semua teknologi dimaksudkan untuk membantu orang melakukan beberapa tugas atau lainnya. Selain itu, teknologi sering kali dapat masuk dan keluar dari kategori "asistif".

Misalnya, salah satu produk sintesis ucapan komersial paling awal adalah kalkulator bicara untuk tunanetra. Sekarang sintesis ucapan ada di mana-mana, dari rute mobil hingga asisten virtual. Sebaliknya, teknologi yang pada awalnya bersifat umum sering kali digunakan sebagai alat bantu. Misalnya, orang dengan gangguan penglihatan dapat menggunakan zoom kamera smartphone untuk melihat lebih baik sesuatu yang kecil di dunia nyata.

Dalam konteks pengembangan web, kita harus mempertimbangkan berbagai teknologi. Orang dapat berinteraksi dengan situs Anda menggunakan pembaca layar atau penampil braille, dengan pembesar layar, melalui kontrol suara, menggunakan perangkat tombol akses, atau dengan bentuk teknologi pendukung lainnya yang menyesuaikan antarmuka default halaman untuk membuat antarmuka yang lebih spesifik yang dapat mereka gunakan.

Sebagian besar teknologi pendukung ini mengandalkan semantik yang dinyatakan secara terprogram untuk membuat pengalaman pengguna yang mudah diakses, dan itulah yang sebagian besar dibahas dalam pelajaran ini. Namun, sebelum dapat menjelaskan semantik yang dinyatakan secara terprogram, kita perlu sedikit membahas kemampuan.

Kemampuan

Saat menggunakan alat atau perangkat buatan manusia, biasanya kita melihat bentuk dan desainnya untuk mengetahui fungsi dan cara kerjanya. Kemampuan adalah objek yang menawarkan, atau memberi, penggunanya kesempatan untuk melakukan suatu tindakan. Semakin baik kemampuan desain tersebut, semakin jelas atau intuitif penggunaannya.

Contoh klasik adalah cerek atau teko. Anda dapat dengan mudah mengetahui bahwa Anda harus mengambilnya melalui pegangannya, bukan di lehernya, meskipun Anda belum pernah melihat teko sebelumnya.

Teko dengan pegangan dan cerat.

Hal itu dikarenakan kemampuannya mirip dengan yang Anda lihat pada banyak benda lainnya -- teko penyiram, teko minuman, cangkir kopi, dan sebagainya. Anda mungkin dapat mengambil pot dengan menyelipkannya, tetapi pengalaman dengan kemampuan serupa memberi tahu Anda bahwa pegangan adalah pilihan yang lebih baik.

Dalam antarmuka pengguna grafis (GUI), kemampuan mewakili tindakan yang dapat kita ambil, tetapi bisa jadi ambigu karena tidak ada objek fisik untuk berinteraksi. Dengan demikian, kemampuan GUI didesain khusus agar tidak ambigu: tombol, kotak centang, dan scroll bar dimaksudkan untuk menyampaikan penggunaannya dengan pelatihan yang sesedikit mungkin.

Misalnya, Anda dapat menguraikan penggunaan beberapa elemen bentuk umum (kemampuan) seperti ini:

  • Tombol pilihan — "Saya dapat memilih salah satu opsi ini."
  • Kotak centang — "Saya dapat memilih 'ya' atau 'tidak' untuk opsi ini".
  • Kolom teks — "Saya dapat mengetik sesuatu ke dalam area ini."
  • Dropdown — "Saya dapat membuka elemen ini untuk menampilkan opsi saya."

Anda dapat menarik kesimpulan tentang elemen-elemen ini hanya karena Anda dapat melihatnya. Secara alami, seseorang yang tidak dapat melihat petunjuk visual yang diberikan oleh suatu elemen tidak dapat memahami artinya atau secara intuitif memahami nilai kemampuannya. Jadi, kita harus memastikan bahwa informasi dinyatakan cukup fleksibel untuk diakses oleh teknologi pendukung yang dapat membuat antarmuka alternatif sesuai dengan kebutuhan penggunanya.

Eksposur non-visual dari penggunaan kemampuan ini disebut semantik.

Pembaca layar

Salah satu jenis teknologi pendukung yang populer adalah pembaca layar, yakni sebuah program yang memungkinkan penyandang gangguan penglihatan untuk menggunakan komputer dengan membacakan teks layar dengan keras menggunakan suara yang dihasilkan. Pengguna dapat mengontrol apa yang dibaca dengan memindahkan kursor ke area yang relevan dengan keyboard.

Kami meminta Victor Tsaran untuk menjelaskan bagaimana, sebagai orang tunanetra, ia dapat mengakses web menggunakan pembaca layar bawaan di OS X, yang disebut VoiceOver. Lihat video ini tentang Victor yang menggunakan VoiceOver.

Sekarang giliran Anda untuk mencoba menggunakan pembaca layar. Berikut ini halaman dengan ChromeVox Lite, pembaca layar minimal namun berfungsi yang ditulis dalam JavaScript. Layar sengaja diburamkan untuk menyimulasikan pengalaman penglihatan rendah dan memaksa pengguna menyelesaikan tugas dengan pembaca layar. Tentu saja, Anda perlu menggunakan browser Chrome untuk latihan ini.

Halaman demo ChromeVox lite

Anda dapat menggunakan panel kontrol di bagian bawah layar untuk mengontrol pembaca layar. Pembaca layar ini memiliki fungsi yang sangat minim, tetapi Anda dapat menjelajahi konten menggunakan tombol Previous dan Next, dan Anda dapat mengklik sesuatu menggunakan tombol Click.

Coba gunakan halaman ini dengan ChromeVox lite yang diaktifkan untuk memahami penggunaan pembaca layar. Pikirkan fakta bahwa pembaca layar (atau teknologi pendukung lainnya) sebenarnya menciptakan pengalaman pengguna alternatif yang lengkap bagi pengguna berdasarkan semantik yang dinyatakan secara terprogram. Alih-alih antarmuka visual, pembaca layar menyediakan antarmuka yang dapat didengar.

Perhatikan cara pembaca layar memberi tahu Anda beberapa informasi tentang setiap elemen antarmuka. Anda tentunya mengharapkan pembaca yang dirancang dengan baik untuk memberi tahu Anda semua, atau setidaknya, informasi berikut tentang elemen yang ditemukannya.

  • role atau jenis elemen, jika ditentukan (seharusnya).
  • Name elemen, jika memilikinya (seharusnya).
  • Nilai elemen, jika memilikinya (mungkin atau mungkin tidak).
  • state elemen, misalnya, apakah diaktifkan atau dinonaktifkan (jika berlaku).

Pembaca layar dapat menyusun UI alternatif ini karena elemen native berisi metadata aksesibilitas bawaan. Sama seperti mesin rendering yang menggunakan kode native untuk membuat antarmuka visual, pembaca layar menggunakan metadata dalam node DOM untuk membuat versi yang dapat diakses, seperti ini.

Pembaca layar menggunakan DOM untuk membuat node yang dapat diakses.