Pemakaian Unordered List pada Menu

Diperbarui 12 November 2017 oleh Dani Iswara

Menurut Konsorsium World Wide Web (WWW), List in HTML documents dapat berisi informasi berurut, tidak berurut, atau menyajikan definisi. Informasi berurut disajikan memakai tag atau elemen ol dan li. Informasi tidak berurut memakai tag ul dan li. Sedangkan informasi berupa definisi atau serupa tanya jawab, mengunakan tag dl, dt, dan dd. Beberapa pemakaian elemen tersebut sempat saya coba di halaman Semantic XHTML Format Reference (Dani Iswara .com).

Catatan tidak penting ini juga dibuat untuk menjawab beberapa pertanyaan Pak Handoko Harry–pengelola side22.com, di tulisan berjudul Tag Unordered List <ul> untuk List <li> Pranala pada Menu. Saya tertarik mengomentari pertanyaan:

Kenapa anda menggunakan tag <ul> untuk daftar pranala atau 'link list' pada menu di bagian 'header'?

Jawaban berikutnya berdasarkan pengalaman mencoba pengaya Fangs–emulator 'screen reader'–di peramban Web Firefox.

Manfaat 'un/ordered list'

Manfaat penyusunan menu memakai model 'list' atau daftar, tentu akan menjadikan konten lebih mudah digunakan dan dipahami. Kembali ke kata sakti 'usable' dan aksesibel.

Bayangkan jika pranala berupa contoh menu berikut dibaca sebagai satu kalimat biasa. Akan terasa perbedaannya terutama oleh pengguna pembaca layar komputer atau 'screen reader'. Misal menu berikut:
Tentang Arsip Kontak Unduh Lisensi tanpa memakai nada penyela berupa karakter yang bisa dicetak/'print' sebagai penanda jeda/pemisah. Karakter tersebut umpamanya '|' atau dibaca 'vertical bar'. Pembaca layar komputer umumnya akan membaca menu tersebut sebagai:
Link Tentang Link Arsip Link Kontak Link Unduh Link Lisensi seperti kalimat biasa tanpa nada jeda. Terdengar tidak logis. Tidak mudah digunakan dan dipahami.

Hal yang sama terjadi pada penulisan pranala atau tautan bederet seperti:
Saya mengoptimalkan blog baru
dimana tiap kata ternyata memiliki pranala dengan alamat URL/URI berbeda:

• kata 'saya' menuju ke halaman depan atau laman situs Webnya,
• kata 'mengoptimalkan' mengarah ke tag 'optimasi',
• kata 'blog' berlabuh ke kategori 'blog',
• kata 'baru' dialamatkan ke tulisan/konten itu sendiri, sering juga disebut 'self linking'.

Jika pranala tersebut memakai garis bawah, mungkin akan relatif lebih mudah dikenali per kata. Bayangkan jika pranala itu tidak aksesibel.

Sebaliknya, dengan struktur pranala yang semantik dan aksesibel, pengguna berpeluang lebih mudah memahami konten. Kumpulan atau deretan pranala berurut atau tidak berurut disarankan disajikan dalam bentuk daftar. Atau setidaknya memakai karakter jeda. Hingga teknologi pembaca layar komputer dan alat bantu teknologi lainnya memahami bahwa itu suatu kumpulan pranala. Sesuai anjuran 'Web Content Accessibility Guidelines' versi 1.0 dulu.

Karena dengan memakai tag ol, ul dan li, akan terbaca atau terdengar lebih informatif dan deskriptif. Misalnya: List of five items bullet. Diikuti pembacaan kumpulan pranala seperti di atas. Saat mendengar kata 'List', pengguna sudah bisa memutuskan, apakah akan lanjut menelusuri membaca daftar tersebut atau tidak.

Sekadar tambahan. Bahkan menurut 'Illinois Center for Information Technology and Web Accessibility' atau iCITA:

Each ul or ol element that precedes the last h1 element and appears to be a navigation bar should be immediately preceded by a heading element, preferably an h2.
Sumber: Navigation Bar Overview.

Jika tidak memakai menu model daftar, tapi hanya sebaris teks biasa, mungkin akan terasa lebih 'usable' di layar kecil karena menghemar ruang vertikal.