PageSpeed Insights : Daftar Item ( li ) tidak dimuat dalam elemen induk?

Untuk menyempurnakan aksesibilitas website salah satu yang harus dilakukan adalah menempatkan elemen <li> selalu dalam elemen induk yaitu <ul> atau <ol>, dan saya selalu konsisten melakukannya.

Disini saya akan berbagi pengalaman mengenai hal tersebut karena beberapa waktu lalu sesuatu yang tidak biasa terjadi, ketika saya menguji template blog yang menurut saya sudah memenuhi standard.

Tetapi anehnya pagespeed insights menyatakan bahwa pada template tersebut, daftar item (element) <li> tidak dimuat dalam elemen induk <ul> atau <ol>, padahal ketika saya inspeksi semua elemen <li> selalu berada dalam elemen induk.
Gambar ilustrasi Google PageSpeed Insights
Saya berfikir sejenak "apa yang salah sebenarnya...?", karena pada waktu yang bersamaan atribut [role] pada list menu navigasi juga dinyatakan tidak sesuai dengan standard ARIA (Accessible Rich Internet Applications).

Ternyata kecurigaan saya benar bahwa kekeliruan tersebut (listitem tidak dimuat dalam elemen induk) terjadi karena penerapan atribut [role] yang keliru. [ads id="ads1"]
<ul role="menubar">
 <li><a href="#" role="menuitem">Menu_1</a></li>
 <li><a href="#" role="menuitem">Menu_2</a></li>
 <li><a href="#" role="menuitem">Menu_3</a></li>
 <li><a href="#" role="menuitem">Menu_4</a></li>
</ul>
Seharusnya ketika kita menggunakan atribut role="menubar" maka aria-labelledby atau aria-label harus disertakan dengan value (name) yang dapat diakses, kemudian pada elemen submenu aria-orientation="vertical" juga harus diterapkan, dan saya masih memiliki masalah tentang hal ini.

Jadi, yang saya lakukan untuk mengatasinya adalah alih-alih menggunakan atribut role="menubar" dan role="menuitem" saya memilih menggunakan atribut standard elemen listitem yaitu;
  • role="list" dan
  • role="listitem"
Sehingga elemen menunavigasi tidak lagi menggunakan atribut role="menubar" dan role="menuitem" melainkan menggunakan atribut role="list" dan role="listitem" seperti contoh di bawah ini.
<ul role="list">
 <li><a href="#" role="listitem">Menu_1</a></li>
 <li><a href="#" role="listitem">Menu_2</a></li>
 <li><a href="#" role="listitem">Menu_3</a></li>
 <li><a href="#" role="listitem">Menu_4</a></li>
</ul>
Dan hasilnya masalah aksesibilitas website pada pengujian pagespeed insights 100% teratasi khususnya pada bagian "Daftar item (element) <li> tidak dimuat dalam elemen induk <ul> atau <ol>" dan maslah pokoknya yakni [role] menubar.

Sebenarnya semua atribut WAI-ARIA bukanlah atribut wajib untuk struktur website, meskipun demikian semua atribut tersebut sangat berguna untuk pembaca layar, jadi ketika kamu memilih untuk menggunakannya kamu harus benar-benar menguasai tentang pembaca layar.

Jika kamu memilih untuk menghapus semua atribut tersebut juga akan mengatasi aksesibilitas website di pengujian pagespeed insights, sekian dari saya semoga pengalaman ini dapat memberikan ilmu bagi teman-teman blogger semua.
Close