Masaüstünde Akordeon: Ne Zaman İşe Yarar, Ne Zaman Zarar Verir

Akordeon, uzun sayfaları toparlamanın en kolay yolu olduğu için fazla kullanılıyor. Masaüstünde ekran alanı dar değil, dolayısıyla içeriği katlamanın bedeli mobildekinden yüksek: kullanıcı görmediği şeyi aramaz. Karar, alan kazancıyla keşfedilebilirlik kaybı arasında.

Akordeon neyi çözer

Akordeon tek bir işi iyi yapar: aynı düzeyde, birbirinin alternatifi olan ve kullanıcının hepsini değil birkaçını okuyacağı içerik bloklarını yan yana listeler. Kargo koşulları, iade süreci, teknik özellikler tablosu. Kullanıcı hangisini istediğini başlığa bakarak biliyorsa katlamak doğru karardır.

Sayfadaki bilgilerin hepsi aynı ölçüde önemliyse akordeona hiç bağlamam. Orada katlama, okuma sırasını kullanıcıya devretmek değil, sayfayı tasarlamaktan kaçınmaktır.

Sayfa hızı iddiası tutmuyor

Akordeonun sayfayı hızlandırdığı sık tekrarlanır. Bu, standart uygulamada yanlıştır. Kapalı panellerin içeriği belgede zaten vardır, sunucudan indirilir, ayrıştırılır ve DOM'a girer. Yalnızca ekrana çizilmez. İndirilen bayt sayısı değişmez, hatta her panele eklenen düğme ve durum yönetimi biraz büyütür.

Yükü gerçekten azaltan tek yaklaşım, panel içeriğini açılışta getirmektir. O da bedava değil: kullanıcı başlığa tıkladıktan sonra bir ağ gecikmesi bekler, iskelet gösterirsiniz, hata durumunu ayrıca ele almanız gerekir. On paneli tembel yüklemek istiyorsanız on ayrı istek ve on ayrı hata yolu demektir. Sayfanın ilk yükü kritik bir eşiğin üzerindeyse buna değer, değilse boşuna karmaşadır.

Görseller ayrı bir konu. display:none içindeki <img> etiketleri tarayıcıların çoğunda yine indirilir; CSS arka plan görselleri indirilmez. Yani panelleri kapatarak görsel trafiğini kestiğinizi sanıyorsanız ağ sekmesine bakın.

Katlanan içerik sayfa içinde aranamaz

Masaüstü kullanıcısının en sık kullandığı arama aracı Ctrl+F'tir. Kapalı bir panelin metni bu aramada bulunmaz. Kullanıcı aradığı kelimenin sayfada olmadığı sonucuna varır ve çıkar. Bu, akordeonun en somut maliyeti ve tartışmalarda en az konuşulanı.

Tarayıcı tarafında kısmi bir çözüm var: hidden="until-found" ile işaretlenmiş içerik sayfa içi aramada bulunur ve panel otomatik açılır. Destek her yerde değil, o yüzden buna tek başına güvenmeyin; SSS gibi arama yapılacağı belli sayfalarda ise kullanmaya değer.

Klavye ve ekran okuyucu için asgari yapı

Akordeon başlığı bir düğmedir. div üstüne tıklama olayı bağlamak klavyeyle erişimi bitirir, sekme sırasından düşer, boşluk ve enter çalışmaz.

<h3> <button aria-expanded="false" aria-controls="panel-1">Kargo ve teslimat</button> </h3> <div id="panel-1" hidden>...</div>

Üç kural yeterli: durum aria-expanded ile bildirilir, panel kapalıyken hidden ya da display:none ile yapısal olarak gizlenir, başlığın tamamı tıklanabilir olur. Yalnızca oku tıklanabilir yapmak, hedef alanını beş kat küçültmekten başka bir işe yaramaz. Bunu üç satırla çözersiniz, üçüncü parti bir bileşen kütüphanesine gerek yok.

Tek panel mi, çoklu panel mi

Bir panel açılınca diğerinin kapanması yaygın ama çoğu durumda yanlış. Kullanıcı iki hizmetin koşullarını karşılaştırmak istediğinde bu davranış onu tıklayıp geri gelmeye zorlar, ikinci paneli okurken birincinin ne dediğini hatırlaması gerekir. Bilişsel yükü sayfa değil kullanıcı taşır.

Varsayılan çoklu açılma olmalı. Tek panel kısıtı yalnızca paneller gerçekten birbirini dışlıyorsa, örneğin bir ödeme yöntemi seçimiyse anlamlı. "Tümünü aç" düğmesi ise ucuz bir eklenti ve yazdırma, arama, tarama senaryolarının hepsini birden kurtarır.

Karar

Akordeonu bilgi mimarisi aracı olarak görün, alan kazanma aracı olarak değil. Başlıklar paneldeki içeriği tek başına özetleyemiyorsa akordeon zaten yanlış seçimdir; çünkü kullanıcı neyin arkasında ne olduğunu tahmin etmek zorunda kalır ve tahmin etmez, kaydırır.