Jelaskan manfaat aksesibilitas menggunakan elemen HTML semantik – Beragampengetahuan

Inilah yang akan Anda temukan di alam liar:

<div class="btn" role="button">Custom Button</div>

Ini salah satu bau kode yang membuat saya terdiam karena kita tahu ada semantiknya <button> elemen yang bisa kita gunakan. Satu hal lagi tentang menggabungkan jangkar (mis. <a class="btn">) dan tombol, tapi bukan itu yang kita bicarakan di sini, kami punya panduan hebat .

sebuah semantik <button> Elemen lebih masuk akal daripada meraihnya <div> Karena, yah, Semantik. Setidaknya itulah yang memicu bau kode bagi saya. Saya dapat menguraikan beberapa manfaat semantik yang kita peroleh dari a <button> Di luar pikiranku:

• keadaan interaksi
• indikator fokus
• dukungan papan ketik

Namun saya mendapati diri saya tidak dapat mendefinisikan dengan jelas manfaat-manfaat ini. Itu lebih seperti pokok pembicaraan yang saya pegang teguh daripada argumen yang jelas untuk digunakan <button> Melampaui <div>. Tapi saat saya memakai Sara Soueidan Fungsi tambahan yang berguna Tentu saja saya benar Mengapa <button> adalah praktik terbaik.

Mari kita bandingkan kedua metode ini:

Tahukah Anda bahwa Anda dapat memeriksa semantik ini langsung di DevTools? Saya malu untuk mengakui bahwa saya tidak melakukan ini sebelum menonton kelas Sara.

Jelas ada perbedaan antara kedua “tombol” ini, dan ini bukan hanya perbedaan visual. Harap perhatikan hal berikut:

• ini <button> diekspos sebagai button peran, pada saat yang sama <div> adalah a generic Peran. Kita sudah mengetahuinya.
• ini <button> Mendapat tag aksesibilitas yang sama dengan kontennya.
• ini <button> Jadilah fokus dan segera dapatkan pendengar klik.

Saya tidak yakin Mengapa Seseorang akan meraihnya <div> lebih dari satu <button>. Tapi jika saya harus bertaruh, itu mungkin karena gayanya <button> Lebih sulit daripada pemodelan <div>. Anda harus mengatur ulang semua gaya agen pengguna tersebut, yang terasa seperti langkah tambahan dalam prosesnya <div> Tidak ada komentar gaya apa pun, selain itu menjadi elemen tingkat blok sejauh menyangkut aliran dokumen.

Saya tidak mengerti alasannya ketika penataan tombol reset hanya membutuhkan satu baris CSS:

Dari sini, kita bisa menggunakan kelas yang sama persis untuk mendapatkan tampilan yang sama persis:

Sepertinya diperlukan lebih banyak pekerjaan untuk menciptakan kembali manfaat bawaan yang sama seperti yang kita peroleh dari semantik <button> Khusus untuk satu <div>. Kursus Sara memberi saya bahasa yang tepat untuk mengekspresikan bau kode:

• nomor div Tab Difokuskan secara default. Bahkan setelah memberinya peran sebagai tombol, browser tidak mengenalinya sebagai elemen interaktif. Peran ini tidak menambahkan perilaku, hanya cara penyajiannya kepada pembaca layar. kita perlu memberikannya a tabindex.
• Namun meski begitu, kami tidak bisa mengoperasikan tombolnya Space atau Return. Kita juga perlu menambahkan perilaku interaktif, mungkin menggunakan pendengar JavaScript untuk memicu fungsi saat tombol ditekan.
• tahukah kamu Space Dan Return kunci melakukan hal yang berbeda? Adrian Roselli menjelaskannya dengan sangat baik dan itu adalah momen besar bagi saya. Audiens yang berbeda mungkin diperlukan untuk menafsirkan kedua interaksi tersebut.
• Tentu saja perlu kita pertimbangkan disabled negara. Yang diperlukan hanyalah atribut HTML <button>tapi satu <div> Anda mungkin juga memerlukan fungsi lain untuk menemukan beberapa jenis atribut data dan kemudian mengaturnya disabled di atasnya.

Oh, tapi hei, kita bisa menampar <div role=button> Di sana, kan? Sangat menggoda untuk pergi ke sana tetapi yang dilakukannya hanyalah mengekspos <div> Tombol sebagai teknologi bantu. Ini dideklarasikan sebagai tombol tetapi tidak melakukan apa pun untuk menciptakan kembali interaksi yang diperlukan untuk pengalaman pengguna penuh <button> Melakukan. Dan gaya apa pun tidak dapat memperbaiki semantik ini. kita bisa membuatnya <div> Kelihatannya seperti sebuah tombol, namun meskipun terlihat seperti sebuah tombol, itu bukanlah sebuah tombol.

Bagaimanapun, itulah yang ingin saya bagikan. Menggunakan elemen semantik bila memungkinkan adalah salah satu pernyataan “praktik terbaik” yang kami pelajari selama ini. Saya mengajarkannya kepada siswa saya, tetapi saya bersalah karena mengandalkan alasan tingkat tinggi “ini membantu aksesibilitas” yang bersifat universal. <div>. Sekarang saya memiliki pokok pembicaraan khusus untuk dijelaskan Mengapa Inilah masalahnya, dan senjata “baru” di gudang DevTools saya untuk memeriksa dan mengonfirmasi poin-poin ini.

Terima kasih, Sarah! Ini hanyalah puncak gunung es dalam hal apa yang saya pelajari (dan terus saya pelajari) dari kursus ini.

Menjelaskan manfaat aksesibilitas menggunakan elemen HTML semantik awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.