Banyak obrolan di sekitar yang lama <details>
dan <summary>
elemen akhir-akhir ini! saya melihat Lea Verou baru-baru ini men-tweet sebuah observasi tentang elemen display
perilaku dan itu agak terpecah menjadi lebih banyak pengamatan dan catatan penggunaan dari orang-orang, termasuk a diskusi yang dihidupkan kembali Apakah <summary>
harus diizinkan mengandung elemen interaktif atau tidak.
Ada banyak titik untuk dihubungkan dan saya akan melakukan yang terbaik di sini untuk melakukan hal itu.
<details>
elemen?
Bisakah kita mengubah tampilan elemen yang bersarang di Sangat aneh! Jika kami membuka DevTools, lembar gaya agen pengguna memberi tahu kami <details>
adalah ditampilkan sebagai elemen blok.
Perhatikan yang diperlukan <summary>
elemen dan dua tambahan <div>
ada di sana. Kita bisa menimpa display
bukan?
Apa yang mungkin kita harapkan adalah itu <details>
sekarang memiliki tinggi eksplisit 40vh
dan tiga baris di mana baris ketiga mengambil sisa ruang yang tersisa dari dua baris pertama. Seperti ini:
Ugh, tapi baris ketiga tidak… melakukan… itu.
Rupanya yang kita hadapi adalah wadah kisi yang tidak dapat menerapkan perilaku kisi ke item kisinya. Tetapi spesifikasi HTML memberi tahu kami:
Grafik
details
elemen adalah diharapkan untuk dirender sebagai kotak blok. Elemen tersebut juga diharapkan memiliki internal pohon bayangan dengan dua slot.(Tekankan milikku)
Dan beberapa saat kemudian:
Grafik
details
elemen kedua celah diharapkan memilikistyle
atribut disetel ke “display: block; content-visibility: hidden;
" ketikadetails
elemen tidak memilikiopen
atribut. Ketika itu memilikiopen
atribut, itustyle
atribut diharapkan akan dihapus dari yang kedua celah.(Tekankan milikku, sekali lagi)
Jadi, spesifikasi mengatakan slot kedua — dua tambahan <div>
s dari contoh — hanya dipaksa menjadi elemen blok ketika <details>
ditutup. Ketika terbuka- <details open>
— mereka harus sesuai dengan tampilan kisi yang menggantikan gaya agen pengguna… benar?
Itulah perdebatan. Saya mengerti itu slots
diatur ke display: contents
secara default, tetapi memasukkan elemen bersarang ke dalam slot dan menghapus kemampuan untuk menatanya tampaknya tidak aktif. Apakah ini masalah spesifikasi bahwa isinya adalah slot, atau masalah browser yang tidak dapat kami atasi display
meskipun mereka berada di pohon kotak? Orang yang lebih pintar dapat mencerahkan saya tetapi sepertinya implementasi yang salah.
<details>
wadah atau elemen interaktif?
Is Banyak orang menggunakan <details>
untuk beralih menu terbuka dan tertutup. Ini adalah praktik dipopulerkan oleh GitHub.
Tampaknya masuk akal. Spesifikasi pasti memungkinkannya:
Grafik
details
elemen merupakan widget pengungkapan tempat pengguna dapat memperoleh informasi tambahan atau kontrol.(Tekankan milikku)
Baiklah, jadi kita mungkin mengharapkan itu <details>
adalah wadahnya (memiliki implisit role=group
) Dan <summary>
adalah elemen interaktif yang mengatur wadah open
negara. Masuk akal karena <summary>
memiliki implikasi button
peran dalam beberapa konteks (tetapi tidak ada peran WAI-ARIA yang sesuai).
Tapi Melanie Sumner melakukan penggalian yang tampaknya tidak hanya bertentangan dengan itu, tetapi mengarah pada kesimpulan bahwa menggunakan <details>
sebagai menu mungkin bukan yang terbaik. Lihat apa yang terjadi ketika <details>
diberikan tanpa <summary>
elemen:
Ia melakukan persis seperti yang disarankan oleh spesifikasi ketika tidak ada <summary>
- itu membuat sendiri:
Pertama
summary
anak elemen dari elemen, jika ada, merupakan ringkasan atau legenda detail. Jika tidak ada anaksummary
elemen, agen pengguna harus memberikan legendanya sendiri (misalnya "Rincian").(Tekankan milikku)
Melanie menjalankannya melalui validator HTML dan — kejutan! — itu tidak valid:
Jadi, <details>
membutuhkan <summary>
. Dan kapan <summary>
hilang, <details>
membuatnya sendiri, meskipun itu disampaikan sebagai markup yang tidak valid. Semuanya keren dan valid ketika <summary>
disana:
Semuanya mengarah ke pertanyaan baru: kenapa <summary>
diberikan implisit button
peran kapan <details>
apa yang tampak sebagai elemen interaktif? Mungkin ini adalah kasus lain di mana implementasi browser salah? Kemudian lagi, spesifikasinya mengkategorikan keduanya sebagai elemen interaktif. Anda dapat melihat betapa membingungkannya semua ini.
Bagaimanapun, kesimpulan akhir Melanie yang harus kita hindari menggunakan <details>
untuk menu didasarkan pada bagaimana teknologi bantu membaca dan mengumumkan <details>
yang mengandung unsur interaktif. Elemen diumumkan, tetapi tidak disebutkan tentang kontrol interaktif di luar itu sampai Anda, eh, berinteraksi dengan <details>
. Hanya dengan begitu sesuatu seperti daftar tautan akan diumumkan.
Selain itu, konten di dalam runtuh <details>
dikecualikan dari pencarian dalam halaman (kecuali di browser Chromium, yang dapat mengakses konten yang diciutkan pada saat penulisan), membuat segalanya semakin sulit ditemukan.
<summary>
izinkan elemen interaktif?
Harus Itulah pertanyaan yang diajukan dalam utas terbuka ini. Idenya adalah bahwa sesuatu seperti ini tidak valid:
<details>
<summary><a href="...">Link element</a></summary>
</details>
<!-- or -->
<details>
<summary><input></summary>
</details>
Scott O'Hara menyimpulkan dengan baik mengapa ini menjadi masalah?:
Tautan tidak dapat ditemukan sama sekali ke JAWS saat menavigasi dengan kursor virtualnya. Jika menavigasi ke elemen ringkasan melalui tombol Tab, JAWS mengumumkan "contoh teks, tombol" sebagai nama dan peran elemen. Jika menekan tombol Tab lagi, JAWS kembali mengumumkan "contoh teks, tombol" meskipun fokus keyboard ada di tautan.
[...]
Ada lebih banyak yang bisa saya lanjutkan dengan berbagai masalah yang dimiliki AT berbeda dengan model konten untuk ringkasan ... tetapi itu hanya akan memperluas komentar ini melampaui apa yang diperlukan. tldr; model konten ringkasan menghasilkan pengalaman yang sangat tidak konsisten dan terkadang hanya datar untuk orang yang menggunakan AT.
Scott membuka tiket untuk memperbaiki perilaku ini di Khrom dan WebKit. Terima kasih, Scott!
Namun, ini adalah HTML yang valid:
Scott melangkah lebih jauh dalam terpisah posting blog. Misalnya, dia menjelaskan bagaimana menampar role=button
on <summary>
mungkin tampak seperti perbaikan yang masuk akal untuk memastikannya diumumkan secara konsisten oleh teknologi bantu. Itu juga akan menyelesaikan perdebatan tentang apakah— <summary>
harus memungkinkan elemen interaktif karena tombol tidak boleh berisi elemen interaktif. Satu-satunya masalah adalah Safari kemudian memperlakukan <summary>
sebagai tombol standar, yang kehilangannya expanded
dan collapsed
negara bagian. Jadi, peran yang benar diumumkan, tetapi sekarang statusnya tidak.
Kemana kita pergi sekarang?
Apakah Anda takut untuk menggunakan? <details>
/<summary>
dengan semua masalah dan inkonsistensi ini? Saya yakin, tetapi hanya untuk memastikan bahwa apa yang ada di dalamnya memberikan pengalaman dan harapan yang tepat bagi pengguna.
Saya senang percakapan ini terjadi dan terjadi di tempat terbuka. Karena itu, Anda dapat mengomentari tiga solusi yang diusulkan Scott tentang bagaimana model konten untuk <summary>
ditentukan, upvote tiketnya, dan laporkan masalah Anda sendiri dan kasus penggunaan saat Anda melakukannya. Mudah-mudahan, semakin baik kita memahami bagaimana elemen digunakan dan apa yang kita harapkan dari mereka, semakin baik penerapannya.