Apakah aria dalam html untuk aksesibiliti?

ARIA diperlukan untuk meningkatkan kebolehcapaian web untuk kandungan dinamik dan komponen UI tersuai yang kekurangan semantik HTML asli. 1) Peranan ARIA menentukan tujuan elemen (contohnya, peranan = "dialog"). 2) Ciri-ciri Aria menggambarkan ciri-ciri (misalnya, aria label, aria-deprescribedby). 3) Negara-negara Aria menunjukkan keadaan semasa (contohnya, Aria-Expanded = "True"). Ia harus digunakan semasa membuat widget tersuai, menyediakan kemas kini langsung, menyembunyikan kandungan hiasan, atau menambah konteks kepada elemen bukan teks. Walau bagaimanapun, 4) unsur -unsur HTML asli harus lebih disukai apabila tersedia. 5) ARIA tidak boleh mengatasi semantik asli dengan tidak betul. 6) Atribut ARIA mesti dikemas kini secara dinamik melalui JavaScript untuk mencerminkan keadaan semasa. 7) Ujian dengan pembaca skrin adalah penting untuk memastikan pelaksanaan yang betul. ARIA meningkatkan kebolehcapaian tetapi mesti digunakan dengan teliti dan bersempena dengan HTML asli untuk menyokong semua pengguna dengan berkesan.

ARIA (Aplikasi Internet yang boleh diakses) adalah satu set atribut dalam HTML yang meningkatkan kebolehcapaian web untuk orang yang menggunakan teknologi bantuan, seperti pembaca skrin. Ia membantu menjadikan kandungan dinamik dan kawalan antara muka pengguna yang kompleks -seperti yang dibina dengan JavaScript -lebih mudah diakses apabila elemen HTML asli jatuh pendek.

Mengapa Aria diperlukan

HTML mempunyai semantik terbina dalam. Sebagai contoh, elemen <button></button> diiktiraf secara automatik oleh pembaca skrin sebagai butang. Tetapi apabila anda membuat kawalan tersuai -seperti div yang bertindak seperti butang atau menu dropdown yang dibina dengan div dan rentang -pelayar tidak tahu tujuannya. Itulah di mana Aria masuk. Ia menambah maklumat tambahan untuk memberitahu teknologi bantuan apa elemen itu, apa yang dilakukannya, dan bagaimana pengguna harus berinteraksi dengannya.

Peranan dan atribut utama Aria

Aria menyediakan tiga jenis ciri utama:

• Peranan - Tentukan apa elemen (misalnya, role="navigation" , role="alert" , role="dialog" )
• Hartanah -Huraikan ciri-ciri (contohnya, aria-label , aria-describedby , aria-expanded )
• Negeri -Tunjukkan keadaan semasa (misalnya, aria-hidden="true" , aria-disabled="true" )

Contoh biasa

• aria-label="Close" -memberikan label deskriptif kepada butang ikon yang mungkin tidak mempunyai teks.
• aria-expanded="true" -memberitahu pengguna pembaca skrin sama ada menu yang dilipat dibuka atau ditutup.
• role="alert" - Membuat kandungan yang diumumkan dengan serta -merta, berguna untuk mesej ralat.
• aria-live="polite" -menunjukkan bahawa kemas kini kandungan dinamik harus diumumkan oleh pembaca skrin tanpa mengganggu pengguna.

Peraturan penting untuk diingat

Walaupun Aria berkuasa, ia harus digunakan dengan teliti:

• Lebih suka HTML asli - Gunakan <button></button> , <nav></nav> , <input> , dan lain -lain, apabila mungkin. Unsur-unsur asli datang dengan akses terbina dalam.
• Jangan mengatasi semantik asli dengan tidak betul - elakkan perkara seperti <button role="checkbox"></button> , yang membingungkan pengguna.
• Pastikan ia dikemas kini dengan JavaScript -jika menu dibuka, kemas kini aria-expanded="true" . Nilai Aria mesti mencerminkan keadaan semasa.
• Uji dengan pembaca skrin - Aria hanya berfungsi jika ia digunakan dengan betul dan diuji.

Bila Menggunakan Aria

Anda harus menggunakan Aria ketika:

• Membina widget tersuai (misalnya, tab, slider, input autokomplet)
• Menambah pengumuman langsung (misalnya, bentuk status penyerahan)
• Menyembunyikan Kandungan Hiasan dari Pembaca Skrin ( aria-hidden="true" )
• Menyediakan konteks tambahan di mana teks yang kelihatan tidak mencukupi

Sebagai contoh, ikon "x" yang jelas jelas untuk menutup modal mungkin tidak mempunyai makna kepada pengguna pembaca skrin. Menambah aria-label="Close" menjadikannya jelas.

Pada asasnya, Aria menjembatani jurang antara aplikasi web yang kompleks dan aksesibiliti. Ia tidak menggantikan HTML yang baik, tetapi meningkatkannya apabila diperlukan. Gunakannya dengan bijak, menguji dengan teliti, dan sentiasa menjaga pengguna akhir dalam fikiran.

Atas ialah kandungan terperinci Apakah aria dalam html untuk aksesibiliti?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!