Menggunakan atribut ARIA dengan elemen semantik HTML5 untuk kebolehcapaian

Sebab mengapa tag semantik ARIA dan HTML5 diperlukan ialah walaupun unsur -unsur semantik HTML5 mempunyai makna kebolehaksesan, ARIA dapat menambah semantik dan meningkatkan keupayaan pengiktirafan teknologi tambahan. Sebagai contoh, apabila pelayar warisan tidak mempunyai sokongan, komponen tanpa tag asli (seperti kotak modal), dan kemas kini negeri perlu dikemas kini secara dinamik, ARIA menyediakan kawalan berbutir yang lebih halus. Unsur -unsur HTML5 seperti NAV, Main, selain sesuai dengan peranan ARIA secara lalai, dan tidak perlu ditambah secara manual melainkan jika tingkah laku lalai perlu ditindih. Situasi di mana ARIA perlu ditambah termasuk: 1. Tambahan maklumat status yang hilang, seperti menggunakan ARIA-Expanded untuk mewakili status pengembangan/keruntuhan butang; 2. Tambah peranan semantik kepada tag bukan semantik, seperti menggunakan peranan Div untuk melaksanakan tab dan bekerjasama dengan Tabindex dan Aria-dipilih; 3. Kawalan Bersekutu dan Teks Penerangan, seperti menggunakan Aria-DepribedBy untuk mengaitkan kotak input dengan teks segera. Nota termasuk tidak berulang kali menetapkan semantik sedia ada, tidak menimpa semantik asal secara tidak betul, dan tidak menambah atribut secara rawak apabila tidak menentu.

Menambah atribut ARIA kepada elemen semantik HTML5 sebenarnya adalah pendekatan biasa tetapi rawan kesilapan. Bukan semuanya akan baik -baik saja jika anda menggunakan <nav></nav> atau <main></main> . Kadang -kadang Aria diperlukan untuk menambah semantik atau meningkatkan keupayaan pengiktirafan teknologi bantuan.

Mengapa saya perlu menggunakan tag semantik ARIA dan HTML5?

Unsur -unsur semantik HTML5 (seperti <header></header> , <footer></footer> , <nav></nav> , <article></article> , dan lain -lain) mempunyai makna kebolehaksesan tertentu dan dapat membantu pembaca skrin mengenal pasti struktur halaman. Tetapi dalam beberapa senario, tingkah laku lalai ini tidak tepat atau cukup fleksibel.

Contohnya:

• Sesetengah pelayar yang lebih tua atau teknologi bantuan mungkin tidak menyokong tag semantik baru dengan cukup baik;
• Beberapa komponen (seperti kotak modal, tab) tidak mempunyai tag HTML asli yang sepadan;
• ARIA menyediakan kawalan berbutir yang lebih baik apabila kemas kini dinamik diperlukan (seperti sama ada butang dipilih dan sama ada kandungannya diperluas).

Jadi, Aria adalah suplemen, bukan pengganti.

Elemen HTML5 mana yang secara automatik akan membawa peranan ARIA?

Banyak tag semantik HTML5 sebenarnya sesuai dengan peranan ARIA di bahagian bawah. Contohnya:

• <nav></nav> role="navigation"
• <main></main> role="main"
• <aside></aside> role="complementary"
• <section></section> biasanya diproses sebagai role="region" (jika dengan tajuk)

Ini bermakna anda tidak perlu menambahkan peranan ini secara manual melainkan anda ingin menimpa tingkah laku lalai atau bersesuaian dengan kes -kes khas tertentu.

Perhatikan, bagaimanapun: jika anda menulis div sendiri dan menetapkannya ke navigasi dengan peranan, ia tidak akan muncul dalam pokok akses seperti sebenar <nav></nav> melainkan jika anda secara manual menambah sifat lain untuk menjadikannya "fokus".

Dalam keadaan apa yang harus ditambah Aria?

1. Tambahan maklumat status yang hilang

Sebagai contoh, butang togol (panel lipat), <button></button> sahaja tidak dapat memberitahu pengguna sama ada ia sedang "diperluas" atau "runtuh". Pada masa ini, anda boleh menggunakan aria-expanded :

 <Button aria-expanded = "false"> Expand More </Button>

Selepas mengklik JS secara dinamik mengubah nilai ini, pembaca skrin boleh membaca perubahan status.

2. Tambah peranan semantik ke label bukan semantik

Jika anda perlu melaksanakan beberapa jenis komponen interaktif (seperti tab, menu) dengan <div> atau <span> , anda perlu menggunakan Aria untuk menentukan peranan dan tingkah lakunya:

 <div role = "tablist">
  <div role = "tab" aria-dipilih = "true" tabindex = "0"> tab one </div>
  <div role = "tab" aria-dipilih = "false" tabindex = "-1"> tab dua </div>
</div>

Bukan sahaja peranan digunakan di sini, tetapi juga tabindex digunakan untuk mengawal urutan fokus. aria-selected menunjukkan status pengaktifan semasa.

3. Kawalan bersekutu dan teks penerangan

Sebagai contoh, terdapat teks segera di sebelah medan borang, dan anda mahu pembaca skrin membacanya, jadi anda boleh:

 <label untuk = "nama pengguna"> nama pengguna: </label>
<input type = "text" id = "nama pengguna" aria-describedby = "username-tip">
<p id = "username-tip"> Sila masukkan e-mel berdaftar anda sebagai nama pengguna anda. </p>

Dengan cara ini, apabila kotak input mendapat tumpuan, pembaca skrin juga akan membaca maklumat penerangan.

Perkara yang perlu diperhatikan

• Jangan berulang kali menetapkan semantik sedia ada. Sebagai contoh, <button></button> sudah mempunyai peranan = "butang", dan anda tidak perlu menulisnya lagi.
• Elakkan secara tidak betul menimpa semantik asal. Sebagai contoh, menetapkan secara paksa <a></a> ke peranan = "butang" boleh menyebabkan navigasi papan kekunci gagal.
• Jika anda tidak pasti mengenai fungsi atribut ARIA, periksa dokumentasi rasmi MDN atau WAI-Aria terlebih dahulu dan jangan tambahkannya secara rawak.

Pada dasarnya itu sahaja. Jika digunakan dengan baik, Aria dapat meningkatkan pengalaman aksesibiliti; Jika digunakan dengan buruk, ia akan memusnahkan tingkah laku asli. Kuncinya adalah untuk memahami makna setiap atribut dan hubungannya dengan semantik HTML5.

Atas ialah kandungan terperinci Menggunakan atribut ARIA dengan elemen semantik HTML5 untuk kebolehcapaian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!