Akordeon (Accordion) Nedir?
Akordeon (accordion), her biri tıklanınca altındaki içeriği açıp kapatan, alt alta dizilmiş başlıklardan oluşan arayüz bileşenidir; uzun sayfada kaydırmayı azaltır ve içeriği konu başlıklarına böler.
Diğer Adları: Accordion
Akordeon Nasıl Çalışır?
Akordeon iki parçadan oluşur: bölümün adını taşıyan başlık ve o başlığa bağlı içerik paneli. Başlık aynı zamanda paneli gösteren ya da gizleyen denetimdir. Kullanıcı başlığa tıkladığında ya da klavyeyle başlığa gelip Enter veya Boşluk tuşuna bastığında panel açılır; tasarıma göre aynı anda tek panel ya da birden fazla panel açık kalabilir.
Kapalı paneldeki metin sayfadan silinmez, yalnızca görünmez. Bu nedenle akordeon, okunması isteğe bağlı ayrıntıları toplamak için uygundur; ziyaretçinin mutlaka görmesi gereken bilgiyi (iade koşulu, teslim süresi gibi) kapalı bir panelin içine koymak, o bilginin gözden kaçmasına yol açabilir.
Akordeon Erişilebilir Biçimde Nasıl Kurulur?
W3C’nin ARIA yazım kılavuzundaki akordeon kalıbı şu kuralları verir:
- Başlık metni bir düğmenin içindedir ve düğme uygun düzeyde bir başlık öğesine sarılır.
- Düğmenin aria-expanded değeri panel açıkken true, kapalıyken false olur; düğme aria-controls ile panele bağlanır.
- Akordeondaki bütün odaklanabilir öğeler sayfanın normal Tab sırasında kalır.
- Panel kapatılamıyorsa açık başlığın aria-disabled değeri true yapılır.
Akordeonun E-Ticarette Kullanıldığı Yerler
Mobil kategori sayfasındaki filtre paneli, ürün sayfasındaki teknik özellik, bakım ve teslimat bilgileri ile sıkça sorulan sorular bölümleri akordeonun sık görüldüğü yerlerdir. Küçük ekranda her filtre grubunu ayrı başlık altında kapalı tutmak, ziyaretçinin ilgilendiği gruba hızla ulaşmasını sağlar.
Örnek: Bir ayakkabı mağazası mobil filtrede numara, renk ve fiyat gruplarını akordeonla sunar. Ziyaretçi numara başlığını açıp 42’yi seçer; diğer gruplar kapalı kaldığı için sonuçları gösteren düğme ekranda görünür kalır.
Akordeon ile Sekmeli İçerik Farkı
Akordeonda paneller başlıklarla birlikte alt alta durur ve birden fazlası açık olabilir. Sekmeli içerikte ise başlıklar yan yana bir sekme listesinde durur ve aynı anda tek panel görünür. Dar ekranda yatay sekme listesi sığmayabildiği için aynı içerik mobilde akordeonla, masaüstünde sekmelerle sunulabilir; iki durumda da içerik ve sıra aynı kalır.
Akordeon (Accordion) Hakkında Sık Sorulan Sorular
Akordeonda aynı anda birden fazla panel açık olabilir mi?
Olabilir; bu bir tasarım kararıdır. Yalnızca tek panelin açık kalması isteniyorsa bir panel açıldığında diğerleri kapanır.
Akordeon klavyeyle nasıl kullanılır?
Tab tuşuyla başlık düğmesine gelinir, Enter ya da Boşluk tuşuyla panel açılır veya kapanır. Akordeondaki öğeler sayfanın normal Tab sırasında kalır.