ARIA (Aplikasi Internet Kaya yang Boleh Diakses) adalah satu set atribut yang digunakan untuk meningkatkan kebolehcapaian kandungan web, terutamanya untuk pengguna teknologi bantuan seperti pembaca skrin. Peranan utama atribut ARIA adalah untuk menyediakan cara untuk membuat kandungan dinamik dan kawalan antara muka pengguna yang canggih boleh diakses apabila elemen HTML asli tidak mencukupi.
Aria harus digunakan dalam senario berikut:
div
untuk membuat butang, anda memerlukan Aria untuk menentukan peranannya sebagai butang dan keadaannya, seperti diaktifkan atau dilumpuhkan.Untuk menggunakan aria dengan berkesan:
role="button"
untuk butang tersuai).aria-checked
, aria-disabled
, atau aria-selected
untuk menggambarkan keadaan elemen.aria-label
atau aria-labelledby
untuk menyediakan teks yang jelas dan deskriptif untuk elemen tersebut.Beberapa atribut ARIA dapat meningkatkan kebolehcapaian kandungan dinamik, termasuk:
aria-live
: Atribut ini menyatakan bahawa elemen akan dikemas kini secara dinamik dan bagaimana kemas kini ini harus disampaikan kepada pengguna teknologi bantuan. Sebagai contoh, aria-live="polite"
akan mengumumkan kemas kini apabila pengguna tidak melakukan sesuatu, sementara aria-live="assertive"
akan mengganggu pengguna untuk mengumumkan perubahan dengan segera.aria-atomic
: Digunakan bersempena dengan aria-live
, atribut ini menentukan sama ada pembaca skrin harus membentangkan semua atau hanya bahagian rantau yang diubah. Menetapkan aria-atomic="true"
bermaksud seluruh rantau dibentangkan, manakala aria-atomic="false"
bermaksud hanya bahagian yang diubah diumumkan.aria-relevant
: Atribut ini mentakrifkan jenis perubahan yang harus diumumkan oleh Teknologi Assisten. Pilihan termasuk additions
, removals
, text
, atau all
.aria-busy
: Apabila ditetapkan untuk true
, ia menunjukkan bahawa elemen sedang diubahsuai dan pengguna harus menunggu sebelum membaca atau berinteraksi dengannya.Menggunakan atribut ini dengan betul dapat memastikan perubahan kandungan dinamik disampaikan dengan berkesan kepada pengguna yang bergantung kepada teknologi bantuan.
Atribut Aria memberikan beberapa faedah kepada pengguna dengan pembaca skrin dengan meningkatkan keupayaan mereka untuk menavigasi dan memahami laman web dengan lebih berkesan:
role="navigation"
untuk menu atau role="main"
untuk kawasan kandungan utama, yang membolehkan pengguna melompat terus ke bahagian -bahagian ini.aria-expanded
boleh menunjukkan sama ada menu dibuka atau ditutup, dan aria-selected
boleh menyerlahkan item yang sedang dipilih dalam senarai.aria-live
mengumumkan perubahan dalam masa nyata, memastikan pengguna mengetahui kandungan atau kemas kini baru tanpa perlu menyegarkan halaman secara manual.aria-label
dan aria-describedby
memastikan bahawa kawalan tersuai dan widget kompleks diterangkan dengan tepat kepada pengguna, meningkatkan pengalaman pengguna secara keseluruhan.Dengan menyediakan lapisan maklumat tambahan ini, atribut ARIA membolehkan pengguna dengan pembaca skrin menavigasi dan berinteraksi dengan kandungan web lebih intuitif dan cekap.
Walaupun atribut ARIA adalah alat yang berkuasa untuk meningkatkan kebolehcapaian, mereka tidak dapat menyelesaikan semua isu kebolehaksesan dan mempunyai batasan tertentu:
role="button"
ke div
tidak menjadikannya fokus atau beroperasi dengan papan kekunci tanpa JavaScript tambahan.Oleh itu, sementara atribut ARIA adalah penting untuk meningkatkan kebolehcapaian kandungan web yang kompleks dan dinamik, mereka harus digunakan dengan bijak dan bersempena dengan amalan terbaik kebolehcapaian lain, seperti semantik HTML yang betul dan kebolehcapaian papan kekunci, untuk memastikan laman web yang dapat diakses sepenuhnya.
Atas ialah kandungan terperinci Huraikan peranan atribut ARIA. Bilakah dan bagaimana anda harus menggunakannya untuk meningkatkan kebolehcapaian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!