Dokumen ini bertujuan untuk membimbing pemaju bagaimana untuk memohon ARIA (aplikasi Internet yang boleh diakses) dengan betul apabila menggunakan JavaScript untuk memuatkan kandungan tab secara dinamik untuk memastikan kebolehcapaian aplikasi web. Ia memberi tumpuan kepada penggunaan atribut `ARIA-CONTROLS 'apabila hanya menambah kandungan tab yang sedang aktif ke DOM, dan menyediakan alternatif yang memastikan kebolehcapaian tanpa menggunakan` ARIA-CONTROLS`.

Postur Penggunaan Betul Aria Tabpanel

Apabila membina komponen tab menggunakan aria, peranan tabpanel digunakan untuk mengenal pasti elemen yang mengandungi kandungan tab. Seperti yang disyorkan oleh amalan pengarang WAI-Aria, adalah perkara biasa untuk mengaitkan setiap elemen tabpanel dengan tab yang sepadan dengan menetapkan atribut ARIA-Controls tab untuk menunjuk kepada ID TabPanel.

Walau bagaimanapun, dalam beberapa senario, kita hanya boleh menambah kandungan tab yang sedang dipilih ke DOM, iaitu, hanya satu tabpanel wujud. Pada masa ini, jika kawalan ARIA tab lain menunjukkan kepada ID yang tidak wujud, teknologi bantuan (seperti pembaca skrin) mungkin tidak dapat mengenal pasti struktur komponen dengan betul.

Strategi Pelaksanaan ARIA untuk Kandungan Tab Memuat Dinamik

Dalam senario pemuatan dinamik ini, adakah saya masih perlu menetapkan peranan tabpanel? Atau adakah cara yang lebih baik untuk mengamalkan ini?

Menurut spesifikasi ARIA, ARIA-CONTROLS bukanlah atribut wajib.

Penulis harus mengaitkan elemen tabpanel dengan tabnya, sama ada dengan menggunakan atribut ARIA-CONTROLS pada tab untuk merujuk tabpanel, atau dengan menggunakan atribut Aria-Labelledby pada tabpanel untuk merujuk tab.

Ini bermakna anda masih boleh mematuhi spesifikasi ARIA tanpa menggunakan kawalan ARIA.

Amalan Terbaik: Pastikan tablist dan tabpanel dekat antara satu sama lain

Pada masa ini, sokongan untuk kawalan ARIA tidak lengkap di kebanyakan pembaca skrin. Oleh itu, amalan terbaik adalah untuk memastikan tablist dan tabpanel bersebelahan dan elakkan memasukkan kandungan lain di antara mereka.

Spesifikasi Aria juga mengesyorkan:

Unsur tablist biasanya terletak berhampiran dengan satu siri elemen tabpanel, biasanya di hadapan mereka.

Kelebihan ini ialah selepas menukar tab, pengguna secara semulajadi boleh terus membaca kandungan tab baru, atau kembali ke tablist dari TabPanel untuk melakukan penukaran tab.

Kod Contoh (HTML):

 <div role="tablist">
  <butang peranan="tab" aria-dipilih="true" id="tab1" aria-controls="panel1"> tab 1 </butang>
  <butang peranan="tab" aria-dipilih="false" id="tab2" aria-controls="panel2"> tab 2 </butang>
  <butang peranan="tab" aria-dipilih="false" id="tab3" aria-controls="panel3"> tab 3 </butang>
</div>

<div role="tabpanel" id="panel1" aria-labelledby="tab1">
  <p> Kandungan tab 1. </p>
</div>

Kod Contoh (JavaScript - pemuatan dinamik kandungan tab):

 const tabs = document.QuerySelectorAll ('[role = "tab"]');
const TabPanelsContainer = document.QuerySelector ('[role = "tablist"]'). ParentNode; // Dapatkan elemen induk table untuk memasukkan tabpanel

tabs.foreach (tab => {
  tab.addeventListener ('klik', () => {
    // Keluarkan atribut yang dipilih ARIA tab tab yang dipilih sebelum ini.

    // Tetapkan atribut yang dipilih aria tab semasa menjadi benar
    tab.SetAttribute ('Aria-dipilih', 'benar');

    // Keluarkan tabpanel sebelumnya
    const OldTabPanel = TabPanelsContainer.QuerySelector ('[Role = "TabPanel"]');
    jika (OldTabPanel) {
      tabpanelscontainer.removechild (OldTabPanel);
    }


    // dinamik membuat tabpanel baru
    const tabid = tab.getAttribute ('id');
    constelId = tabid.Replace ('tab', 'panel');
    const newTabPanel = document.createeLement ('div');
    newTabPanel.setAttribute ('peranan', 'tabpanel');
    newTabPanel.setAttribute ('id', panelID);
    newtabpanel.setAttribute ('Aria-labelledby', tabid);
    newTabPanel.innerHtml = `<p> Kandungan $ {tab.TextContent}. </p>`;

    // Masukkan tabpanel baru selepas tablanelscontainer.appendchild (newtabpanel);
  });
});

Perkara yang perlu diperhatikan:

• Pastikan logik penukaran tab adalah betul, termasuk mengemas kini atribut yang dipilih ARIA dan kandungan tab yang dimuatkan secara dinamik.
• Tetapkan atribut Aria-LabelledBy untuk tabpanel yang dimuatkan secara dinamik untuk menunjuk ke tab yang sepadan.
• Jika dikehendaki, anda boleh menambah aria-live = "sopan" dan aria-relevant = "semua" ke bekas yang mengandungi tabpanel supaya pembaca skrin dapat dengan segera memberitahu pengguna perubahan kandungan. Walau bagaimanapun, kerana keseluruhan tabpanel digantikan di sini, Aria-Live biasanya tidak diperlukan.
• Dalam aplikasi yang kompleks, anda mungkin perlu menggunakan rangka kerja atau perpustakaan JavaScript untuk menguruskan operasi keadaan dan DOM komponen.

Meringkaskan

Walaupun atribut kawalan Aria secara teorinya boleh digunakan untuk mengaitkan tab dan tab kandungan, dalam senario kandungan tab yang dimuatkan secara dinamik, mengekalkan hubungan rapat antara tablist dan tabpanel dan menggunakan atribut ARIA-LabelledBy adalah cara yang lebih mudah dan lebih berkesan untuk mencapai aksesibiliti. Pemaju harus memilih strategi pelaksanaan ARIA yang sesuai berdasarkan keadaan sebenar, dan sentiasa memberi perhatian kepada akses aplikasi web.

Atas ialah kandungan terperinci Amalan Terbaik ARIA Semasa Menggunakan Kandungan Tab Dinamik yang Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!