Hal Baru yang Perlu Diketahui Tentang Daftar HTML yang Baik

Daftar HTML membosankan. Mereka tidak do banyak, jadi kami tidak terlalu memikirkannya meskipun digunakan secara luas. Dan kami masih dapat melakukan hal yang sama yang selalu kami lakukan untuk menyesuaikannya, seperti menghapus penanda, membalikkan urutan, dan membuat penghitung khusus.

Namun, ada beberapa hal "baru" — termasuk bahaya — untuk diketahui saat menggunakan daftar. Bahayanya sebagian besar kecil, tetapi jauh lebih umum daripada yang Anda kira. Kami akan membahasnya, ditambah beberapa hal baru yang dapat kami lakukan dengan daftar, dan bahkan cara baru untuk mendekati solusi lama.

Untuk memperjelas, ini adalah elemen HTML yang sedang kita bicarakan:

• Daftar yang dipesan

• Daftar tidak berurutan

• Daftar deskripsi

• Daftar interaktif


Daftar terurut, daftar tak terurut, dan daftar interaktif berisi item daftar (

) yang ditampilkan sesuai dengan jenis daftar yang sedang kita hadapi. Daftar urutan (

) menampilkan angka di sebelah item daftar. Daftar tak berurut (

) dan elemen menu (

) menampilkan poin-poin di sebelah item daftar. Kami menyebutnya "penanda daftar" dan mereka bahkan bisa ditata menggunakan :: penanda elemen semu. Daftar deskripsi menggunakan istilah deskripsi (

) dan detail deskripsi (

) alih-alih

dan tidak memiliki penanda daftar. Mereka seharusnya digunakan untuk menampilkan metadata dan glosarium, tetapi saya tidak bisa mengatakan bahwa saya pernah melihatnya di alam liar.

Mari kita mulai dengan hal yang mudah — cara mengatur ulang gaya daftar dengan benar (setidaknya menurut saya). Setelah itu, kita akan melihat beberapa masalah aksesibilitas sebelum menyoroti yang sulit dipahami

elemen, yang mungkin membuat Anda terkejut saat mempelajarinya… sebenarnya adalah sejenis daftar juga!

Menyetel ulang gaya daftar

Peramban secara otomatis menerapkan gaya Agen Pengguna mereka sendiri untuk membantu dengan struktur visual daftar secara langsung. Itu bagus sekali! Namun jika kita ingin memulai dengan lembaran kosong yang bebas dari opini gaya, maka kita harus mengatur ulang gaya tersebut terlebih dahulu.

Misalnya, kita dapat menghapus penanda di sebelah daftar item dengan cukup mudah. Tidak ada yang baru di sini:

/* Zap all list markers! */
ol, ul, menu {
  list-style: none;
}

Tetapi CSS modern memiliki cara baru untuk membantu kami menargetkan contoh daftar tertentu. Katakanlah kita ingin menghapus penanda dari semua daftar, kecuali jika daftar itu muncul konten bentuk panjang, seperti artikel. Jika kita menggabungkan kekuatan fungsi pseudo-class CSS yang lebih baru :where() dan :not(), kita dapat mengisolasi instance tersebut dan mengizinkan penanda dalam kasus tersebut:

/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
  list-style: none;
}

Mengapa menggunakan :where() alih-alih :is()? Kekhususan dari :where() selalu nol, sedangkan :is() mengambil kekhususan elemen paling spesifik dalam daftar pemilihnya. Jadi, menggunakan :where() adalah cara yang tidak terlalu kuat untuk mengesampingkan hal-hal dan dapat dengan mudah ditimpa dengan sendirinya.

Gaya UA juga menerapkan pengisi untuk memisahkan konten item daftar dari penandanya. Sekali lagi, itu adalah kemampuan yang cukup bagus di luar kotak dalam beberapa kasus, tetapi jika kita sudah menghapus penanda daftar seperti yang kita lakukan di atas, maka kita juga dapat menghapus padding itu juga. Ini adalah kasus lain untuk :where():

:where(ol, ul, menu) {
  padding-left: 0; /* or padding-inline-start */
}

Oke, itu akan mencegah item daftar tanpa penanda muncul mengambang di angkasa. Tapi kami seperti membuang bayi dengan air mandi dan melepas bantalan dalam semua kasus, termasuk yang sebelumnya kami isolasi di

. Jadi, sekarang daftar dengan penanda agak menggantung di tepi kotak konten.

Perhatikan bahwa gaya UA menerapkan tambahan 40px ke

elemen.

Jadi yang ingin kita lakukan adalah mencegah penanda daftar "menggantung" di luar wadah. Kita dapat memperbaikinya dengan list-style-position milik:

Atau tidak… mungkin karena preferensi gaya?

Kekhawatiran aksesibilitas yang lebih baru dengan daftar

Sayangnya, ada beberapa masalah aksesibilitas terkait daftar — bahkan di zaman yang lebih modern ini. Salah satu perhatian adalah hasil dari penerapan list-style: none; seperti yang kami lakukan saat menyetel ulang gaya UA.

Singkatnya, Safari tidak baca daftar terurut dan tidak terurut ditata dengan list-style: none sebagai daftar aktual, seperti saat menavigasi konten dengan pembaca layar. Dengan kata lain, menghapus penanda juga menghilangkan makna semantik daftar. Itu perbaiki untuk perbaikan ini untuk menerapkan sebuah ARIA list peran dalam daftar dan a listitem peran ke item daftar jadi pembaca layar akan mengambilnya:

  
...
  
...
  
...



  
...
  
...
  
...

Anehnya, Safari menganggap ini sebagai fitur bukannya bug. Pada dasarnya, pengguna akan melaporkan bahwa pembaca layar mengumumkan terlalu banyak daftar (karena pengembang cenderung menggunakannya secara berlebihan), jadi sekarang, hanya mereka yang memiliki role="list" diumumkan oleh pembaca layar, yang sebenarnya tidak terlalu aneh. Scott O'Hara memiliki ikhtisar rinci tentang bagaimana semuanya turun.

Masalah aksesibilitas kedua bukanlah buatan kami sendiri (hore!). Jadi, Anda tahu caranya Anda seharusnya menambahkan aria-label untuk

elemen tanpa judul? Yah, terkadang masuk akal untuk melakukan hal yang sama dengan daftar yang tidak mengandung elemen judul yang membantu mendeskripsikan daftar.

  
Grocery list
  

     
  




  

Anda benar-benar tidak harus menggunakan salah satu cara. Menggunakan tajuk atau label ARIA hanyalah konteks tambahan, bukan keharusan — pastikan untuk menguji situs web Anda dengan pembaca layar dan melakukan apa yang menawarkan pengalaman pengguna terbaik untuk situasi tersebut.

Dalam berita yang agak terkait, Eric Bailey menulis artikel yang sangat bagus mengapa dan bagaimana dia menganggap aria-label menjadi bau kode.

Tunggu,

daftar juga?

OK, jadi, Anda mungkin bertanya-tanya tentang semua itu

elemen yang telah saya selipkan ke dalam contoh kode. Ini sebenarnya sangat sederhana; menu adalah daftar yang tidak diurutkan kecuali bahwa itu dimaksudkan untuk item interaktif. Mereka bahkan diekspos ke pohon aksesibilitas sebagai daftar yang tidak diurutkan.

Pada hari-hari awal web semantik, saya secara keliru percaya bahwa menu itu seperti

s sebelum percaya bahwa itu untuk menu konteks (atau "bilah alat" sebagai spesifikasi mengatakan) karena itulah yang dikatakan versi awal spesifikasi HTML. (MDN memiliki tulisan yang menarik pada semua hal usang terkait dengan

jika Anda sama sekali tertarik.)

Namun hari ini, ini adalah cara semantik untuk menggunakan menu:

  
Email
  
Twitter
  
Facebook

Secara pribadi, saya pikir ada beberapa kasus penggunaan yang bagus untuk

. Contoh terakhir menunjukkan daftar tombol berbagi sosial yang dibungkus dengan label

elemen, aspek penting adalah bahwa label "Artikel Bagikan" menyumbangkan sejumlah besar konteks yang membantu menjelaskan apa yang dilakukan tombol.

Apakah menu mutlak diperlukan? Tidak. Apakah mereka Penanda HTML? Tentu saja tidak. Tapi mereka ada jika Anda menikmati lebih sedikit

s dan Anda merasa komponen tersebut dapat menggunakan an aria-label untuk konteks tambahan.

Ada yang lain?

Ya, ada juga yang disebutkan di atas

elemen (daftar deskripsi), bagaimanapun, MDN tampaknya tidak menganggapnya sebagai daftar dengan cara yang sama — ini adalah daftar grup yang berisi istilah — dan saya tidak bisa mengatakan bahwa saya benar-benar melihatnya digunakan. Menurut MDN, mereka seharusnya digunakan untuk metadata, glosarium, dan jenis pasangan nilai kunci lainnya. Saya hanya akan menghindarinya dengan alasan semua pembaca layar mengumumkannya secara berbeda.

Tapi jangan mengakhiri semuanya dengan catatan negatif. Berikut daftar hal-hal keren yang dapat Anda lakukan dengan daftar: