M.AIM.AISoloLabsUI Sözlüğü · İçerik ve yerleşim

← UI Sözlüğü

Akordeon accordion

bilinen diğer adları accordion · katlanır bölüm · disclosure · SSS bölümü

Böyle diyorsan: "tıklayınca açılan sorular" · "SSS'deki açılır kapanır şey" → bunun adı akordeon.

Tıklayınca açılıp kapanan dikey başlık listesi; SSS'nin doğal evi.

Akordeon, başlıklara tıklayarak açılıp kapanan bölümler dizisidir. En büyük avantajı yerleşik desteğidir: <details> ve <summary> elementleri açılıp kapanmayı, klavye desteğini ve ekran okuyucu bildirimini hazır verir; üstelik aynı name değerini paylaşan <details> öğeleri kendiliğinden 'tek seferde biri açık' davranışı gösterir. Yani bu parçanın doğru sürümü çoğu zaman yazılması EN KOLAY sürümüdür. Asıl tasarım sorusu ise şudur: içerik gerçekten katlanmayı hak ediyor mu? Kullanıcının okuması beklenen bilgiyi katlamak, onu ekranda temiz gösterip fiilen görünmez kılar — sıkça sorulan sorular buna uygundur, ürünün ana anlatısı değildir.

Kapsam: Bu madde katlanır içerik bölümlerini kapsar. Aynı anda yalnız birinin görüldüğü, eş düzeyli içerikler arasında geçiş Sekmeler maddesindedir; tek bir gizli paneli açan düğme ise Hamburger'in de dayandığı disclosure kalıbıdır.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
Kargo ne zaman gelir? ▾
1-3 iş günü içinde.
İade var mı? ▾
14 gün içinde koşulsuz.
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
SSS'yi akordeon yap: native details/summary ile (aynı name grubu = tek soru açık bedavaya); başlığın tamamı tıklanabilir, ok açıkken dönsün; panel yumuşak açılsın (grid-template-rows tekniği); açılan soru URL çapasıyla paylaşılabilsin (#soru-3 ile gelen ziyaretçide o soru açık gelsin).
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Akordeonum huysuz; klasikleri sırayla ele: (1) details yerine div+onClick — klavye ve okuyucu desteği sıfır; (2) height:auto'ya animasyon verilmiş, çalışmıyor (max-height ya da grid-rows tekniği gerekli); (3) ok dönmüyor, hangi soru açık belirsiz; (4) tek-açık kuralı elle yazılmış ve state karışmış (native name dururken); (5) link ile gelen kullanıcı için soru açılmıyor (URL çapası bağlanmamış); (6) içerik açılınca sayfa aşağı zıplıyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Başlık satırı<summary> / button

    Tıklanabilir soru; TAMAMI tıklanabilir olmalı, sadece ok değil.

  • 2Ok göstergesi▾ dönüşü

    Açık/kapalı durumunun görsel dili; açıkken 180° döner.

  • 3Paneliçerik alanı

    Açılan cevap; yükseklik animasyonu için max-height/grid tekniği gerekir (height:auto animlanmaz).

  • 4Tek-açık kuralıname grubu

    SSS'de yeni soru açılınca öncekinin kapanması; native details'te name atrribütü bunu BEDAVA verir.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • AKapalıaria-expanded="false"

    Başlık görünür, içerik gizli. Başlığın tıklanabilir olduğu anlaşılmalı: ok işareti ya da imleç değişimi olmadan kullanıcı orada bir şey olduğunu bilmez.

  • BAçıkaria-expanded="true"

    İçerik görünür. Ok ya da artı işareti dönerek durumu anlatır; ama görsel dönüş aria-expanded'ın yerine geçmez.

  • CTek açık<details name="grup">

    Biri açılınca diğeri kapanır. Yerleşik elemanla bu davranış tek öznitelikle gelir; elle yazmaya gerek yok.

  • DHepsi açıkçoklu açık

    Karşılaştırma gerekiyorsa serbest bırak. 'Tümünü aç' düğmesi uzun listelerde tarama ve sayfa içi arama için değerlidir.

  • EDerin bağlantıhash ile açılma

    Bir bölüme doğrudan link verildiyse o bölüm açık gelmeli ve görünür alana kaydırılmalı; kapalı gelen hedef, kullanıcıya boş sayfa gösterir.

KODDAKİ ADLARI
HTML<details name=grup> + <summary>tek-açık BEDAVA
CSSgrid-template-rows: 0fr→1fryükseklik animasyonu
ARIAaria-expanded (custom'da)durum bildirimi
ERİŞİLEBİLİRLİK & SIK HATA
  • Önce <details> + <summary> dene: klavye, durum bildirimi ve tarayıcı içi arama desteği hazır gelir. Kendi akordeonunu yazarsan bunların hepsini üstlenirsin.
  • Başlık gerçek bir düğme olsun ve aria-expanded taşısın; div'e onclick koymak klavye kullanıcısını dışarıda bırakır.
  • Başlık metni bölümün içeriğini anlatsın; 'Detaylar' diye altı başlık, bağlantı ve başlık listesine bakan kullanıcı için bilgi taşımaz (WCAG 2.4.6).
  • Tarayıcının sayfa içi araması kapalı bölümleri bulamaz. Kritik bilgiyi katlarsan kullanıcı Ctrl+F ile arayamaz — bu, katlamanın görünmeyen bedelidir.
  • Yükseklik animasyonu prefers-reduced-motion açıkken sadeleşsin.
SIK KARIŞTIRILANLAR

Sekmelerden farkı. Akordeonda birden çok bölüm AYNI ANDA açık olabilir; sekmelerde yalnız biri görünür. Karşılaştırma gerekiyorsa akordeon üstündür. Bir de yön farkı vardır: sekmeler yatay yer ister ve mobilde sıkışır, akordeon dikeyde rahat çalışır — bu yüzden aynı içerik masaüstünde sekme, mobilde akordeon olarak sunulabilir.

Sekmeler sayfasına git →

İpucu balonundan farkı. Akordeon içeriği KALICIDIR: açılır, açık kalır, kopyalanabilir, yazdırılabilir. İpucu balonu geçicidir ve fare çekilince kaybolur. Okunması ve saklanması gereken bir açıklamayı ipucuna koymak, kullanıcıyı onu her seferinde yeniden yakalamaya zorlar.

İpucu balonu sayfasına git →

KAYNAKLAR
Bu parçayı 12 ayrı stilde gör. Tam sayfa stil örneklerindeki landing bu parçadan da kurulu; stilin parçayı nasıl giydirdiğini yan yana karşılaştırabilirsin — stil parçayı değiştirmez, giydirir.

Tam sayfa örneğini aç →üstteki şeritten stil atlayabilirsin

İLGİLİ PARÇALAR

Sekmeler tabsİpucu balonu tooltipKart cardAyraç divider

AYNI AİLEDE · İÇERIK VE YERLEŞIM