Cara Meningkatkan Skor Accessibility Median UI 1.6 Menjadi 100

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.
Cara Meningkatkan Skor Accessibility Median UI 1.6 Menjadi 100

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
    Cara Meningkatkan Skor Accessibility Median UI 1.6 Menjadi 100

  5. Cari kode <b:elseif cond='data:item == &quot;Dark&quot;'/>
  6. Maka kalian akan menemukan kode seperti ini
    Cara Meningkatkan Skor Accessibility Median UI 1.6 Menjadi 100

  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
    Cara Meningkatkan Skor Accessibility Median UI 1.6 Menjadi 100

  5. Cari kode <b:loop index='m' values='data:items' var='item'>
  6. Maka kalian akan menemukan kode seperti ini
    Cara Meningkatkan Skor Accessibility Median UI 1.6 Menjadi 100

  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.

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

Mau donasi lewat mana?

BRI - Saifullah (05680-10003-81533)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan donasi. Klik tombol merah.