Accordion

Rol ve anlam

Accordion, APG akordeon kalıbını Base UI Accordion ile uygular. Her öğenin başlığı bir <hN> öğesidir (headingLevel, varsayılan 3) ve içinde aria-expanded ile aria-controls taşıyan bir <button> bulunur. Panel, düğmeyle adlandırılmış bir region öğesidir. Düğmenin adı görünen metninden gelir: önce title, sonra varsa description; böylece görünen metin ile ad aynıdır (WCAG 2.5.3). Ok ve ikon aria-hidden olduğu için okunmaz. Kapalı paneller hidden="until-found" taşır; tarayıcının sayfada bulma özelliği içeriği bulur ve öğeyi açar.

Klavye

Tuş	Davranış
Tab	Başlık düğmeleri arasında sırayla ilerler.
Enter, Space	Odaktaki öğeyi açar ya da kapatır.

Ok tuşlarıyla gezinme yoktur. APG akordeon kalıbı (2025 güncellemesi) ok tuşlarını isteğe bağlı sayar; Accordion bunları kullanmaz.

Odak

Düğmede 2 px color-focus-ring halkası içe çizilir; komşu öğeler halkayı kırpmaz. Halka yalnızca klavye odağında görünür (focus-visible).

Ekran okuyucu

Örnek	Okunan
Kapalı öğe	“Birinci başlık, düğme, daraltılmış”
Açık öğe	“Birinci başlık, düğme, genişletilmiş”
description taşıyan öğe	“Birinci başlık, düğme, daraltılmış, Kısa açıklama metni”
disabled öğe	“Üçüncü başlık, düğme, soluk”
Panele girince	“Birinci başlık, bölge”

Kontrast

Başlık ve panel metni zeminlerinde en az 4,5:1 kontrast taşır (color-fg-default); açıklama color-fg-subtle ile aynı eşiği karşılar. Açık durum yalnız renkle gösterilmez: ok döner ve içerik görünür. Devre dışı metin kontrast eşiğinden muaftır (WCAG 1.4.3).

WCAG 2.2

Ölçüt	Accordion nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Başlık, düğme ve region rolleri; aria-controls ve panelin aria-labelledby bağı.	Sayfanın başlık sırasına uygun headingLevel verin.
1.4.1 Renk kullanımı	Açık durum okun dönüşüyle ve görünen içerikle de belli olur.	Oku className ile gizlemeyin.
2.1.1 Klavye	Tab, Enter ve Space.	Düğmelere kendi tuş işleyicinizi eklemeyin.
2.4.7 Görünür odak	focus-visible halkası.	Halkayı kaldırmayın.
2.5.8 Hedef boyutu (asgari)	En küçük başlık düğmesi 40 px yüksekliktedir.	Başlıkları boş bırakmayın.
4.1.2 Ad, rol, değer	Ad title’dan, durum aria-expanded’dan gelir.	Her öğeye anlamlı bir title verin.