Bagaimanakah anda dapat menyediakan label yang boleh diakses untuk kawalan borang?

Menyediakan label yang boleh diakses untuk kawalan borang adalah penting untuk membuat borang web boleh digunakan untuk semua pengguna, terutamanya mereka yang bergantung kepada teknologi bantuan seperti pembaca skrin. Berikut adalah beberapa kaedah utama untuk memastikan label boleh diakses:

1. Gunakan elemen <label></label> : Cara yang paling mudah untuk mengaitkan label dengan kawalan borang adalah dengan menggunakan elemen <label></label> . Anda boleh mengaitkan label dengan kawalan sama ada dengan bersarang kawalan dalam elemen <label></label> atau dengan menggunakan for pada elemen <label></label> yang sepadan dengan atribut id pada kawalan borang.

    <code class="html"><!-- Nested Label --> <label> Username: <input type="text" name="username"> </label> <!-- Label with for attribute --> <label for="username">Username:</label> <input type="text" id="username" name="username"></code>

2. Sediakan teks deskriptif: Teks dalam label harus jelas menggambarkan tujuan kawalan bentuk. Elakkan label yang samar -samar seperti "Masukkan teks di sini" dan sebaliknya gunakan yang tertentu seperti "Alamat E -mel".
3. Label kedudukan dengan betul: Label harus diposisikan berhampiran kawalan yang berkaitan dan diselaraskan dengan cara yang menjadikan sambungan jelas kepada semua pengguna. Biasanya, label diletakkan di atas atau di sebelah kiri kawalan.
4. Gunakan tajuk dan ruang letak dengan sewajarnya: Walaupun tajuk dan ruang letak boleh menambah label, mereka tidak boleh menggantikannya. Atribut title boleh memberikan maklumat tambahan, tetapi label utama harus dapat dilihat pada halaman.
5. Elakkan label bertindih: Pastikan label tidak bertindih dengan kawalan yang berkaitan, kerana ini dapat mengelirukan pengguna dan membuat bentuk lebih sukar untuk digunakan.

Apakah amalan terbaik untuk memastikan label borang boleh diakses oleh pembaca skrin?

Memastikan bahawa label bentuk boleh diakses oleh pembaca skrin melibatkan mengikuti beberapa amalan terbaik:

1. Persatuan Label Eksplisit: Sentiasa gunakan elemen <label></label> dengan for yang dikaitkan dengan id kawalan borang. Ini memastikan pembaca skrin dapat mengaitkan label dengan betul dengan kawalan.
2. Elakkan label tersembunyi: Jangan sembunyikan label di luar skrin menggunakan CSS ( display: none , visibility: hidden , dan lain-lain), kerana ini dapat menghalang pembaca skrin daripada mengakses teks label.
3. Gunakan atribut ARIA: Apabila persatuan langsung dengan <label></label> tidak mungkin (contohnya, dalam susun atur kompleks), gunakan atribut ARIA seperti aria-labelledby atau aria-label untuk memberikan nama yang boleh diakses untuk kawalan.

4. Kawalan Berkaitan Kumpulan: Gunakan <fieldset></fieldset> dan <legend></legend> untuk mengawal borang yang berkaitan dengan kumpulan dan menyediakan konteks yang jelas. Elemen <legend></legend> bertindak sebagai label untuk seluruh kumpulan, menjadikannya lebih mudah bagi pembaca skrin untuk menavigasi.

    <code class="html"><fieldset> <legend>Contact Information</legend> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> </fieldset></code>

5. Uji dengan pembaca skrin: Uji borang anda dengan kerap dengan pelbagai pembaca skrin (misalnya, NVDA, Jaws, Voiceover) untuk memastikan label diumumkan dengan betul dan pengguna dapat menavigasi borang dengan mudah.

Bagaimanakah anda boleh menggunakan atribut ARIA untuk meningkatkan kebolehcapaian kawalan borang?

ARIA (aplikasi Internet yang boleh diakses) dapat meningkatkan kebolehcapaian kawalan borang, terutamanya apabila unsur -unsur HTML standard tidak mencukupi. Inilah cara anda boleh menggunakannya:

1. ARIA-LABEL: Gunakan aria-label untuk menyediakan nama yang boleh diakses untuk kawalan borang apabila label yang kelihatan tidak hadir.

    <code class="html"><input type="search" aria-label="Search site" placeholder="Search"></code>

2. Aria-LabelledBy: Gunakan aria-labelledby untuk merujuk ID elemen lain yang menyediakan teks label. Ini berguna apabila teks label disediakan oleh elemen lain pada halaman.

    <code class="html"><h2 id="search-heading">Search</h2> <input type="search" aria-labelledby="search-heading" placeholder="Search"></code>

3. Aria-DepribedBy: Gunakan aria-describedby untuk memberikan maklumat deskriptif tambahan mengenai kawalan borang, yang boleh dibaca oleh pembaca skrin selepas label.

    <code class="html"><label for="password">Password:</label> <input type="password" id="password" name="password" aria-describedby="password-help"> <span id="password-help">Must be at least 8 characters long.</span></code>

4. Aria-diperlukan: Gunakan aria-required untuk menunjukkan sama ada pengguna mesti mengisi nilai sebelum menyerahkan borang tersebut.

    <code class="html"><label for="username">Username:</label> <input type="text" id="username" name="username" aria-required="true"></code>

5. Aria-Invalid: Gunakan aria-invalid untuk menunjukkan bahawa nilai yang dimasukkan ke dalam medan input tidak sesuai dengan format yang dijangkakan oleh aplikasi.

    <code class="html"><label for="email">Email:</label> <input type="email" id="email" name="email" aria-invalid="true"></code>

Dengan menggunakan atribut ARIA ini, anda dapat meningkatkan kebolehcapaian kawalan borang anda dan memberikan sokongan yang lebih baik kepada pengguna teknologi bantuan.

Alat apa yang boleh membantu menguji kebolehcapaian label pada kawalan borang?

Beberapa alat boleh membantu menguji kebolehcapaian label pada kawalan borang. Berikut adalah beberapa yang paling berguna:

1. Gelombang (Alat Penilaian Kebolehcapaian Web): Gelombang adalah alat dalam talian percuma yang menyoroti isu -isu yang berkaitan dengan kebolehaksesan di laman web. Ia boleh mengenal pasti masalah dengan label, termasuk label yang hilang atau tidak berkaitan.
2. AX DEVTOOLS: Pelanjutan penyemak imbas oleh Deque Systems yang mengintegrasikan dengan Chrome dan pelayar lain untuk menyediakan audit kebolehcapaian masa nyata. Ia boleh menyemak persatuan label dan memberikan laporan terperinci.
3. Mercusuar: Alat sumber terbuka yang disatukan ke dalam Chrome Devtools yang melakukan audit di laman web, termasuk pemeriksaan kebolehaksesan. Ia boleh melaporkan isu -isu dengan label borang.
4. Pembaca Skrin: Alat seperti NVDA (akses desktop nonvisual), rahang (akses pekerjaan dengan ucapan), dan suara boleh digunakan untuk menguji secara manual bagaimana label borang anda diumumkan kepada pengguna.
5. A11Y.CSS: Lembaran gaya CSS yang menyoroti isu kebolehaksesan biasa di laman web, termasuk isu dengan label.
6. Wawasan Kebolehcapaian: Alat oleh Microsoft yang membantu pemaju mencari dan memperbaiki isu kebolehaksesan. Ia menyediakan panduan langkah demi langkah mengenai cara meningkatkan kebolehcapaian label.
7. Tenon.io: Perkhidmatan berbayar yang menyediakan laporan kebolehaksesan terperinci, termasuk cek untuk persatuan label dan isu kebolehaksesan yang berkaitan dengan borang yang lain.

Dengan menggunakan alat ini, anda boleh menguji dengan berkesan dan memastikan bahawa label borang anda boleh diakses oleh semua pengguna, termasuk mereka yang bergantung kepada teknologi bantuan.

Atas ialah kandungan terperinci Bagaimanakah anda dapat menyediakan label yang boleh diakses untuk kawalan borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!