🔔 Aktifkan notifikasi disini Google News

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.

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.

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
PT Saifullah Digital Advantec

21 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. pas banget lagi benerin speed insight
  2. masalah aria* nya masih ada mas
    1. Coba diperiksa lagi mas, soalnya ada 2 kode yang sama di dalam template. Cek kode ini <b:elseif cond='data:item == &quot;Dark&quot;'/>
    2. udah bisa bang mantap makasih, tambahin tutor seo juga dong bang
  3. Kurang optimal mas cuma naik sedikit, coba kyak yang v1.5 mas lebih mantap
    1. Tapi skor Accessibility nya udah jadi 100 kan mas? Soalnya postingan yang ini khusus bahasa bagian Accesibility aja. Belum termasuk skor Performa, Best Practice dan SEO
    2. Pas cek ulang, turun semua mas, semoga cepat update artikel agar naik lagi😂👍👍 semangat trus mas, thx bantuan tutorial nya mas
    3. Kalau turun semua berarti mas yang salah dalam menerapkan kodenya. Karena kode ini udah di ujicoba di Median UI 1.6 milik saya pribadi.
  4. permisi mas, maaf melenceng dri artikel.
    Saya kan pasang Kotak Donasi spt yg ada pd blog ini, tp kok muncul di Halaman Statis ya? biar ga muncul gmna ya?
    1. Harusnya kotak donasi gak muncul di halaman statis karena di dalam kodenya sudah saya sematkan tag condition agar kotak donasi hanya tampil di halaman post.

      Kemungkinan mas salah meletakkan kodenya jadi berbenturan dengan tag conditional lain.

      Jadi, coba ganti kode <b:if cond='data:view.isPost'> dengan kode <b:if cond='data:view.isPost and !data:view.isPage'>
    2. makasih mas, udah jadi.
  5. mas di (aria) tidak bermasalahskor mobile udah 97% ada 1 masalah yaitu. First Contentful Paint (3G) 3660 ms bagaimana mas
    1. First Contentful Paint (3G) itu dibagian Performance, bukan bagian Accesibility. Biasanya itu masalah Font.
  6. Bang gimana cara meningkatkan score pagespeed dan gtmetrix di median ui v1.6 seperti di blog ini, mohon dibuatkan tutorialnya bang, terimakasih
    1. Jangan lupa kasih bintang 5 dulu di kotak donasi ya bang. Soalnya tutorial yang abang minta itu seharga Rp 100.000 Cek di sini 👉https://m.saifullah.id/product/jasa-mempercepat-loading-blogger/

      Tapi kalau abang mau ngasih bintang 5 di kotak donasi, kapan-kapan saya bagikan tutorialnya GRATIS.
    2. Tutorialnya sudah di buatkan, cek di sini 👉 https://www.saifullah.id/2021/12/meningkatkan-performance-median-ui-16.html
  7. Performance aja yg dpt 63%, yg lain dpt 100%
    1. Baca judul postingan kak 😁
      Postingan ini khusus membahasa cara meningkatkan score Accessibilty, bukan performance. Kalau mau ningkatkan score Performance baca postingan saya yang lain.
  8. udah saya ikutin tapi ga sampe 100, mentok di 91. Padahal pemasangan codenya sudah ditempat yang benar
    1. Hati-hati mencari kode ini karena lebih dari satu, kemungkinan kk masih salah penempatannya. Jika butuh bantuan, bisa menggunakan jasa kami.
    2. <b:elseif cond='data:item == &quot;Dark&quot;'/>
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.