Melaksanakan penukar drop-down yang boleh diakses untuk jadual besar

Artikel ini meneroka cara menggunakan pemilih drop-down untuk mencapai kebolehcapaian untuk kandungan web yang mengandungi jadual besar. Untuk pengguna pembaca skrin, makalah ini membandingkan kelebihan dan kekurangan menggunakan kawasan Aria-Live untuk membaca kandungan jadual secara automatik dan menggunakan mod TabPanel, dan mengesyorkan menggunakan mod TabPanel. Di samping itu, jika anda berkeras menggunakan pemilih drop-down, disyorkan untuk meletakkan tumpuan terus ke meja selepas jadual dihidupkan, dan bukannya bergantung pada kawasan Aria-Live untuk penyiaran.

Apabila membina laman web yang mengandungi banyak jadual, sangat penting untuk memberikan akses yang baik untuk pengguna pembaca skrin. Amalan biasa ialah menggunakan pemilih drop-down untuk menukar antara kandungan jadual yang berbeza. Walau bagaimanapun, memastikan pengguna pembaca skrin dapat memahami dan menavigasi jadual ini adalah isu yang memerlukan pertimbangan yang teliti.

Pelaksanaan yang sama adalah menggunakan kawasan aria-live. Rantau Aria-Live secara automatik memberitahu pembaca skrin apabila kandungan jadual berubah. Sebagai contoh, apabila pengguna memilih pilihan dari senarai drop-down, jadual yang sepadan dipaparkan dan rantau Aria-Live membaca kandungan keseluruhan jadual.

 <div classname="{styles.csvlist}">
  <label untuk="CSV-Table-selector"> {label} </label>
  <dropdown></dropdown>
  {SelectedTable && (
    <div id="terpilih-csv-table" role="rantau" aria-live="polite">
      <h2>
        {selectedTable.name}
      <h2>
      </h2>
</h2>
<table></table>
    </div>
  )}
</div>

Walau bagaimanapun, untuk jadual besar, pendekatan ini mungkin tidak sesuai. Pembaca skrin mungkin mengambil masa lebih lama untuk membaca keseluruhan jadual, dan pengguna mungkin lebih suka menavigasi jadual secara manual. Jadi, adakah penyelesaian yang lebih baik?

Penyelesaian yang disyorkan: Mod TabPanel

Amalan terbaik adalah menggunakan corak tabpanel . Corak TabPanel adalah corak reka bentuk ARIA standard untuk menganjurkan dan menyampaikan blok kandungan yang berkaitan. Dalam mod ini, setiap jadual sepadan dengan label tab. Apabila pengguna memilih label tab, jadual yang sepadan akan dipaparkan.

Kelebihan corak tabpanel ialah ia mematuhi jangkaan pengguna untuk penukaran kandungan. Apabila pengguna memilih tab, mereka mengharapkan untuk melihat kandungan yang sepadan dengan segera. Oleh itu, tiada pemberitahuan tambahan diperlukan. Pengguna pembaca skrin boleh menavigasi kandungan jadual kerana mereka akan halaman web biasa, menggunakan arahan navigasi standard.

Sekiranya anda berkeras menggunakan pemilih drop down

Jika atas sebab tertentu, anda masih mahu menggunakan pemilih drop-down, pertimbangkan pilihan berikut:

• Keluarkan Kawasan Aria-Live: Jangan biarkan pembaca skrin secara automatik membaca keseluruhan jadual.
• Pengurusan Fokus: Apabila jadual dihidupkan, fokus secara langsung di atas meja. Ini boleh dicapai melalui JavaScript.
• Sediakan nama yang boleh diakses: Pastikan setiap jadual mempunyai nama yang jelas dan mudah diakses. Ini dapat dicapai melalui atribut Aria-Labelledby.

 // Dapatkan elemen meja const table = document.getElementById ('terpilih-csv-table');

// set fokus ke jadual jadual.focus ();

Perkara yang perlu diperhatikan

• Ujian: Uji pelaksanaan anda menggunakan pembaca skrin yang berbeza (seperti NVDA, Jaws, dan Voiceover) untuk memastikan ia berfungsi dengan baik.
• Pengalaman Pengguna: Sentiasa fokus pada pengalaman pengguna. Tanya pengguna pembaca skrin mengenai keutamaan dan keperluan mereka.

Meringkaskan

Melaksanakan penukar drop-down yang boleh diakses untuk jadual besar memerlukan pertimbangan yang teliti. Walaupun kawasan Aria-Live boleh digunakan untuk memberitahu pembaca skrin perubahan kepada kandungan pengguna, untuk jadual besar, mod TabPanel mungkin lebih sesuai. Jika anda berkeras menggunakan pemilih dropdown, pastikan untuk mengeluarkan kawasan Aria-Live dan gunakan pengurusan fokus untuk meletakkan fokus secara langsung di atas meja. Pada akhirnya, matlamatnya adalah untuk menyediakan pengguna pembaca skrin dengan pengalaman yang cekap, intuitif, dan mudah dinavigasi.

Atas ialah kandungan terperinci Melaksanakan penukar drop-down yang boleh diakses untuk jadual besar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!