Pandangan ke ARIA Standar Web & Aksesibilitas Aplikasi HTML
Web yang benar-benar terbuka dan inklusif membutuhkan teknologi yang memungkinkan pengguna yang dinonaktifkan mengandalkan teknologi bantu untuk menikmati konten web yang dinamis dan aplikasi web modern. Standar web aksesibilitas W3C bertujuan untuk mengisi web dengan Aplikasi Internet yang Mudah Diakses (ARIA) yang dapat digunakan oleh pengguna penyandang cacat secara efisien.
ARIA adalah salah satu dari banyak standar aksesibilitas dan pedoman yang diterbitkan oleh Web Accessibility Intitiative (WAI). Ini memberikan markup tambahan yang dapat dengan mudah dimasukkan ke dalam dokumen HTML. WAI-ARIA adalah lintas-platform solusi lintas-perangkat yang menargetkan Platform Web Terbuka, jadi jangan hanya memikirkan situs web, tetapi juga tentang game, hiburan digital, perawatan kesehatan, seluler, dan jenis aplikasi lainnya.
Dalam posting ini kita akan melihat bagaimana Anda dapat menambahkan aksesibilitas ke dokumen HTML Anda dengan bantuan standar WAI-ARIA.
Kerangka ARIA
Sintaks HTML tidak selalu memungkinkan pengembang untuk menggambarkan elemen dengan benar, untuk mengidentifikasi peran mereka, dan menentukan hubungan di antara mereka. Meskipun itu jarang menjadi masalah bagi pengunjung yang memiliki indera penuh, hal itu dapat menghalangi pengguna teknologi pendamping untuk memahami apa yang terjadi di layar dan mengeksplorasi opsi mereka..
Ini adalah titik di mana ARIA datang untuk membantu kami, karena memungkinkan untuk menentukan tujuan berbagai elemen dengan bantuan peran tengara, dan menggambarkan sifat mereka dengan atribut awalan aria. Atribut awalan Aria memiliki dua jenis: properti yang menjelaskan fitur yang cenderung berubah sepanjang siklus hidup halaman, dan menyatakan yang menyediakan informasi tentang hal-hal yang mungkin sering berubah karena interaksi pengguna.
Peran Landmark
Peran tengara adalah bentuk yang paling terkenal dari Model Peran ARIA (yang lain adalah Peran Abstrak, Peran Widget, dan Peran Struktur Dokumen). Peran tengara memungkinkan pengembang mengidentifikasi besar daerah yang bisa dipahami pada halaman web yang pengguna teknologi bantu mungkin ingin dengan cepat mengakses.
Ada 8 jenis peran tengara ARIA, dan mereka perlu ditambahkan sebagai atribut pada tag HTML terkait.
peran =”spanduk”
Peran spanduk dimaksudkan untuk digunakan terutama untuk konten yang terkait dengan seluruh situs, tidak hanya untuk halaman individual. Biasanya ditambahkan sebagai atribut ke header utama situs untuk logo dan informasi penting lainnya di seluruh situs. Penting bahwa Anda dapat menggunakan peran banner hanya sekali dalam dokumen atau aplikasi HTML apa pun.
peran =”utama”
Peran tengara utama terkait dengan konten utama dokumen. Itu tidak dapat digunakan lebih dari sekali pada halaman HTML apa pun. Biasanya mengikuti Peran navigasi dimaksudkan untuk digunakan untuk menunjukkan area yang berisi elemen navigasi seperti tautan dan daftar di situs. Peran tengara pelengkap menjelaskan konten tambahan yang terkait dengan konten utama situs. Itu perlu ditempatkan ke tingkat yang sama dalam hirarki DOM sebagai Peran contentinfo menginformasikan agen pengguna tentang keberadaan kawasan tempat berbagai jenis metadata, seperti info hak cipta, pernyataan hukum dan privasi dapat ditemukan. Ini biasanya digunakan untuk footer situs. Peran tengara formulir menunjukkan formulir menunggu input pengguna. Untuk formulir pencarian yang harus Anda gunakan Peran pencarian cukup jelas, ini dimaksudkan untuk membantu teknologi bantu mengidentifikasi fungsionalitas pencarian situs web. Anda dapat menggunakan peran tengara aplikasi untuk wilayah yang ingin Anda deklarasikan sebagai aplikasi web, bukan dokumen web. Tidak disarankan untuk memasukkannya ke situs web tradisional, karena ini mengisyaratkan pada teknologi bantuan untuk beralih dari mode penelusuran normal ke mode penelusuran aplikasi. Anda hanya harus menggunakan peran tengara ini dengan sangat hati-hati. Sementara peran memungkinkan Anda untuk mendefinisikan arti tag HTML, status dan properti memberi pengguna informasi tambahan tentang cara berinteraksi dengannya. Status dan properti ditandai dengan atribut awalan aria dengan sintaks aria- *. Atribut ARIA yang paling terkenal mungkin adalah properti yang disyaratkan aria dan status yang diperiksa aria. Yang dibutuhkan Aria adalah a milik karena ini adalah fitur permanen dari elemen input (yaitu pengguna harus mengisinya), sedangkan aria-checked adalah negara karena kotak centang sering dapat mengubah nilainya karena interaksi pengguna. Negara dan properti terkadang mengambil nilai token (kumpulan nilai yang telah ditentukan sebelumnya), misalnya properti aria-live dapat memiliki 3 nilai berbeda: mati, sopan, tegas. Sintaks dalam contoh ini terlihat seperti ini: Dalam kasus lain, nilai atribut awalan aria diwakili oleh string, angka, bilangan bulat, Referensi ID atau benar salah nilai-nilai. Gunakan atribut hubungan untuk menunjukkan hubungan antara berbagai elemen di situs Anda, yang tidak dapat ditentukan dari struktur dokumen. Misalnya Setelah Anda menetapkan peran tengara ARIA untuk area yang dapat dilihat pada halaman HTML Anda, ini dapat sangat membantu teknologi bantu jika Anda mengubah status awalan ARIA dan properti elemen anak sesuai dengan peristiwa yang terjadi di layar. Ini bisa sangat penting di mana pengguna harus berinteraksi dengan situs, misalnya mengisi formulir atau menjalankan permintaan pencarian. Aturan umum dari desain aksesibilitas adalah bahwa keadaan saat ini dari antarmuka pengguna selalu perlu dipahami oleh teknologi bantu. Misalnya, jika pengguna memilih opsi dalam formulir, ia juga harus dipilih untuk teknologi bantu. Ini dapat dengan mudah dicapai dengan memanfaatkan status yang dipilih oleh aria dengan sintaks berikut: Pedoman WAI-ARIA W3C tentang Penulisan Praktik dapat memberi Anda banyak ide hebat lainnya tentang bagaimana menyelaraskan dengan baik visual dan antarmuka yang dapat diakses dari situs Anda. Menggunakan peran dan atribut ARIA terkadang bisa berlebihan. Saat Anda menggunakan tag semantik HTML5 seperti Misalnya tidak perlu menggunakan bentuk peran tengara untuk menentukan Jadi, jika Anda sudah menambahkan tersembunyi Atribut HTML ke input formulir, tidak perlu menambahkan tersembunyi aria negara, karena browser memasukkannya secara default.. Yang terakhir ditambahkan ke spesifikasi W3C dengan tujuan memetakan utama Peran tengara ARIA ke elemen HTML semantik. peran =”navigasi”
peran =”komplementer”
role = "main". Posting terkait, artikel populer, komentar terakhir adalah contoh khas dari konten pelengkap yang otonom.peran =”contentinfo”
peran =”bentuk”
role = "search" sebagai gantinya.peran =”pencarian”
peran =”aplikasi”
Serikat dan Properti
Sintaks Atribut yang diawali Aria
Cara Menggunakan ARIA States and Properties
1. Membangun Hubungan Antara Elemen Dengan Atribut Hubungan
aria-labelledby properti mengidentifikasi elemen yang memberi label elemen saat ini.aria-labelledby - di antara banyak hal lain - dapat mengikat pos ke wilayah tengara ARIA dengan cara berikut:Ini adalah judul
Isi utama… 2. Menyinkronkan Status dan Properti dengan Siklus Hidup Elemen
3. Cocokkan Antarmuka Visual dan Yang Dapat Diakses
.Jangan Terlalu Sering Menggunakan ARIA
atau , browser web modern menambahkan semantik ARIA yang sesuai secara default. Dalam hal ini tidak masuk akal untuk secara terpisah mengatur peran tengara ARIA. elemen. Alih-alih sintaks itu cukup sempurna untuk digunakan saja . Ini juga berlebihan untuk menggunakan atribut asli HTML bersama dengan atribut ARIA yang sesuai.
