Mengatasi Masalah Buttons do not Have an Accessible Name

Panduan web dev #1 : Mengatasi problem Buttons do not have an accessible name pada saat pengujian website atau blog kita di web.dev / Lighthouse.

Sebagai web developer atau blogger kita harus mengikuti perkembangan dan selalu menerapkan praktik yang baik sesuai dengan aturan mainnya Google, agar situs web mempunyai nilai yang baik, entah itu di mesin telusur apalagi pengalaman pengguna.

Secara umum tools Lighthouse mempunyai 5 indikator diantaranya:

1. Performance
2. Accessibility
3. Best Practices
4. SEO
5. Progressive Web App

Minimal poin 1 sampai dengan 4 berwarna hijau dengan rentang score 90–100.
Lalu nomor 5 gimana? untuk nomor 5 kita skip dulu, karna saya pun tidak menerapkannya.

Kembali ke topik, masalah buttons do not have an accessible name dalam hal ini berkaitan dengan skor Accessibility.

Accessibility intinya yaitu memastikan bahwa fungsi yang terdapat pada situs dapat diakses dan dioperasikan dengan baik oleh pengguna. Goals akhirnya ke pengalaman pengguna.

Lalu bagaimana cara mengatasi indikator merah buttons do not have an accessible name? sedangkan buttons yang dimaksud adalah tombol navigasi menu, otomatis tidak mempunyai nama atau label.

Agar lebih jelas berikut contoh navigasi utama (navbar) pada blog ini.

Secara otomatis di button tersebut tidak terdapat value nya berikut tampilan HTML nya.

<button class="navbar-toggle x collapsed" data-target="#navbar-main" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

Untuk mengatasinya sangatlah mudah yaitu dengan menambahkan attribute aria-label, jadi hasilnya seperti ini:

<button class="navbar-toggle x collapsed" aria-label="Menu Navigasi" data-target="#navbar-main" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

Contoh di atas saya menambahkan atribut aria-label="Menu Navigasi".
Hasilnya problem teratasi, dan skor Accessibility blog ini menjadi 100.

Demikianlah cara mengatasi masalah buttons do not have an accessible name, simple but effective.

Baca juga :

Cara Mempercepat Loading / Page Speed Blogger