Cara Memperbaiki Error Links Do Not Have a Discernible Name

Penainfo.com - Halo sahabat Pena Info, bagi anda seorang blogger yang tengah mencari cara agar nilai audit lighthouse nya sempurna yaitu 100, Pena Info kali ini akan memberikan tutorialnya. Nah tutorial kali ini berkaitan pada perbaikan bagian Accessibility.

Seringkali setelah kita mengecek blog kita pada Audit Lighthouse Google Chrome kita mendapati error 'Links Do Not Have a Discernible Name'. Selanjutnya, apa yang menyebabkan terjadinya error tersebut?

Seperti pada penjelasan di bagian error tersebut, error 'Links Do Not Have a Discernible Name' terjadi karena ada link error pada template yang kita gunakan.

Error di sini maksudnya adalah pada saat kita membuat sebuah link dengan menggunakan gambar maupun ikon dengan tujuan mengganti anchor text nya.

Link teks atau link gambar sebaiknya dapat dilihat oleh para pengunjung atau pembaca di blog kita sehingga dapat fokus pada link tersebut.

Mengapa Link Menjadi Penting?

Nah, elemen link yang kemudian tidak dapat diakses akan menyebabkan hambatan pada aksesibilitas pengguna, karena sebuah link merupakan suatu komponen dasar dari sebuah situs atau blog.

Pengunjung blog yang hanya bergantung pada keyboard dan tidak menggunakan mouse untuk menavigasi halaman situs, hanya dapat mengklik link yang dapat menerima fokus yang terprogram.
Link yang tidak mendapatkan fokus tentu tidak akan dapat diakses oleh pengguna.

Cara Memperbaiki Links Do Not Have a Discernible Name

Silahkan anda melakukan pengecekan pada blog anda dan lihat pada bagian mana yang error. Nah apabila anda sudah menemukan link mana yang error yang disarankan untuk diedit maka anda perlu menambahkan sedikit code agar error nya dapat diperbaiki.

Berikut contoh link yang error pada Lighthouse:

<a href="https://www.domainanda.com/"><i class="fa fa-search"></i></a>

Atau

<a href="https://www.domainanda.com/"><img alt="" height="20" src="search.png" width="20" /></a>

Contoh link di atas jika diaudit dengan Lighthouse akan menyebabkan error links do not have a discernible name.

Untuk memperbaiki kesalahan yang terjadi, silahkan anda tambahkan kode aria-label pada link tersebut seperti berikut ini.

<a aria-label='Search' href='https://www.domainanda.com/'><i class='fa fa-search'></i></a>

Kemudian agar setiap link yang anda gunakan menjadi SEO, anda juga perlu menambahkan tag title pada setiap link seperti contoh berikut ini.

<a aria-label='Search' href='https://www.domainanda.com/' title='Search'><i class='fa fa-search'></i></a>

Silahkan anda sesuaikan nama yang ditandai tersebut.

Contoh lain yang mengalami error seperti berikut ini:

<a class='blog-pager-older-link p0 borderradius3' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><svg viewBox='0 0 24 24'><path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' fill='#000000'/></svg></a>

Untuk memperbaiki kesalahan yang terjadi, silahkan anda tambahkan kode aria-label pada link tersebut seperti berikut ini.

<a aria-label='Older Posts' class='blog-pager-older-link p0 borderradius3' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle' title='Older Posts'><svg viewBox='0 0 24 24'>

    <path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' fill='#000000'/>

</svg></a>

Apabila semua link yang error sudah anda diperbaiki, selanjutnya silahkan cek lagi dengan Audit Lighthouse. Bagaimana sahabat Pena Info, mudah bukan? Sekian tutorial kali ini, semoga bermanfaat.