iFrames hendaklah memasukkan elemen tajuk di dalam teg induk.</p></li> <li><p>Sebagai amalan terbaik, adalah baik untuk menetapkan penatalan kepada "auto" atau "ya" dalam <iframe> tetapan tag. Ini membolehkan orang yang kurang penglihatan dapat menatal ke kandungan dalam <iframe> yang mereka mungkin tidak dapat melihatnya.</p></li> </ul> <h2> Fokus pesanan </h2> <ul> <li>Tertib fokus lalai mestilah logik, intuitif dan sepadan dengan susunan visual halaman.</li> </ul> <h2> Tabindex </h2> <ul> <li><p>Elemen yang biasanya boleh difokuskan tetapi berada dalam keadaan tidak aktif (cth., kotak input atau butang yang dilumpuhkan) harus diberi indeks tab negatif (tabindex="-1").</p></li> <li><p>Hendaklah menambah fokus kembali pada elemen apabila aktif atau diperlukan (boleh menggunakan JS atau TS).</p></li> <li><p>Hendaklah mengelakkan indeks tab positif. Memberi tumpuan kepada elemen bukan interaktif dan mengganggu susunan fokus biasa boleh mengelirukan dan mengecewakan pengguna. Jarang sekali keadaan memerlukan penambahan tabindex positif, seperti tabindex=1 pada elemen yang tidak boleh difokuskan.</p></li> </ul> <h2> Langkau pautan </h2> <ul> <li><p>Pautan langkau mesti disertakan untuk membantu pengguna memintas menu navigasi.</p></li> <li><p>Langkau pautan hendaklah mengandungi konteks tentang tujuan pautan (mis. "Langkau ke kandungan utama") dan boleh menggunakan sifat ARIA tambahan seperti aria-labelledby, aria-label.</p></li> <li><p>Langkau pautan boleh kelihatan atau tersembunyi secara visual (berdasarkan reka bentuk) sehingga pengguna tab kepadanya.</p></li> </ul> <h2> Penunjuk fokus </h2> <ul> <li>Pastikan penunjuk fokus tidak tersembunyi di bawah komponen lain.</li> </ul> <h2> Penggayaan lalai penyemak imbas </h2> <ul> <li><p>Tidak boleh mengatasi penggayaan fokus penyemak imbas lalai (cth. "garis besar: 0" atau "garis besar: tiada").</p></li> <li><p>Gaya fokus tersuai dibenarkan.</p></li> </ul> <h2> JavaScript </h2> <h3> Peristiwa pencetus </h3> <ul> <li>Jika acara klik (cth. onClick()) digunakan pada elemen bukan semantik (cth. <div>), acara keydown/keyup mesti ditambah untuk mengesan enter atau tekan kekunci ruang.</li> </ul> <h3> Tajuk halaman </h3> <ul> <li>Setiap halaman hendaklah mempunyai tajuk. Ia boleh diterima untuk menggunakan harta document.title atau pakej pihak ketiga untuk tujuan ini</li> </ul> <h3> Kandungan dinamik </h3> <div><table> <tr> <th>Possible misuse</th> <th>Correct use</th> </tr> <tr> <td>Render large chunks of non-semantic HTML</td> <td>Render smaller pieces of semantic HTML</td> </tr> <tr> <td>Not allowing time for dynamic content to be recognized by assistive technology</td> <td>Using a setTimeout() time delay to allow users to hear the full message</td> </tr> <tr> <td>Applying style attributes for onFocus() dynamically</td> <td>Use :focus for the related elements in your CSS stylesheet</td> </tr> <tr> <td>Applying inline styles may cause user stylesheets to not be read properly</td> <td>Keep your styles in CSS files to keep the consistency of the theme</td> </tr> <tr> <td>Creating very large JavaScript files that slow down overall site performance</td> <td>Use less JavaScript; prefer CSS for animations or sticky navigation for better performance</td> </tr> </table></div> <h3> Pengurusan fokus peringkat komponen </h3> <ul> <li>Apabila pengguna membuka modal, mereka seharusnya dapat menavigasi antara elemen yang boleh diambil tindakan di dalamnya (cth., membatalkan dan menyerahkan butang) menggunakan kekunci Tab. Walau bagaimanapun, tumpuan mesti kekal terhad kepada modal, menghalang pengguna daripada mengakses unsur di luarnya melainkan mereka menutup modal secara eksplisit. Ini memastikan fokus terperangkap dalam modal.</li> </ul> <h3> Pengurusan fokus peringkat halaman </h3> <ul> <li><p>Fokus juga mesti dikekalkan apabila pengguna menavigasi dari halaman ke halaman.</p></li> <li><p>Bila-bila masa pengguna mengklik pada pautan untuk pergi ke halaman lain dalam aplikasi, tumpuan sama ada disimpan di tempat yang sama atau berpotensi diletakkan di tempat lain sepenuhnya.</p></li> <li><p>Berikut ialah peletakan fokus yang dicadangkan apabila pengguna menavigasi dari satu halaman ke halaman yang lain.</p></li> <li><p>Letakkan fokus pada bekas utama dengan pengumuman langsung aria.</p></li> <li><p>Letakkan fokus semula pada pautan untuk melangkau ke kandungan utama.</p></li> <li><p>Alihkan fokus ke tajuk peringkat atas halaman baharu.</p></li> </ul> <h3> Pengurusan negeri peringkat komponen </h3> <ul> <li><p>Keadaan komponen harus diurus menggunakan atribut ARIA (cth. gunakan atribut dikembangkan aria untuk memberitahu pengguna sama ada menu lungsur turun atau senarai dikembangkan atau diruntuhkan.).</p></li> <li><p>Adalah penting untuk bersikap selektif apabila menggunakan atribut ARIA. Fikirkan melalui aliran pengguna untuk memahami maklumat penting yang harus disampaikan kepada pengguna.</p></li> </ul> <h3> Pengurusan keadaan peringkat halaman </h3> <ul> <li><p>Jika kandungan ditambahkan atau dikemas kini secara dinamik pada halaman (cth., mesej makluman atau perubahan teks), ia harus diumumkan kepada pengguna.</p></li> <li> <p>Lebih baik digunakan </p> <ul> <li>React: react-aria-live atau react-a11y-announcer </li> <li>Sudut: LiveAnnouncer </li> <li>Vue: vue-a11y-utils </li> </ul> </li> </ul> <p>(sambung...)</p>
