Tips kali ini adalah bagaimana mengatasi bendera merah buttons do not have an accessible name pada audit dengan Lighthouse. Audit ini berada dalam kategori Accessibility yang memeriksa peluang untuk meningkatkan kemudahan akses untuk sebuah laman web.
Dalam penjelasannya disebutkan bahwa selain menggunakan audit Lighthouse untuk memeriksa aksesabilitas dianjurkan pula untuk melakukan pengujian secara manual. Begitupun audit ini sudah sangat membantu web developer dalam memperbaiki kinerja website.
Mengapa button perlu mempunyai nama yang dapat diakses, oleh karena ketika button tidak diberi nama yang bisa diakses, maka screen reader yang digunakan para penyandang tuna netra dan dan teknologi bantuan lainnya hanya menyebutnya sebagai button, yang sama sekali tidak memberi informasi ke pengunjung tentang apa yang dilakukan oleh button tersebut.
Website gagal dalam audit Lighthouse dan menaikkan bendera peringatan ketika website memiliki button yang tidak berisi teks atau tidak ada aria-label property. Dalam banyak kasus, webmaster tidak ingin memberi keterangan kata pada button oleh karena akan merusak desain web secara visual.
Itu akan memberi informasi kepada pengunjung bahwa mereka akan dibawa ke homa page ketika button di klik. Keberadaan info seperti itu tentu akan sangat membantu pengunjung dalam navigasi blog.
Akan halnya button yang tidak memungkinkan mempunyai nama yang terlihat secara visual, seperti icon button, maka gunakan atribut aria-label untuk memberi gambaran jelas kepada siapa pun yang menggunakan teknologi bantuan untuk membacanya.
Jika menggunakan Theme Contempo pada Blogger, maka cari,
ganti seluruhnya dengan,
Selanjutnya cari,
ganti semuanya dengan,
Setelah melakukan perubahan, coba lakukan audit Lighthouse lagi untuk melihat perubahan pada skornya. Demikian semoga bermanfaat.
Dalam penjelasannya disebutkan bahwa selain menggunakan audit Lighthouse untuk memeriksa aksesabilitas dianjurkan pula untuk melakukan pengujian secara manual. Begitupun audit ini sudah sangat membantu web developer dalam memperbaiki kinerja website.
Mengapa button perlu mempunyai nama yang dapat diakses, oleh karena ketika button tidak diberi nama yang bisa diakses, maka screen reader yang digunakan para penyandang tuna netra dan dan teknologi bantuan lainnya hanya menyebutnya sebagai button, yang sama sekali tidak memberi informasi ke pengunjung tentang apa yang dilakukan oleh button tersebut.
Website gagal dalam audit Lighthouse dan menaikkan bendera peringatan ketika website memiliki button yang tidak berisi teks atau tidak ada aria-label property. Dalam banyak kasus, webmaster tidak ingin memberi keterangan kata pada button oleh karena akan merusak desain web secara visual.
Bagaimana membuat button punya accessible name
Jika memungkinkan, maka cara termudah adalah memberi nama keterangan mengenai apa yang terjadi atau akan dibawa ke halaman mana ketika pengunjung klik label. Misalnya:<button>Home</button>
Itu akan memberi informasi kepada pengunjung bahwa mereka akan dibawa ke homa page ketika button di klik. Keberadaan info seperti itu tentu akan sangat membantu pengunjung dalam navigasi blog.
Akan halnya button yang tidak memungkinkan mempunyai nama yang terlihat secara visual, seperti icon button, maka gunakan atribut aria-label untuk memberi gambaran jelas kepada siapa pun yang menggunakan teknologi bantuan untuk membacanya.
Jika menggunakan Theme Contempo pada Blogger, maka cari,
<a class='return_link' expr:href='data:blog.homepageUrl'>
<b:include data='{ button: true, iconClass: "back-button rtl-reversible-icon flat-icon-button ripple" }' name='backArrowIcon' />
</a>
ganti seluruhnya dengan,
<a class='return_link' href='/'>
<button class='svg-icon-24-button back-button rtl-reversible-icon flat-icon-button ripple' aria-label='Home button'>
<svg class='svg-icon-24'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_arrow_back_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</button>
</a>
Selanjutnya cari,
<div class='navigation'>
<b:include data='{ button: true, iconClass: "flat-icon-button ripple sidebar-back" }' name='backArrowIcon'/>
</div>
ganti semuanya dengan,
<div class='navigation'>
<button class='svg-icon-24-button flat-icon-button ripple sidebar-back' aria-label='navigation'>
<svg class='svg-icon-24'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_arrow_back_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</button>
</div>
Setelah melakukan perubahan, coba lakukan audit Lighthouse lagi untuk melihat perubahan pada skornya. Demikian semoga bermanfaat.