Örnek HTML Yapısı:

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-1" id="button-1">
        Bölüm 1 Başlığı
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Bölüm 1 için içerik buraya gelir.</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-2" id="button-2">
        Bölüm 2 Başlığı
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Bölüm 2 için içerik buraya gelir.</p>
    </div>
  </div>
</div>

2. Dinamik İçerik için ARIA Nitelikleri

ARIA rolleri ve durumları, yardımcı teknolojileri akordiyonun davranışı hakkında bilgilendirmek için çok önemlidir.

• `role="button"`: İçeriği değiştiren etkileşimli öğede (düğme).
• `aria-expanded`: İçerik paneli görünür olduğunda `true` ve gizli olduğunda `false` olarak ayarlanır. Bu, durumu doğrudan ekran okuyuculara iletir.
• `aria-controls`: Düğme üzerinde, kontrol ettiği içerik panelinin `id`'sine referans verir. Bu, programatik bir bağlantı kurar.
• `aria-labelledby`: İçerik paneli üzerinde, onu kontrol eden düğmenin `id`'sine referans verir. Bu, çift yönlü bir bağlantı oluşturur.
• `role="region"`: İçerik paneli üzerinde. Bu, içeriğin sayfanın algılanabilir bir bölümü olduğunu belirtir.
• `aria-hidden`: Görünürlük durumlarını kontrol etmek için `aria-expanded` tercih edilse de, `aria-hidden="true"`, o anda görüntülenmeyen içerik panellerinin ekran okuyucular tarafından anons edilmesini önlemek için kullanılabilir. Ancak, içeriğin CSS (`display: none;`) aracılığıyla düzgün bir şekilde gizlendiğinden veya erişilebilirlik ağacından kaldırıldığından emin olmak daha sağlamdır.

`aria-hidden` ve `display: none` Üzerine Not: CSS'de `display: none;` kullanmak, öğeyi erişilebilirlik ağacından etkili bir şekilde kaldırır. JavaScript kullanarak içeriği `display: none;` olmadan dinamik olarak gösteriyor/gizliyorsanız, `aria-hidden` daha önemli hale gelir. Ancak, `display: none;` genellikle içerik panellerini gizlemek için tercih edilen yöntemdir.

3. Klavye ile İşletilebilirlik

Kullanıcıların akordiyonla standart klavye komutlarını kullanarak etkileşim kurabildiğinden emin olun.

• Sekme ile Gezinme: Akordiyon başlıkları odaklanılabilir olmalı ve sayfanın doğal sekme sırasında görünmelidir.
• Etkinleştirme: Odaklanmış bir akordiyon başlığında `Enter` veya `Boşluk tuşuna` basmak, içerik panelinin görünürlüğünü değiştirmelidir.
• Ok Tuşları (İsteğe Bağlı ama Önerilir): Daha gelişmiş bir deneyim için, ok tuşlarıyla gezinmeyi uygulamayı düşünün:
  • `Aşağı Ok`: Odağı bir sonraki akordiyon başlığına taşıyın.
  • `Yukarı Ok`: Odağı bir önceki akordiyon başlığına taşıyın.
  • `Home`: Odağı ilk akordiyon başlığına taşıyın.
  • `End`: Odağı son akordiyon başlığına taşıyın.
  • `Sağ Ok` (veya `Enter`/`Boşluk`): Mevcut akordiyon öğesini genişletin/daraltın.
  • `Sol Ok` (veya `Enter`/`Boşluk`): Mevcut akordiyon öğesini daraltın ve odağı başlığa geri taşıyın.

4. Görsel Odak Göstergeleri

Bir akordiyon başlığı klavye odağı aldığında, net bir görsel göstergeye sahip olmalıdır. Varsayılan tarayıcı odak anahatları genellikle yeterlidir, ancak alternatif, oldukça görünür bir odak stili sağlamadan CSS tarafından kaldırılmadıklarından (örneğin, `outline: none;`) emin olun.

Odak için Örnek CSS:

.accordion-button:focus {
  outline: 3px solid blue; /* Veya kontrast gereksinimlerini karşılayan bir renk */
  outline-offset: 2px;
}

5. İçerik Görünürlüğü ve Sunumu

• Varsayılan Durum: Akordiyon bölümlerinin varsayılan olarak daraltılmış mı yoksa genişletilmiş mi olacağına karar verin. SSS veya yoğun bilgi için, daraltılmış başlamak genellikle en iyisidir. Gezinme veya özellik özetleri için, varsayılan olarak bir bölümün genişletilmiş olması yardımcı olabilir.
• Görsel İpuçları: Bir bölümün genişletilmiş mi yoksa daraltılmış mı olduğunu belirtmek için net görsel ipuçları kullanın. Bu, görünümünü değiştiren bir simge (örneğin, bir '+' veya '-' işareti, bir yukarı/aşağı ok) olabilir. Bu simgelerin de erişilebilir olduğundan emin olun (örneğin, metinleri yoksa `aria-label` aracılığıyla).
• Kontrast Oranları: Akordiyon içindeki metin içeriğinin ve geçiş düğmelerinin WCAG kontrast oranı gereksinimlerini (normal metin için 4.5:1, büyük metin için 3:1) karşıladığından emin olun. Bu, az gören kullanıcılar için hayati önem taşır.
• İçerik Kaybı Olmaması: Bir bölüm genişlediğinde, içeriğinin kapsayıcısından taşmadığından veya diğer kritik içeriği gizlemediğinden emin olun.

6. Açıp Kapatırken Odağı Yönetme

Bu daha gelişmiş bir özelliktir ancak sorunsuz bir deneyim için çok önemlidir.

• Genişletme: Bir kullanıcı bir bölümü genişlettiğinde, odağı yeni ortaya çıkan içerikteki ilk etkileşimli öğeye taşımayı düşünün. Bu, özellikle genişletilmiş içerik form alanları veya bağlantılar içeriyorsa önemlidir.
• Daraltma: Bir kullanıcı bir bölümü daralttığında, odak değiştirilen akordiyon başlığına geri dönmelidir. Bu, kullanıcıların daha önce daraltılmış bölümler arasında geri gezinmek zorunda kalmasını önler.

Odak yönetimini uygulamak genellikle odağı yakalamak ve programatik olarak ayarlamak için JavaScript kullanımını içerir.

JavaScript ile Erişilebilir Akordiyonlar Uygulama

Semantik HTML ve ARIA ilk adımlar olsa da, dinamik geçişi ve potansiyel olarak odak yönetimini işlemek için genellikle JavaScript gereklidir. İşte kavramsal bir JavaScript yaklaşımı:

// Akordiyon İşlevselliği için Kavramsal JavaScript

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    const controlsId = button.getAttribute('aria-controls');
    const content = document.getElementById(controlsId);

    if (content) {
      const isExpanded = button.getAttribute('aria-expanded') === 'true';
      
      // aria-expanded durumunu değiştir
      button.setAttribute('aria-expanded', !isExpanded);

      // İçerik görünürlüğünü değiştir (erişilebilirlik için CSS kullanarak)
      content.style.display = isExpanded ? 'none' : 'block'; // Veya bir sınıf geçişi kullan

      // İsteğe bağlı: Genişletmede odak yönetimi
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // İsteğe bağlı: Klavye ile gezinme (ok tuşları vb.) de burada uygulanabilir.
  // Örneğin, 'keydown' olaylarını işlemek.
});

// Başlangıç kurulumu: İçeriği varsayılan olarak gizle ve aria-expanded'ı false olarak ayarla
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // İçeriği başlangıçta gizle
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

JavaScript için Önemli Hususlar:

• Gizlemek için CSS: İçeriği gizlemek için CSS (örneğin, `display: none;` veya daha yumuşak geçişler için `height: 0; overflow: hidden;` ayarlayan bir sınıf) kullanmak en iyi uygulamadır. Bu, görünür olmadığında içeriğin erişilebilirlik ağacından kaldırılmasını sağlar.
• Aşamalı İyileştirme (Graceful Degradation): JavaScript yüklenemese veya çalıştırılamasa bile, akordiyon içeriğinin erişilebilir kalmasını sağlayın (belki daraltılabilir olmasa da). Semantik HTML yine de bir miktar yapı sağlamalıdır.
• Çerçeveler ve Kütüphaneler: JavaScript çerçeveleri (React, Vue, Angular) veya UI kütüphaneleri kullanıyorsanız, erişilebilirlik belgelerini kontrol edin. Birçoğu kutudan çıktığı gibi veya belirli niteliklerle erişilebilir akordiyon bileşenleri sağlar.

Erişilebilirlik için Test Etme

Kapsamlı test, akordiyon widget'larınızın gerçekten erişilebilir olduğundan emin olmak için hayati önem taşır.

• Otomatik Araçlar: Yaygın erişilebilirlik sorunlarını belirlemek için tarayıcı uzantılarını (Axe, WAVE gibi) veya çevrimiçi denetleyicileri kullanın.
• Klavye Testi: Akordiyonu yalnızca klavyeyi kullanarak (Sekme, Shift+Sekme, Enter, Boşluk tuşu, Ok tuşları) gezinin ve çalıştırın. Tüm etkileşimli öğelerin ulaşılabilir ve çalıştırılabilir olduğundan emin olun.
• Ekran Okuyucu Testi: Popüler ekran okuyucularla (NVDA, JAWS, VoiceOver) test edin. Akordiyonun yapısının ve durum değişikliklerinin nasıl anons edildiğini dinleyin. Anlamlı mı? `aria-expanded` durumu doğru bir şekilde iletiliyor mu?
• Kullanıcı Testi: Mümkünse, test sürecinize engelli kullanıcıları dahil edin. Onların geri bildirimleri, gerçek dünyadaki kullanılabilirlik sorunlarını belirlemek için paha biçilmezdir.
• Tarayıcı ve Cihaz Testi: Oluşturma ve JavaScript davranışları değişebileceğinden farklı tarayıcılarda ve cihazlarda test edin.

Küresel Perspektifler ve Yerelleştirme

Küresel bir kitle için tasarım yaparken şu faktörleri göz önünde bulundurun:

• Dil: Düğme etiketleri ve içerik dahil tüm metnin açık, kısa ve kolayca çevrilebilir olduğundan emin olun. Deyimlerden veya kültüre özgü referanslardan kaçının.
• İçerik Uzunluğu: İçeriğin genişlemesi sayfa düzenini önemli ölçüde etkileyebilir. Çevrilen içeriğin orijinalinden daha uzun veya daha kısa olabileceğini unutmayın. Akordiyonunuzun değişen içerik uzunluklarını nasıl ele aldığını test edin.
• Kültürel Arayüz Gelenekleri: Akordiyonların temel işlevselliği evrensel olsa da, ince tasarım öğeleri kültürler arasında farklı algılanabilir. Yerleşik desenlere ve net işaretlere bağlı kalın.
• Performans: Yavaş internet bağlantısı olan bölgelerdeki kullanıcılar için JavaScript'inizin optimize edildiğinden ve akordiyonlar içindeki içeriğin ilk sayfa yükleme sürelerini aşırı derecede etkilemediğinden emin olun.

Erişilebilir Akordiyon Örnekleri

Birçok saygın kuruluş, erişilebilir akordiyon desenlerini sergilemektedir:

• GOV.UK Tasarım Sistemi: Genellikle erişilebilirliğe olan bağlılığıyla anılan GOV.UK, WCAG'ye uyan akordiyonlar da dahil olmak üzere iyi belgelenmiş bileşenler sağlar.
• MDN Web Docs: Mozilla Geliştirici Ağı, ARIA kullanımının açık açıklamalarıyla birlikte akordiyonlar da dahil olmak üzere erişilebilir widget'lar oluşturma konusunda ayrıntılı kılavuzlar ve örnekler sunar.
• Büyük Teknoloji Şirketlerinden Tasarım Sistemleri: Google (Material Design), Microsoft (Fluent UI) ve Apple gibi şirketler, genellikle erişilebilirliği önceliklendiren tasarım sistemi bileşenleri sağlarlar. Bunlara başvurmak, sağlam uygulama desenleri sunabilir.

Sonuç

Akordiyon widget'ları, içeriği düzenlemek ve kullanıcı deneyimini geliştirmek için güçlü araçlardır. Ancak, dinamik doğaları erişilebilirliğe karşı özenli bir yaklaşım gerektirir. WCAG yönergelerine bağlı kalarak, semantik HTML'den yararlanarak, ARIA'yı doğru bir şekilde uygulayarak, sağlam klavye ile gezinme sağlayarak ve kapsamlı testler yaparak, dünya genelinde herkes için kullanılabilir ve keyifli akordiyon bileşenleri oluşturabilirsiniz. Erişilebilirliği en başından itibaren önceliklendirmek, yalnızca uyumluluğu sağlamakla kalmaz, aynı zamanda herkes için daha kapsayıcı ve kullanıcı dostu bir ürüne yol açar.

Unutmayın, erişilebilir tasarım sonradan akla gelen bir şey değildir; iyi tasarımın ayrılmaz bir parçasıdır. Erişilebilir akordiyon widget'larının uygulanmasında ustalaşarak, tüm kullanıcılar için daha adil ve kullanılabilir bir web'e katkıda bulunursunuz.