Elemen Input Boleh Diakses | Asas

TL;DR: Tidak kira betapa kecilnya komponen, sentiasa pastikan anda mempertimbangkan pelbagai pengguna yang berbeza dan kebolehan mereka semasa melaksanakan. Pada pandangan pertama, elemen input seperti kotak pilihan mungkin kelihatan seperti pembetulan yang mudah - tetapi masih terdapat beberapa perkara yang perlu dipertimbangkan untuk memastikan ia boleh diakses.

Siri ini akan menangani pelbagai jenis elemen input dan cara menjadikannya lebih mudah diakses, bermula dengan asas: menggunakan jenis input yang betul dan mengaitkan label.

Jom tengok.

Memilih Jenis Input yang betul

Apabila menggunakan elemen input dalam HTML, kami ingin memastikan anda sentiasa menetapkan jenis input yang betul untuk elemen yang sepadan. Jenis input lalai ialah teks dan mungkin berfungsi dalam pelbagai kes, tetapi sespesifik mungkin membantu semua pengguna anda - dan disertakan dengan sekumpulan fungsi yang wujud. contohnya mentakrifkan medan input berangka, membuka pad nombor pada telefon bimbit dan bukannya papan kekunci dan anda boleh mengehadkan julat dengan menggunakan nombor minimum dan maksimum. menutup input yang sepadan dan oleh itu melindungi privasi pengguna. Bergantung pada penyemak imbas, membuka pemilih tarikh,... dan seterusnya. Dengan memilih jenis input yang betul, kami menjadikan kehidupan kami lebih mudah, dapat menggunakan fungsi warisan tertentu dalam HTML dan meningkatkan pengalaman pengguna pada masa yang sama.

Memastikan sentiasa ada label yang dikaitkan dengan elemen input anda

Tidak kira jenis input yang anda gunakan, pastikan anda mengaitkan label pada medan input anda. Biasanya, ini boleh dilakukan dengan elemen dan atribut untuk.

<label for="firstname">First name:</label>
<input type="text" name="firstname">



<h3>
  
  
  aria-label vs. aria-labelledby
</h3>

<p>In a case in which a visual label is not an option or can't be associated with input element in the above mentioned way, aria-labels can also be used to identify form controls. If you are familiar with ARIA a little bit, you may be aware that the preferred option, if possible, is to work without aria whenever possible - however, in the real life of course, this isn't always feasible. </p>

<h4>
  
  
  aria-label
</h4>

<p>An aria-label can be used when no visible text label is present, for example, when an icon button is used without any text.<br>
</p>

<pre class="brush:php;toolbar:false"><button aria-label="Search"><img src="search-icon.svg" alt=""></button>

aria-labelledby

Apabila elemen lain digunakan sebagai rujukan untuk melabelkan input, aria-labelledby berguna.

<div role="dialog">



<p>Apabila boleh, cuba gunakan HTML semantik untuk memberikan nama yang boleh diakses untuk elemen input anda. Hanya jika anda telah memastikan ia tidak boleh dilakukan dalam kes khusus ini, kembali kepada menggunakan atribut aria. </p>

<p>Setelah kami menyelesaikan asas ini, seperti menggunakan struktur semantik, menambahkan jenis input yang betul dan label yang mengaitkan, kami boleh melihat dengan lebih dekat aspek lain untuk menjadikan elemen input kami lebih mudah diakses, seperti elemen input yang dilumpuhkan, gaya fokus & kontras warna dan navigasi papan kekunci yang dijangkakan. </p>

<p><strong>Sumber:</strong></p>

• W3Schools: Jenis Input HTML
• Kawalan Pelabelan - W3
• A11y Collective - Aria-label vs. aria-labelledby

Atas ialah kandungan terperinci Elemen Input Boleh Diakses | Asas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!