Memperbaiki Kesalahan Papan Tombol Mobile Pada Blogger Template

Pernahkah kalian mendapatkan pesan dari PageSpeed Insights "Tombol tidak memiliki nama yang dapat diakses"!

Demikian pula sederet pesan tambahan di bawahnya "Tombol tidak memiliki nama yang dapat diakses"!. Pesan ini muncul biasanya saat kalian melakukan test performa web blogsopt menggunakan blogger template Contempo, Soho, Emporio, Notable dan Essential.

Oke Guys... masih pada obyek yang sama, tentang blogger template. Jika kemarin SehariSilam.blog berbagi artikel tentang "Memperbaiki Elemen Judul Tidak Berurutan Pada Template Blogger" tapi kali ini ss.blog akan berbagi tips "Cara Memperbaiki Kesalahan Papan Tombol Mobile Pada Blogger Template" Contempo, Soho, Emporio, Notable dan Essential.

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

●   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>

●   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.