Tombol tanpa nama

Tombol tanpa nama

Tombol tanpa nama adalah tombol yang hanya menggunakan ikon saja tanpa menggunakan anchor text.

Penggunaan tombol tanpa nama pada halaman web / blog sebenarnya sangat efisien karena ringkas, rapi dan lebih mudah diatur. Tetapi hal ini menjadi masalah, terutama pada pengujian PageSpeed Insight yang menunjukkan koreksi :

Tombol memiliki nama yang tidak dapat diakses.

Kasus serupa seperti ini juga berlaku pada elemen a:link (tag <a>) yang tidak menggunakan anchor text.
Lihat penjelasan detailnya di postingan Link tidak dapat di-crawl

Walaupun dari sisi tampilannya di halaman sebenarnya tidak bermasalah. Hal ini dikarenakan Google menerapkan aturan yang berorientasi ke masa depan. Tujuannya untuk meningkatkan standar fungsi dari sebuah halaman web / blog agar dapat diakses oleh program-program atau aplikasi dan juga berbagai macam platform yang kini semakin berkembang agar tidak kadaluarsa atau bahkan punah karena tidak dapat menyesuaikan perkembangan teknologi.

Contoh tombol tanpa nama

Tombol ikon

Tampilan tombol tanpa nama (teks) seperti contoh diatas secara visual pada kondisi normal dan digunakan oleh manusia normal sebenarnya tidak bermasalah atau yang lagi mager. Tetapi tidak untuk Google yang merayapi halaman web / blog menggunakan bot (Googlebot). Pastinya tombol tersebut tidak akan dikenali oleh Googlebot sehingga tidak akan dicrawl untuk masuk dalam pengindeksan mesin pencarian.

Selain Googlebot, program atau aplikasi seperti screen reader (pembaca layar) bagi pengguna yang penglihatannya kurang baik, tentu saja tidak akan mengetahui apa fungsi dari tombol tersebut. Karena yang berperan untuk menyampaikan informasi adalah teks.

Supaya tidak perlu merubah tampilan tombol menjadi teks, yang perlu dilakukan adalah menambahkan atribut khusus pada elemen HTML pembentuk tombol tersebut.

Solusi untuk tombol tanpa nama

Cara pertama

Salah satu cara paling mudah agar tombol dapat diakses adalah mengganti ikon dengan teks atau menambahkan teks bersamaan dengan ikon. Misal :
Jika cara ini kurang cocok atau tidak efisien, gunakan cara selanjutnya.

Cara ke-2

Dengan menambahkan atribut title

Contoh :

<button class='menu' title='Tombol Copy'><i class="fa-regular fa-clone"/><button>

Contoh pada link :

<a href='url' title='Teks title'/>

Cara ke-3

Menambahkan atribut aria-label

contoh :

<button class='menu' aria-label='Tombol Menu'>Menu<button>

Cara ke-4

Apabila tombol diwakili oleh elemen lain, tidak menggunakan tag <button> misal menggunakan elemen dengan tag span / div sebagai tombol:

<div class='tombol-download'>
<span class='download-btn' role='button'>Download</span>
</div>

Menggunakan elemen div sebagai tombol

<div class='tombol-download'>
  <div aria-label='Tombol download' class='download-btn' role='button'>
    <i class="fa-solid fa-download"></i>
  </div>
</div>

Untuk penggunakan elemen lain (selain button) tetapi diberikan fungsi / peran sebagai tombol (termasuk contoh tombol ikon diatas), lihat penjelasannya halaman Atribut ROLE.

⇐ Sebelumnya

Selanjutnya ⇒