Perhatikan bahwa WAI-ARIA mendahului HTML5 dan tidak memerlukannya, meskipun atribut ARIA hanya akan dianggap valid baik oleh validator HTML5, atau bila dibandingkan dengan ARIA extended DTD. Namun, konsep HTML5 saat ini melarang beberapa konstruksi WAI-ARIA.
Alohci
Saya telah melihat ini di html Facebook.
Penyortir
Jawaban:
213
WAI-ARIA adalah dukungan khusus untuk aplikasi web yang dapat diakses. Ini mendefinisikan banyak ekstensi markup (kebanyakan sebagai atribut pada elemen HTML5), yang dapat digunakan oleh pengembang aplikasi web untuk memberikan informasi tambahan tentang semantik dari berbagai elemen untuk membantu teknologi seperti pembaca layar. Tentu saja, agar ARIA berfungsi, agen pengguna HTTP yang menginterpretasikan markup perlu mendukung ARIA, tetapi spek dibuat sedemikian rupa, sehingga memungkinkan agen pengguna tingkat bawah untuk mengabaikan markup khusus ARIA dengan aman tanpa mempengaruhi fungsionalitas aplikasi web.
Berikut ini contoh dari spesifikasi ARIA:
<ulrole="menubar"><!-- Rule 2A: "File" label via aria-labelledby --><lirole="menuitem"aria-haspopup="true"aria-labelledby="fileLabel"><spanid="fileLabel">File</span><ulrole="menu"><!-- Rule 2C: "New" label via Namefrom:contents --><lirole="menuitem"aria-haspopup="false">New</li><lirole="menuitem"aria-haspopup="false">Open…</li>
...</ul></li>
...</ul>
Perhatikan roleatribut pada <ul>elemen luar . Atribut ini tidak mempengaruhi bagaimana markup ditampilkan di layar oleh browser; namun, browser yang mendukung ARIA akan menambahkan informasi aksesibilitas khusus OS ke elemen UI yang diberikan, sehingga pembaca layar dapat menafsirkannya sebagai menu dan membacanya dengan keras dengan konteks yang cukup untuk dipahami oleh pengguna akhir (misalnya, secara eksplisit "menu" petunjuk audio) dan dapat berinteraksi dengannya (misalnya, navigasi suara).
ariakhusus untuk aksesibilitas, dan tidak boleh digunakan untuk menyimpan data acak. datauntuk data acak, aplikasi harus dikaitkan dengan node.
Franci Penov
2
Harap diingat: role="menu"dan "menuitem"sudah benar untuk APPS (= perangkat lunak dengan menu seperti File > Openatau Edit > Copy to clipboard. Untuk situs web klasik, mungkin lebih baik tetap seperti biasanya <ul>(= daftar peran secara default) karena Anda hanya menyediakan tautan ke halaman web lain dan tidak ada fungsi seperti "save" atau "copy / paste". Jika Anda menggunakan, role="menu"Anda juga harus menambahkan dukungan untuk menavigasi menu dengan tombol panah pada keyboard Anda seperti menu perangkat lunak / aplikasi biasa
Oops D'oh
62
ARIA adalah singkatan dari Aplikasi Internet yang Dapat Diakses.
WAI-ARIA adalah teknologi yang sangat kuat yang memungkinkan pengembang untuk dengan mudah menggambarkan tujuan, keadaan, dan fungsi lain dari antarmuka pengguna yang kaya secara visual - dengan cara yang dapat dipahami oleh Assistive Technology. WAI-ARIA akhirnya diintegrasikan ke dalam draft kerja spesifikasi HTML 5 saat ini.
Dan jika Anda bertanya-tanya apa itu WAI-ARIA, itu adalah hal yang sama.
Harap perhatikan istilah WAI-ARIA dan ARIA merujuk pada hal yang sama. Namun, lebih tepat untuk menggunakan WAI-ARIA untuk mengakui asal-usulnya di WAI.
WAI = Inisiatif Aksesibilitas Web
Dari tampilannya, ARIA digunakan untuk teknologi bantu dan sebagian besar membaca layar.
Sebagian besar keraguan Anda akan terhapus jika Anda membaca artikel ini
WAI-ARIA adalah singkatan dari "Inisiatif Aksesibilitas Web - Aplikasi Internet yang Mudah Diakses" . Ini adalah sekumpulan atribut untuk membantu meningkatkan semantik situs web atau aplikasi web untuk membantu teknologi bantu, seperti pembaca layar untuk tuna netra, memahami hal-hal tertentu yang bukan asli HTML. Informasi yang terbuka dapat berkisar dari sesuatu yang sederhana seperti memberi tahu pembaca layar yang mengaktifkan tautan atau tombol hanya menunjukkan atau menyembunyikan lebih banyak item, hingga widget serumit sistem menu keseluruhan atau tampilan hierarki pohon.
Ini dicapai dengan menerapkan peran dan atribut negara ke HTML 4.01 atau lebih baru yang tidak berkaitan dengan tata letak atau fungsionalitas browser, tetapi memberikan informasi tambahan untuk teknologi bantu.
Salah satu batu sudut WAI-ARIA adalah atribut peran. Ini memberitahu browser untuk memberi tahu teknologi bantuan bahwa elemen HTML yang digunakan sebenarnya bukan apa yang disarankan oleh nama elemen, tetapi sesuatu yang lain. Meskipun awalnya hanya elemen div, elemen div ini dapat menjadi wadah untuk daftar item lengkapi otomatis, dalam hal ini peran "kotak daftar" akan sesuai untuk digunakan. Demikian juga, div lain yang merupakan anak dari kontainer itu div, dan yang berisi item opsi tunggal, kemudian harus mendapatkan peran "opsi". Dua div, tetapi melalui peran, makna yang sama sekali berbeda. Peran dimodelkan setelah rekan aplikasi desktop yang biasa digunakan.
Pengecualian untuk ini adalah peran tengara dokumen, yang tidak mengubah arti sebenarnya dari elemen yang dipertanyakan, tetapi memberikan informasi tentang tempat khusus ini dalam dokumen.
Batu sudut kedua adalah negara dan properti WAI-ARIA. Mereka mendefinisikan keadaan elemen-elemen asli atau WAI-ARIA tertentu seperti jika ada sesuatu yang runtuh atau diperluas, elemen bentuk diperlukan, sesuatu memiliki menu popup yang melekat padanya atau sejenisnya. Ini sering kali dinamis dan mengubah nilainya sepanjang siklus hidup aplikasi web, dan biasanya dimanipulasi melalui JavaScript.
Apa bukan?
WAI-ARIA tidak dimaksudkan untuk mempengaruhi perilaku browser. Tidak seperti elemen tombol nyata, misalnya, div di mana Anda menuangkan peran "tombol" ke atas tidak memberi Anda kemampuan fokus keyboard, pengendali klik otomatis ketika Space atau Enter ditekan di atasnya, dan properti lain yang tidak sesuai dengan tombol. Browser itu sendiri tidak tahu bahwa div dengan peran "tombol" adalah tombol, hanya bagian aksesibilitas API yang melakukannya.
Sebagai akibatnya, ini berarti Anda benar-benar harus menerapkan navigasi keyboard, kemampuan fokus dan pola perilaku lain yang diketahui dari aplikasi desktop sendiri. Anda dapat menemukan beberapa teknik ARIA Lanjutan di sini .
Kapan saya tidak menggunakannya?
Ya, itu benar, bagian ini diutamakan! Karena aturan pertama menggunakan WAI-ARIA adalah: Jangan menggunakannya kecuali Anda benar-benar harus! Semakin sedikit WAI-ARIA yang Anda miliki, dan semakin Anda dapat mengandalkan penggunaan widget HTML asli, semakin baik! Ada beberapa aturan untuk diikuti, Anda dapat memeriksanya di sini .
ARIA muncul sebagai cara untuk mengatasi masalah aksesibilitas menggunakan bahasa markup yang dimaksudkan untuk dokumen, HTML, untuk membangun antarmuka pengguna (UI). HTML mencakup banyak sekali fitur untuk menangani dokumen (P, h3, UL, TABLE) tetapi hanya elemen UI dasar seperti A, INPUT dan BUTTON. Windows dan sistem operasi lain mendukung API yang memungkinkan (Teknologi Bantu) AT untuk mengakses fungsionalitas kontrol UI. Internet Explorer dan browser lain memetakan elemen HTML asli ke API aksesibilitas, tetapi kontrol html tidak sekaya kontrol pada sistem operasi desktop, dan tidak cukup untuk aplikasi web modern. Kontrol kustom dapat memperluas elemen html untuk menyediakan yang kaya UI diperlukan untuk aplikasi web modern. Sebelum ARIA, browser tidak memiliki cara untuk mengekspos kekayaan ekstra ini ke API aksesibilitas atau AT. Contoh klasik dari masalah ini adalah menambahkan handler klik ke gambar. Ini menciptakan apa yang tampaknya menjadi tombol yang dapat diklik untuk pengguna mouse, tetapi masih hanya gambar untuk keyboard atau pengguna AT
Solusinya adalah membuat sekumpulan atribut yang memungkinkan pengembang memperluas HTML dengan semantik UI. Istilah ARIA untuk sekelompok elemen HTML yang memiliki fungsionalitas khusus dan menggunakan atribut ARIA untuk memetakan fungsi-fungsi ini ke API aksesibilitas adalah "Widget." ARIA juga menyediakan sarana bagi penulis untuk mendokumentasikan peran konten itu sendiri, yang pada gilirannya, memungkinkan AT untuk membangun mekanisme navigasi alternatif untuk konten yang jauh lebih mudah digunakan daripada membaca teks lengkap atau hanya mengulangi daftar tautan.
Penting untuk diingat bahwa dalam kasus sederhana, lebih disukai untuk menggunakan kontrol HTML asli dan gaya mereka daripada menggunakan ARIA. Itu tidak menciptakan kembali roda, atau kotak centang, jika Anda tidak perlu.
Untungnya, marka ARIA dapat ditambahkan ke situs yang ada tanpa mengubah perilaku untuk pengguna umum. Ini sangat mengurangi biaya memodifikasi dan menguji situs web atau aplikasi.
Saya mengajukan beberapa pertanyaan lain tentang ARIA. Tapi isinya terlihat lebih menjanjikan untuk pertanyaan ini. ingin membagikannya
Apa itu ARIA?
Jika Anda berupaya membuat situs web Anda dapat diakses oleh pengguna dengan berbagai kebiasaan penjelajahan dan cacat fisik yang berbeda, Anda mungkin akan mengenali peran dan atribut aria- *. WAI-ARIA (Aplikasi Kaya Internet yang Dapat Diakses) adalah metode menyediakan cara untuk mendefinisikan konten web dan aplikasi dinamis Anda sehingga orang-orang penyandang cacat dapat mengidentifikasi dan berhasil berinteraksi dengannya. Ini dilakukan melalui peran yang menentukan struktur dokumen atau aplikasi, atau melalui atribut aria- * yang mendefinisikan widget-peran, hubungan, status, atau properti.
Penggunaan ARIA direkomendasikan dalam spesifikasi untuk membuat aplikasi HTML5 lebih mudah diakses. Saat menggunakan elemen HTML5 semantik, Anda harus mengatur peran yang sesuai.
Koreksi kecil: Saat menggunakan elemen HTML5 semantik, Anda hanya harus mengatur peran yang sesuai jika semantik elemen yang Anda pilih tidak memberikan informasi yang cukup. Dengan kata lain, jika Anda memiliki elemen nav, tidak perlu menambahkan role = "navigasi", karena perannya sudah jelas dari pilihan elemen. Tetapi jika Anda memiliki elemen input untuk mencari situs, Anda harus menambahkan role = "search" karena elemen input digunakan untuk banyak hal selain pencarian, dan ini menandai input spesifik tersebut sebagai memiliki peran pencarian.
Jawaban:
WAI-ARIA adalah dukungan khusus untuk aplikasi web yang dapat diakses. Ini mendefinisikan banyak ekstensi markup (kebanyakan sebagai atribut pada elemen HTML5), yang dapat digunakan oleh pengembang aplikasi web untuk memberikan informasi tambahan tentang semantik dari berbagai elemen untuk membantu teknologi seperti pembaca layar. Tentu saja, agar ARIA berfungsi, agen pengguna HTTP yang menginterpretasikan markup perlu mendukung ARIA, tetapi spek dibuat sedemikian rupa, sehingga memungkinkan agen pengguna tingkat bawah untuk mengabaikan markup khusus ARIA dengan aman tanpa mempengaruhi fungsionalitas aplikasi web.
Berikut ini contoh dari spesifikasi ARIA:
Perhatikan
roleatribut pada<ul>elemen luar . Atribut ini tidak mempengaruhi bagaimana markup ditampilkan di layar oleh browser; namun, browser yang mendukung ARIA akan menambahkan informasi aksesibilitas khusus OS ke elemen UI yang diberikan, sehingga pembaca layar dapat menafsirkannya sebagai menu dan membacanya dengan keras dengan konteks yang cukup untuk dipahami oleh pengguna akhir (misalnya, secara eksplisit "menu" petunjuk audio) dan dapat berinteraksi dengannya (misalnya, navigasi suara).sumber
ariakhusus untuk aksesibilitas, dan tidak boleh digunakan untuk menyimpan data acak.datauntuk data acak, aplikasi harus dikaitkan dengan node.role="menu"dan"menuitem"sudah benar untuk APPS (= perangkat lunak dengan menu sepertiFile > OpenatauEdit > Copy to clipboard. Untuk situs web klasik, mungkin lebih baik tetap seperti biasanya<ul>(= daftar peran secara default) karena Anda hanya menyediakan tautan ke halaman web lain dan tidak ada fungsi seperti "save" atau "copy / paste". Jika Anda menggunakan,role="menu"Anda juga harus menambahkan dukungan untuk menavigasi menu dengan tombol panah pada keyboard Anda seperti menu perangkat lunak / aplikasi biasaARIA adalah singkatan dari Aplikasi Internet yang Dapat Diakses.
Dan jika Anda bertanya-tanya apa itu WAI-ARIA, itu adalah hal yang sama.
WAI = Inisiatif Aksesibilitas Web
Dari tampilannya, ARIA digunakan untuk teknologi bantu dan sebagian besar membaca layar.
Sebagian besar keraguan Anda akan terhapus jika Anda membaca artikel ini
http://www.w3.org/TR/aria-in-html/
sumber
Apa itu?
WAI-ARIA adalah singkatan dari "Inisiatif Aksesibilitas Web - Aplikasi Internet yang Mudah Diakses" . Ini adalah sekumpulan atribut untuk membantu meningkatkan semantik situs web atau aplikasi web untuk membantu teknologi bantu, seperti pembaca layar untuk tuna netra, memahami hal-hal tertentu yang bukan asli HTML. Informasi yang terbuka dapat berkisar dari sesuatu yang sederhana seperti memberi tahu pembaca layar yang mengaktifkan tautan atau tombol hanya menunjukkan atau menyembunyikan lebih banyak item, hingga widget serumit sistem menu keseluruhan atau tampilan hierarki pohon.
Ini dicapai dengan menerapkan peran dan atribut negara ke HTML 4.01 atau lebih baru yang tidak berkaitan dengan tata letak atau fungsionalitas browser, tetapi memberikan informasi tambahan untuk teknologi bantu.
Salah satu batu sudut WAI-ARIA adalah atribut peran. Ini memberitahu browser untuk memberi tahu teknologi bantuan bahwa elemen HTML yang digunakan sebenarnya bukan apa yang disarankan oleh nama elemen, tetapi sesuatu yang lain. Meskipun awalnya hanya elemen div, elemen div ini dapat menjadi wadah untuk daftar item lengkapi otomatis, dalam hal ini peran "kotak daftar" akan sesuai untuk digunakan. Demikian juga, div lain yang merupakan anak dari kontainer itu div, dan yang berisi item opsi tunggal, kemudian harus mendapatkan peran "opsi". Dua div, tetapi melalui peran, makna yang sama sekali berbeda. Peran dimodelkan setelah rekan aplikasi desktop yang biasa digunakan.
Pengecualian untuk ini adalah peran tengara dokumen, yang tidak mengubah arti sebenarnya dari elemen yang dipertanyakan, tetapi memberikan informasi tentang tempat khusus ini dalam dokumen.
Batu sudut kedua adalah negara dan properti WAI-ARIA. Mereka mendefinisikan keadaan elemen-elemen asli atau WAI-ARIA tertentu seperti jika ada sesuatu yang runtuh atau diperluas, elemen bentuk diperlukan, sesuatu memiliki menu popup yang melekat padanya atau sejenisnya. Ini sering kali dinamis dan mengubah nilainya sepanjang siklus hidup aplikasi web, dan biasanya dimanipulasi melalui JavaScript.
Apa bukan?
WAI-ARIA tidak dimaksudkan untuk mempengaruhi perilaku browser. Tidak seperti elemen tombol nyata, misalnya, div di mana Anda menuangkan peran "tombol" ke atas tidak memberi Anda kemampuan fokus keyboard, pengendali klik otomatis ketika Space atau Enter ditekan di atasnya, dan properti lain yang tidak sesuai dengan tombol. Browser itu sendiri tidak tahu bahwa div dengan peran "tombol" adalah tombol, hanya bagian aksesibilitas API yang melakukannya.
Sebagai akibatnya, ini berarti Anda benar-benar harus menerapkan navigasi keyboard, kemampuan fokus dan pola perilaku lain yang diketahui dari aplikasi desktop sendiri. Anda dapat menemukan beberapa teknik ARIA Lanjutan di sini .
Kapan saya tidak menggunakannya?
Ya, itu benar, bagian ini diutamakan! Karena aturan pertama menggunakan WAI-ARIA adalah: Jangan menggunakannya kecuali Anda benar-benar harus! Semakin sedikit WAI-ARIA yang Anda miliki, dan semakin Anda dapat mengandalkan penggunaan widget HTML asli, semakin baik! Ada beberapa aturan untuk diikuti, Anda dapat memeriksanya di sini .
sumber
Apa itu ARIA?
ARIA muncul sebagai cara untuk mengatasi masalah aksesibilitas menggunakan bahasa markup yang dimaksudkan untuk dokumen, HTML, untuk membangun antarmuka pengguna (UI). HTML mencakup banyak sekali fitur untuk menangani dokumen (P, h3, UL, TABLE) tetapi hanya elemen UI dasar seperti A, INPUT dan BUTTON. Windows dan sistem operasi lain mendukung API yang memungkinkan (Teknologi Bantu) AT untuk mengakses fungsionalitas kontrol UI. Internet Explorer dan browser lain memetakan elemen HTML asli ke API aksesibilitas, tetapi kontrol html tidak sekaya kontrol pada sistem operasi desktop, dan tidak cukup untuk aplikasi web modern. Kontrol kustom dapat memperluas elemen html untuk menyediakan yang kaya UI diperlukan untuk aplikasi web modern. Sebelum ARIA, browser tidak memiliki cara untuk mengekspos kekayaan ekstra ini ke API aksesibilitas atau AT. Contoh klasik dari masalah ini adalah menambahkan handler klik ke gambar. Ini menciptakan apa yang tampaknya menjadi tombol yang dapat diklik untuk pengguna mouse, tetapi masih hanya gambar untuk keyboard atau pengguna AT
Solusinya adalah membuat sekumpulan atribut yang memungkinkan pengembang memperluas HTML dengan semantik UI. Istilah ARIA untuk sekelompok elemen HTML yang memiliki fungsionalitas khusus dan menggunakan atribut ARIA untuk memetakan fungsi-fungsi ini ke API aksesibilitas adalah "Widget." ARIA juga menyediakan sarana bagi penulis untuk mendokumentasikan peran konten itu sendiri, yang pada gilirannya, memungkinkan AT untuk membangun mekanisme navigasi alternatif untuk konten yang jauh lebih mudah digunakan daripada membaca teks lengkap atau hanya mengulangi daftar tautan.
Penting untuk diingat bahwa dalam kasus sederhana, lebih disukai untuk menggunakan kontrol HTML asli dan gaya mereka daripada menggunakan ARIA. Itu tidak menciptakan kembali roda, atau kotak centang, jika Anda tidak perlu.
Untungnya, marka ARIA dapat ditambahkan ke situs yang ada tanpa mengubah perilaku untuk pengguna umum. Ini sangat mengurangi biaya memodifikasi dan menguji situs web atau aplikasi.
sumber
Saya mengajukan beberapa pertanyaan lain tentang ARIA. Tapi isinya terlihat lebih menjanjikan untuk pertanyaan ini. ingin membagikannya
Apa itu ARIA?
Jika Anda berupaya membuat situs web Anda dapat diakses oleh pengguna dengan berbagai kebiasaan penjelajahan dan cacat fisik yang berbeda, Anda mungkin akan mengenali peran dan atribut aria- *. WAI-ARIA (Aplikasi Kaya Internet yang Dapat Diakses) adalah metode menyediakan cara untuk mendefinisikan konten web dan aplikasi dinamis Anda sehingga orang-orang penyandang cacat dapat mengidentifikasi dan berhasil berinteraksi dengannya. Ini dilakukan melalui peran yang menentukan struktur dokumen atau aplikasi, atau melalui atribut aria- * yang mendefinisikan widget-peran, hubungan, status, atau properti.
Penggunaan ARIA direkomendasikan dalam spesifikasi untuk membuat aplikasi HTML5 lebih mudah diakses. Saat menggunakan elemen HTML5 semantik, Anda harus mengatur peran yang sesuai.
Dan lihat ini video tabung Anda untuk ARIA live.
sumber