Kata orang sharing is caring, berbagi artinya peduli. Peduli ke orang lain yang sedang susah mencari solusi pada masalah yang dihadapinya. Itu karena penjelasan baku yang diberikan laman web.dev tak membuat saya faham apa yang mestinya dilakukan untuk mengatasi masalahnya. Mungkin Anda mengalami hal yang sama.
Langkah coba salah harus saya lakukan terlebih dahulu hingga akhirnya berhasil memahami apa masalah sebenarnya, dan kemudian bisa mengatasi munculnya bendera Lists do not contain only <li> elements, yang mengurangi skor pada hasil audit Lighthouse di kategori Accessibility.
Bendera ini muncul karena pembaca layar dan teknologi pendukung lainnya, yang digunakan oleh para penyandang tuna netra, sangat bergantung pada list atau daftar yang struktur susunannya dibuat dengan baik, agar pengunjung yang berkebatasan mata itu bisa memahami isi tulisan yang ada di dalam daftar.
Konsekuensi dari susunan struktur list yang tak baik akan membuat bingung mesin pembaca layar, dan pada gilirannya membuat bingung pula para pembaca tuna netra. Struktur list yang baik adalah semua isi tulisan harus berada di dalam elemen <li> ... </li>, tidak boleh ada di luarnya atau diantara </li> dan <li>. Dengan kata lain, setelah </li> hanya boleh ada <li>, dan diantara keduanya tidak boleh ada elemen lain. Isi informasinya bisa termasuk elemen pendukung script, yaitu <script> and <template>.
Memberi contoh kadang lebih mudah dipahami, oleh karena itu perhatikan contoh list di bawah ini. Apa yang salah pada list-nya?
<ol>
<li><a href="https://xxxxxxxxxxxxx.html" ><img data-src="https://xxxx/pusaka.jpg" class="lazyload" alt="yyyy" width="90px" height="60px" />Badan Pelestarian Pusaka Indonesia</a>Jl. Veteran 1 No. 27.
Buka: 09.00 - 16.30</li>.<br>
<li><a href="https://xxxxxxxxx.html"<>img border="0" data-src="https://xxxccc/immanuel.jpg" class="lazyload" alt="zzzz" width="90px" height="60px" />Gereja Immanuel</a>Jl. Medan Merdeka Timur No.10. <br> 08.00 - 16.00.</li> </ol>
Buka: 09.00 - 16.30</li>.<br>
<li><a href="https://xxxxxxxxx.html"<>img border="0" data-src="https://xxxccc/immanuel.jpg" class="lazyload" alt="zzzz" width="90px" height="60px" />Gereja Immanuel</a>Jl. Medan Merdeka Timur No.10. <br> 08.00 - 16.00.</li> </ol>
Ya, yang salah pada list di atas adalah ada tanda baca titik (.) dan perintah ganti baris <br> yang berada di luar <li> (yang diberi warna orange), atau terletak diantara <li> dan </li>. Jika diaudit dengan Lighthouse, maka pasti akan keluar flag Lists do not contain only <li> elements and script supporting elements (<script> and <template>), dan skor hasil audit akan berkurang.
Cara mengatasi mengatasi problem itu tentunya adalah dengan membuang semua atribut yang ada di luar elemen <li>, atau memasukkannya ke area diantara elemen <li> dan </li>. Pada contoh di atas, setelah diperbaiki menjadi,
<ol>
<li><a href="https://xxxxxxxxxxxxx.html" ><img data-src="https://xxxx/pusaka.jpg" class="lazyload" alt="yyyy" width="90px" height="60px" />Badan Pelestarian Pusaka Indonesia</a>Jl. Veteran 1 No. 27.
Buka: 09.00 - 16.30</li>
<li><a href="https://xxxxxxxxx.html"<>img border="0" data-src="https://xxxccc/immanuel.jpg" class="lazyload" alt="zzzz" width="90px" height="60px" />Gereja Immanuel</a>Jl. Medan Merdeka Timur No.10. <br> 08.00 - 16.00.</li> </ol>
Buka: 09.00 - 16.30</li>
<li><a href="https://xxxxxxxxx.html"<>img border="0" data-src="https://xxxccc/immanuel.jpg" class="lazyload" alt="zzzz" width="90px" height="60px" />Gereja Immanuel</a>Jl. Medan Merdeka Timur No.10. <br> 08.00 - 16.00.</li> </ol>
Meskipun hanya ada tanda baca titik atau koma di luar <li>, bisa dipastikan bahwa bendera merah akan dikerek pada hasil audit. Karenanya, buang semua atribut atau elemen yang diletakkan tidak pada tempat seharusnya itu, maka skor hasil audit laman tentu akan meningkat. Jika belum naik skornya, teliti lagi oleh sebab boleh jadi masih ada yang belum dibuang. Semoga bermanfaat.
Label: Lighthouse, Tutorial
Bagikan ke: WhatsApp, Email. Print!.
