SSS ve ayrıntı alanlarında akordeon en çok kullanılan bileşendir. Doğru yapıldığında klavye ile gezilir, ekran okuyucular durumu anlar. Önce canlı sonucu gör, sonra kodu incele.
<div class="acc">
<h3><button aria-expanded="true" aria-controls="p1">Teslimat ne kadar sürer?</button></h3>
<div id="p1" class="panel open"><p>Hazır temalar anında, özel tasarımlar 5–15 iş günü içinde teslim edilir.</p></div>
<h3><button aria-expanded="false" aria-controls="p2">Kaynak kodlar dahil mi?</button></h3>
<div id="p2" class="panel"><p>Evet. Tüm dosyalar düzenlenebilir ve yorum satırlarıyla açıklanmıştır.</p></div>
<h3><button aria-expanded="false" aria-controls="p3">Destek veriyor musunuz?</button></h3>
<div id="p3" class="panel"><p>Satın alma sonrası destek talebi açarak bize ulaşabilirsin.</p></div>
</div>body{margin:0;padding:24px;background:#f1f5f9;font-family:system-ui,sans-serif}
.acc{max-width:480px;margin:auto;background:#fff;border-radius:18px;padding:8px;box-shadow:0 18px 40px -22px rgba(15,23,42,.45)}
h3{margin:0}
button{width:100%;text-align:left;padding:16px 18px;border:0;background:none;font:600 15px system-ui;color:#0f172a;cursor:pointer;display:flex;justify-content:space-between;border-radius:12px}
button:hover{background:#eef2ff}button:focus-visible{outline:3px solid #818cf8}
button::after{content:"+";font-size:20px;line-height:1;transition:transform .25s}
button[aria-expanded=true]::after{transform:rotate(45deg)}
.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.panel.open{grid-template-rows:1fr}
.panel p{overflow:hidden;margin:0;padding:0 18px;color:#475569;line-height:1.6}
.panel.open p{padding-bottom:16px}document.querySelectorAll('.acc button').forEach((btn) => {
btn.addEventListener('click', () => {
const open = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', String(!open));
document.getElementById(btn.getAttribute('aria-controls')).classList.toggle('open', !open);
});
});Dikkat edilen noktalar
- Başlıklar gerçek
<button>elemanı; böylece Tab ve Enter/Boşluk tuşları ücretsiz çalışır. aria-expandedvearia-controlsdurumu ekran okuyuculara bildirir.- Yükseklik animasyonu için
grid-template-rows: 0fr → 1frhilesi kullanıldı; sabit yükseklik gerektirmez.
Yazıdaki yapıyı SSS şemasıyla (FAQPage JSON-LD) birleştirirsen arama sonuçlarında zengin snippet kazanma şansın artar:
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "Teslimat ne kadar sürer?",
"acceptedAnswer": { "@type": "Answer", "text": "Hazır temalar anında teslim edilir." }
}]
}
