Memperbaiki Kesalahan Papan Tombol Mobile Pada Blogger Template

Cara memperbaiki papan tombol mobile pada tema blogspot: Contempo, Soho, Emporio, Notable dan Essential atau lebih dikenal dengan istilah 'Menu dan Navigation TOGGLE'.

Jika postingan sebelumnya saya berbagi tentang "Memperbaiki Elemen Judul Tidak Berurutan Pada Template Blogger", tapi pada postingan ini saya akan berbagi tentang Cara Memperbaiki Kesalahan Papan Tombol Mobile ( ☰  ← ) pada Blogger Template.

Pernahkah kalian mendapatkan pesan dari PageSpeed Insights 'Tombol tidak memiliki nama yang dapat diakses!' saat melakukan test performa website yang kalian punya. Saat pesan ini muncul, tentunya nilai 'aksesbilitas' website pun di bawah nilai 100 poin.

Cara Memperbaiki Papan Tombol Mobile - Menu dan Navigation Toggle

Sekalipun kesalahan ini tidak berdampak pada SEO atau performa website, akan tetapi ini berdampak pada kesempurnaan website yaitu berkurangnya nila aksesbilitas. Jika kalian pernah mendapati kesalahan semacam ini, begini cara memperbaikinya :

Cara Memperbaiki Papan Tombol Mobile - Navigation Toggle

●   Agar lebih cepat, cari (CTRL + F) dengan menggunakan kata kunci "backArrowIcon" dan anda akan mendapati script yang kurang-lebihnya demikian :

<a class='return_link' expr:href='data:blog.homepageUrl'>
     <b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>
 </a>

lalu ubah menjadi :

<button aria-label='back-to-homepage' class='svg-icon-24-button flat-icon-button ripple sidebar-back'>
      <div class='navigation'>
        <b:include data='{ iconClass: &quot;flat-icon-button ripple sidebar-back&quot; }' name='backArrowIcon'/>
      </div>

</button>

Cara Memperbaiki Papan Tombol Mobile - Menu

●   Agar lebih cepat, cari (CTRL + F) dengan menggunakan kata kunci "hamburger" dan anda akan mendapati script yang kurang-lebihnya demikian :

<b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>

lalu ubah menjadi :

<button aria-label='menu' class='svg-icon-24-button hamburger-menu flat-icon-button ripple'>
  <div class='flat-icon-button ripple'>
     <b:include data='{ iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
   </div>

</button>

●   Masing-masing script terdapat lebih dari satu script, cari dan ubah semuanya.
●   Coba test kembali ke PageSpeed Insights
●   Done! 

Jangan tunda-tunda, silahkan coba sekarang, and GoodLuck! dan mohon share ke rekan atau ke media sosial anda.

Share :