Suzy Naschansky dari Kalender Kedatangan HTMHell:
All About Dragons
I like dragons. Blah blah blah blah blah.
Lihat itu aria-labelledby atribut? Rantai dua ID dari markup, satu untuk judul (#article1-heading) dan satu untuk tautan (#article1-read-more). Apa yang terjadi di sana adalah pembaca layar akan mengganti label semantik yang ada di antara tag tautan dan menggunakan konten dari kedua elemen dan mengumumkannya bersama sebagai satu string teks:
Read more All About DragonsSaya selalu malu ketika menyadari ada sesuatu yang menurut saya harus saya ketahui tetapi tidak. Ini jelas salah satu dari kasus-kasus itu dan saya bersyukur karena Suzy membagikannya.
Saya sebenarnya dalam situasi baru-baru ini di mana saya bisa saja seharusnya melakukan ini. Saya selalu mencoba untuk menghindari banyak tautan "Baca lebih lanjut" di halaman yang sama tetapi menemukan rasa yang berbeda dari hal yang sama itu sulit ketika Anda bekerja dengan sesuatu seperti satu putaran dari 15 posting (walaupun ada sumber daya untuk membantu). Dan jika kita perlu mempersingkat label karena alasan estetika — persyaratan desain dan yang lainnya — itu bahkan lebih menantang. Itu aria-labelledby atribut memberi saya apa yang saya inginkan: label visual yang konsisten dan lebih banyak pengumuman kontekstual untuk teknologi bantuan.
Dan ini hanya terjadi jika teks yang ingin Anda gunakan untuk label yang dapat diakses sudah ada di halaman. Kalau tidak, Anda ingin ikut aria-label dan dengan peringatan bahwa ini murni untuk elemen interaktif yang tidak dapat memberi label sesuatu yang dapat diakses dengan HTML semantik.
Jika Anda bekerja di CMS seperti WordPress (seperti saya), Anda mungkin perlu melakukan sedikit pekerjaan ekstra. Seperti ketika saya meletakkan blok Tombol di halaman, ini adalah opsi yang harus saya gunakan:
Beberapa opsi bagus di sana, tetapi tidak ada hubungannya dengan pelabelan yang dapat diakses. Jika Anda bertanya-tanya apa yang terkubur di panel Lanjutan itu:
Sebagai gantinya, Anda harus mengedit tombol dalam mode HTML:
Namun sebelum melakukan itu, Anda harus menambahkan ID ke heading yang ingin Anda gunakan. Blok Tajuk memiliki pengaturan panel Lanjutan yang sama untuk menambahkan jangkar, yang akan menyuntikkan ID pada elemen:
Kemudian Anda dapat mengedit blok Tombol dalam mode HTML dan menambahkan accessible-labels ID sekaligus ID untuk tombol itu sendiri. Ini adalah contoh markup yang diedit:
Besar! Tapi WordPress tidak keren dengan itu:
Anda dapat mencoba menyelesaikan masalah ini:
Le menghela nafas. Blok Tombol harus dikonversi ke blok HTML Khusus. Agak mengalahkan seluruh hal pengeditan visual yang sangat bagus di WordPress. Saya melakukan pencarian super cepat untuk sebuah plugin yang mungkin menambahkan opsi pelabelan ARIA ke blok tertentu, tetapi gagal. Sepertinya kesempatan matang untuk membuat satu atau kirimkan PR untuk blok yang dapat menggunakan opsi tersebut.
