Artikel ini memperkenalkan A11yaccordion, widget akordion yang boleh diakses yang direka untuk meningkatkan pengalaman pengguna untuk individu yang kurang upaya. Ia menangani kekurangan akses yang sama dengan widget yang sama, terutamanya akordion jQuery.

Ciri -ciri & Penambahbaikan Utama:

• Navigasi papan kekunci yang dipertingkatkan: A11yaccordion membolehkan navigasi papan kekunci yang lancar untuk pengguna yang tidak boleh menggunakan tetikus. Pengguna boleh dengan mudah melalui tajuk widget.
• Keserasian pembaca skrin: Pembaca skrin dengan tepat membaca semua kandungan, termasuk tajuk yang dikemas kini secara dinamik berdasarkan hasil carian.
• Sumber Terbuka & Disesuaikan: Kod sumber widget boleh didapati di GitHub, menggalakkan sumbangan komuniti dan penyesuaian. Ia termasuk API JavaScript untuk kawalan programatik.
• menangani isu kebolehcapaian yang sama: Widget secara langsung menangani masalah yang terdapat dalam widget akordion yang sedia ada, seperti ketidakupayaan untuk tab melalui tajuk dan kekurangan sokongan pembaca skrin untuk kandungan dalam bahagian yang runtuh.

Latar Belakang Pembangunan:

A11yaccordion berasal dari keperluan dalam projek Atutor, sistem pengurusan pembelajaran sumber terbuka. Matlamatnya adalah untuk mewujudkan akordion yang boleh diakses untuk menguruskan data kursus, memastikan pematuhan piawaian aksesibiliti.

Bermula:

A11yaccordion boleh didapati di GitHub. Sertakan fail CSS (dist/css/a11yAccordion.css) dan JavaScript (dist/js/a11yAccordion-0.2.2.min.js) dalam projek anda. Contoh mudah menggunakan widget ditunjukkan di bawah:

<ul class="a11yAccordion" id="Accordion1">
  <li class="a11yAccordionItem">
    <div class="a11yAccordionItemHeader">
      <strong>></strong>Random Months<strong>></strong>
    </div>
    <div class="a11yAccordionHideArea">
      <ul>
        <li>January</li>
        <li>June</li>
        <li>February</li>
        <li>November</li>
      </ul>
    </div>
  </li>
  <!-- ... more accordion items ... -->
</ul>

Inisialisasi JavaScript:

var myAccordion = a11yAccordion({
  parentSelector: '#Accordion1'
});

Contoh visual akordion yang dihasilkan ditunjukkan di sini:

Pilihan Widget & API:

Widget menawarkan beberapa pilihan konfigurasi, termasuk pemilih untuk bekas induk, tajuk, dan kawasan tersembunyi; pilihan gaya; kelajuan animasi; dan fungsi carian. API JavaScript menyediakan fungsi untuk runtuh, berkembang, dan menukarkan baris individu.

Pembangunan & Sumbangan Masa Depan:

Walaupun bertambah baik, perkembangan selanjutnya dirancang, termasuk menambah baris programatik yang melumpuhkan. Sumbangan dari pemaju dan pereka dialu -alukan.

Soalan Lazim (Soalan Lazim): (Ini diringkaskan untuk keringkasan)

Soalan Lazim meliputi topik seperti meningkatkan pengalaman pengguna, peranan ARIA, kebolehcapaian papan kekunci, kesilapan umum untuk mengelakkan, menguji kaedah, faedah SEO, gaya CSS, perbezaan antara akordion dan tab, reka bentuk responsif, dan peningkatan JavaScript. >

Atas ialah kandungan terperinci Memperkenalkan widget akordion yang boleh diakses - sitepoint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!