Pemakaian Unordered List pada Menu

Noted: Wednesday, May 12, 2010 at 05:48:40. Words count: 490.
Last updated: Sunday, November 12, 2017 at 21:50:33.

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.

Dani Iswara, [myfirstnamelastname]@gmail.com.

6 comments to "Pemakaian Unordered List pada Menu"

  1. agung

    Mas Dani,
    Menyambung komentar saya tentang No. yang tidak muncul penuh pada halaman Archives, kali ini masih dengan peramban dikantor IE (saya tidak egois untuk menggunkan peramban ini)
    Untuk halaman ini paragraf 1 dan 2 huruf pertama nampak semua tapi pada paragraf berikutnya satu huruf pertama tertutup bahkan ada 2 huruf yang menghilang, Apakah masih editing themes ya?

  2. dani

    agung,
    [OOT] saya sudah melupakan dukungan untuk MSIE 6 dari dulu. :)

  3. Anis Fahrunisa

    Wah lucu juga ya kalo baca menu seperti itu. Mungkin butuh “ilmu sihir” untuk mehaminya. hehe…

    Saya pernah baca salah satu artikel tentang list ini (tapi saya lupa lagi alamatnya) bahwa ol lebih semantis dibanding ul, karena menurutnya lebih logis. Saya memang sedikit bingung karena tidak semua urutan bersifat logis, dalam arti bahwa yang disimpan pada urutan pertama lebih penting dari yang kedua dst. Itulah mungkin kenapa ada ul.

    Ada beberapa pertanyaan yang ingin saya ajukan pada Mas Dani dalam kaitannya dengan penggunaan list ini. (Mohon maaf apabila terdengar sangat newbie) :)

    Apakah urutan logis mesti menggunakan ol? Begitupun sebaliknya, apakah urutan tidak logis harus selalu menggunakan ul?

    Kalau dari segi aksesibilitas, apakah ada perbedaan antara keduanya?

    List-type mana yang paling direkomendasikan; decimal, circle, square, none, dst…? Bagaimana dengan penggunaan image untuk list-type?

    (Maaf apabila pertanyaan di atas tidak saya urutkan dengan list). Terima kasih atas jawabannya, Mas Dan. :)

    Salam.

  4. dani

    Anis Fahrunisa,
    mengenai makna semantik ol dan ul, saya setuju ol lebih semantik. Untuk sebuah menu dan navigasi pun urutannya sering kita tentukan sendiri. Jarang yang memakai urutan 'Unduh Lisensi Tentang Kontak Arsip'.
    Menu dengan ol–tanpa melenyapkan urutan angka yang muncul–lebih mudah untuk digunakan saat dirujuk (usable).
    Tapi, nyatanya, demi alasan estetika, urutan angka sering dilenyapkan via CSS. Hemat saya, jika tidak berhubungan/terikat dengan jumlah, cukup memakai unordered list. Jadi, lebih ke kemudahan pakai sesuai konteks.

    Mengenai list-type, silakan ditulis sendiri di blog Mas Anis. :D

  5. ardianzzz

    heheh.. jadi teringat saat membuat laporan karya tulis ilmiah. Penggunaan bullet (unordered list) dilarang..
    “Pokoknya harus menggunakan ‘numbering’ (ordered list)”
    begitu kata sang asisten…

    maaf OOT, sekali-sekali bolehlah :)

  6. Toekangweb » 50 Tutorial CSS/XHTML dalam Bahasa Indonesia

    […] Pemakaian Unordered List pada Menu […]