Cara Meningkatkan Skor Accessibility Median UI 1.6 Menjadi 100

Saifulah.id - Accessibility Score pada Median UI 1.6 belum mencapai nilai yang sempurna. Hal ini dapat dibuktikan dari nilai aksesibilitasnya yang belum mencapai angka 100. Padahal template yang bagus adalah template yang memiliki nilai 100 di semua element Lighthouse seperti halnya template yang dipakai Saifullah.id.

Masalah Accessibility Median UI 1.6

Ada 2 masalah yang muncul di bagian Accessibility Median UI 1.6, yaitu munculnya peringatan berikut ini: 

1. [aria-*] attributes do not match their roles. 
2. button, link, and menuitem elements do not have accessible names.

Kedua masalah di atas menurunkan 9% dari skor yang seharusnya. Sehingga perlu carikan jalan keluar agar template dinilai baik oleh Google.

Solusi Untuk Masalah Accessibility Median UI 1.6

Karena ada 2 bagian yang bermasalah, artinya kita harus memperbaiki 2 kode juga di dalam template. Untuk lebih jelasnya simak tutorial berikut ini:

Cara memperbaiki peringatan "[aria-*] attributes do not match their roles"

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML
   
   

   
   
5. Cari kode <b:elseif cond='data:item == &quot;Dark&quot;'/>
6. Maka kalian akan menemukan kode seperti ini

   

   
   
7. Hapus kode itu, lalu ganti dengan kode ini
   

   <b:elseif cond='data:item == &quot;Dark&quot;'/>

   <b:if cond='data:view.url != data:view.url params { amp: &quot;1&quot; }'>

   <li class='mD'>

   <span aria-label='Saifullah.id' class='tDL' data-light='Light' expr:data-text='data:item' onclick='darkMode()' role='button'><b:include name='moon-sun-icon'/></span>

   </li>

   </b:if>
8. Simpan Tema

Cara memperbaiki peringatan "button, link, and menuitem elements do not have accessible names"

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML
   
   

   
   
5. Cari kode <b:loop index='m' values='data:items' var='item'>
   
6. Maka kalian akan menemukan kode seperti ini

   

   
   
7. Hapus dan ganti kode tersebut dengan kode berikut
   

                         <b:loop index='m' values='data:items' var='item'>

                           <b:if cond='data:m &lt;= 4'>

                             <b:if cond='data:item == &quot;Home&quot;'>

                               <li class='mH'>

                                 <b:class cond='data:view.isHomepage' name='nmH'/>

                                 <b:tag role='button' expr:aria-label='data:item' expr:data-text='data:item' expr:name='data:view.url == data:blog.homepageUrl ? &quot;span&quot; : &quot;a&quot;'>

                                   <b:attr cond='data:view.url != data:blog.homepageUrl' expr:value='data:blog.homepageUrl.canonical' name='href'/>

                                   <b:attr cond='data:view.url != data:blog.homepageUrl' name='role' value='button'/>

                                   <b:include name='home-alt-icon'/>

                                 </b:tag>

                               </li>
8. Simpan Tema

Demikian tutorial Cara Meningkatkan Skor Accessibility Median UI 1.6 Menjadi 100. Semoga bermanfaat buat kalian semua yang ingin blognya tampil sempurna dimata Google Pencarian.

Jika kalian kebingungan dan mengalami masalah dalam menerapkan tutorial di atas, kalian bisa memesan jasa kami di sini atau jika ingin melihat demo Median UI 1.6 cek di sini

Jangan lupa kasih bintang 5 di kotak donasi di bawah ini agar saya tambah semangat berbagi ilmu yang saya tahu. Terima kasih.