` öğeleri kullanmak.

Doğru:

<table>
  <caption>Ekim 2024 Takvimi</caption>
  <thead>
    <tr>
      <th scope="col">Paz</th>
      <th scope="col">Pzt</th>
      <th scope="col">Sal</th>
      <th scope="col">Çar</th>
      <th scope="col">Per</th>
      <th scope="col">Cum</th>
      <th scope="col">Cmt</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <!-- Daha fazla satır -->
  </tbody>
</table>

2. ARIA Nitelikleri

ARIA (Erişilebilir Zengin İnternet Uygulamaları) nitelikleri, yardımcı teknolojilere ek semantik bilgi sağlayarak interaktif öğeleri anlamalarını artırır. ARIA niteliklerini şunlar için kullanın:

• Rolleri tanımlama: Takvim ızgarası için `role="grid"` ve her tarih hücresi için `role="gridcell"` gibi öğelerin amacını belirtin.
• Etiketler sağlama: Özellikle görsel etiket yetersiz olduğunda, öğeler için açıklayıcı etiketler sağlamak amacıyla `aria-label` veya `aria-labelledby` kullanın.
• Durumu belirtme: Seçili tarihi belirtmek için `aria-selected` ve devre dışı bırakılmış tarihleri belirtmek için `aria-disabled` gibi nitelikleri kullanın.
• Açıklamalar sağlama: Tarih formatının açıklaması gibi ek bilgileri bir öğeyle ilişkilendirmek için `aria-describedby` kullanın.

Örnek:

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">Bir tarih seçin</caption>
  <thead>
    <tr>
      <th scope="col">Paz</th>
      <th scope="col">Pzt</th>
      <th scope="col">Sal</th>
      <th scope="col">Çar</th>
      <th scope="col">Per</th>
      <th scope="col">Cum</th>
      <th scope="col">Cmt</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell" aria-disabled="true">29</td>
      <td role="gridcell" aria-disabled="true">30</td>
      <td role="gridcell"><button aria-label="1 Ekim 2024">1</button></td>
      <td role="gridcell"><button aria-label="2 Ekim 2024">2</button></td>
      <td role="gridcell"><button aria-label="3 Ekim 2024">3</button></td>
      <td role="gridcell"><button aria-label="4 Ekim 2024">4</button></td>
      <td role="gridcell"><button aria-label="5 Ekim 2024">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="6 Ekim 2024">6</button></td>
      <td role="gridcell"><button aria-label="7 Ekim 2024">7</button></td>
      <td role="gridcell"><button aria-label="8 Ekim 2024">8</button></td>
      <td role="gridcell"><button aria-label="9 Ekim 2024">9</button></td>
      <td role="gridcell"><button aria-label="10 Ekim 2024">10</button></td>
      <td role="gridcell"><button aria-label="11 Ekim 2024">11</button></td>
      <td role="gridcell"><button aria-label="12 Ekim 2024">12</button></td>
    </tr>
    <!-- Daha fazla satır -->
  </tbody>
</table>

Not: ARIA niteliklerinin doğru yorumlandığından emin olmak için her zaman gerçek ekran okuyucularla test edin.

3. Klavye Navigasyonu

Klavye navigasyonu, fare veya diğer işaretleme cihazlarını kullanamayan kullanıcılar için gereklidir. Tarih seçici içindeki tüm etkileşimli öğelerin klavye aracılığıyla erişilebilir olduğundan emin olun.

• Odak Yönetimi: Odak sırasını kontrol etmek için `tabindex` niteliğini kullanın. Odağın tarih seçici boyunca mantıksal olarak hareket ettiğinden emin olun. Kullanıcı widget ile etkileşime girdiğinde odağı yönetmek için JavaScript kullanın.
• Ok Tuşları: Tarihler arasında geçiş yapmak için ok tuşlarını kullanarak klavye navigasyonunu uygulayın. Sol ve sağ ok tuşları sırasıyla önceki ve sonraki güne geçmelidir. Yukarı ve aşağı ok tuşları sırasıyla önceki ve sonraki haftadaki aynı güne geçmelidir.
• Home ve End Tuşları: Home tuşu mevcut haftanın ilk gününe, End tuşu ise mevcut haftanın son gününe geçmelidir.
• Page Up ve Page Down Tuşları: Page Up tuşu önceki aya, Page Down tuşu ise sonraki aya geçmelidir.
• Enter Tuşu: Enter tuşu odaklanılan tarihi seçmelidir.
• Escape Tuşu: Escape tuşu tarih seçiciyi kapatmalı ve odağı onu tetikleyen giriş alanına veya düğmeye geri döndürmelidir.

Örnek (JavaScript):

// Klavye navigasyonunu işlemenin bir örneği
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // Odağı önceki güne taşı
      break;
    case 'ArrowRight':
      // Odağı sonraki güne taşı
      break;
    case 'ArrowUp':
      // Odağı önceki haftadaki aynı güne taşı
      break;
    case 'ArrowDown':
      // Odağı sonraki haftadaki aynı güne taşı
      break;
    case 'Enter':
      // Odaklanılan tarihi seç
      break;
    case 'Escape':
      // Tarih seçiciyi kapat
      break;
  }
});

4. Ekran Okuyucu Uyumluluğu

Ekran okuyucular, kullanıcılara bilgi sağlamak için semantik HTML ve ARIA niteliklerine güvenir. Tarih seçicinizin NVDA, JAWS ve VoiceOver gibi popüler ekran okuyucularla uyumlu olduğundan emin olun.

• Açıklayıcı Etiketler: Tüm etkileşimli öğeler için açık ve kısa etiketler sağlayın. Ek bağlam sağlamak için `aria-label` veya `aria-labelledby` kullanın.
• Durum Bildirimleri: Seçili tarih için `aria-selected` ve devre dışı bırakılmış tarihler için `aria-disabled` gibi öğelerin durumunu belirtmek için ARIA niteliklerini kullanın. Ekran okuyucular bu durumları kullanıcıya bildirecektir.
• Canlı Bölgeler (Live Regions): Kullanıcı farklı bir aya geçtiğinde olduğu gibi, tarih seçicideki dinamik değişiklikleri bildirmek için ARIA canlı bölgelerini (ör. `aria-live="polite"`) kullanın. Bu, ekran okuyucuların kullanıcının iş akışını kesintiye uğratmadan değişikliği bildirmesini sağlar.
• Hata Yönetimi: Herhangi bir hata veya doğrulama sorunu varsa, ekran okuyucular tarafından erişilebilen açık ve bilgilendirici hata mesajları sağlayın. Hata mesajını ilgili giriş alanıyla ilişkilendirmek için `aria-describedby` kullanın.

Örnek:

<div aria-live="polite">
  <!-- Ay navigasyonu gibi dinamik içerik -->
</div>

5. Görsel Tasarım

Tarih seçicinin görsel tasarımı da erişilebilir olmalıdır. Aşağıdakileri göz önünde bulundurun:

• Renk Kontrastı: WCAG (Web İçeriği Erişilebilirlik Yönergeleri) 2.1 Seviye AA standartlarını karşılamak için metin ve arka plan renkleri arasında yeterli renk kontrastı sağlayın. Kontrast oranını doğrulamak için bir renk kontrastı denetleyici aracı kullanın.
• Odak Göstergeleri: Tüm etkileşimli öğeler için açık ve görünür bir odak göstergesi sağlayın. Odak göstergesi çevresindeki öğelerden farklı olmalı ve diğer öğeler tarafından gizlenmemelidir.
• Yazı Tipi Boyutu ve Boşluk: Okunabilirliği ve kullanılabilirliği artırmak için okunaklı bir yazı tipi boyutu ve öğeler arasında yeterli boşluk kullanın.
• Yalnızca Renge Güvenmekten Kaçının: Bilgiyi iletmek için yalnızca renge güvenmeyin. Renk kodlamasını desteklemek için ikonlar veya metin gibi diğer görsel ipuçlarını kullanın.

6. Yerelleştirme ve Uluslararasılaştırma

Tarih formatları, takvim sistemleri ve dil kuralları farklı kültürler ve bölgeler arasında değişiklik gösterir. Tarih seçicinizin küresel bir kitleyi desteklemek için doğru şekilde yerelleştirildiğinden ve uluslararasılaştırıldığından emin olun.

• Tarih Formatları: GG/AA/YYYY (Avrupa ve Asya'nın bazı bölgelerinde yaygın) ve AA/GG/YYYY (Kuzey Amerika'da yaygın) gibi farklı tarih formatlarını destekleyen esnek bir tarih biçimlendirme kütüphanesi kullanın. Kullanıcıların tercih ettikleri tarih formatını özelleştirmelerine izin verin.
• Takvim Sistemleri: Gregoryen takvimi (en yaygın kullanılan takvim) ve Hicri takvimi (birçok İslam ülkesinde kullanılan) gibi farklı takvim sistemlerini destekleyin.
• Dil Desteği: Ay adları, gün adları ve etiketler dahil olmak üzere tarih seçicideki tüm metin öğeleri için çeviriler sağlayın.
• Sağdan Sola (RTL) Desteği: Tarih seçicinin Arapça ve İbranice gibi RTL dillerinde doğru şekilde görüntülendiğinden emin olun. Bu, widget'ın düzenini ve stilini ayarlamayı gerektirebilir.
• Saat Dilimleri: Tarihleri işlerken saat dilimlerinin etkilerini göz önünde bulundurun. Tarihleri tutarlı bir saat diliminde (ör. UTC) saklayın ve görüntülerken kullanıcının yerel saat dilimine dönüştürün.

Örnek: Tarih biçimlendirme ve yerelleştirmeyi yönetmek için `moment.js` veya `date-fns` gibi bir JavaScript kütüphanesi kullanın.

7. Mobil Erişilebilirlik

Mobil cihazların artan kullanımıyla birlikte, tarih seçicinizin mobil platformlarda erişilebilir olmasını sağlamak esastır. Aşağıdakileri göz önünde bulundurun:

• Dokunma Hedefleri: Tüm etkileşimli öğelerin mobil cihazlarda kolayca dokunulabilecek kadar büyük dokunma hedeflerine sahip olduğundan emin olun. Apple, minimum 44x44 piksel dokunma hedefi boyutu önermektedir.
• Duyarlı Tasarım: Tarih seçicinin farklı ekran boyutlarına ve yönelimlerine uyum sağlaması için duyarlı tasarım teknikleri kullanın.
• Klavye Girişi: Tarih seçici klavye girişi gerektiriyorsa, tarih girişi için optimize edilmiş mobil uyumlu bir klavye sağlayın.
• Hareketler (Gestures): Motor becerilerinde bozukluk olan kullanıcılar için zor olabilecek hareketlere yalnızca güvenmekten kaçının. Klavye navigasyonu veya sesli kontrol gibi alternatif giriş yöntemleri sağlayın.

Test ve Doğrulama

Kapsamlı test, tarih seçicinizin erişilebilirliğini sağlamak için çok önemlidir. Otomatik ve manuel test yöntemlerinin bir kombinasyonunu kullanın:

• Otomatik Test: Yaygın erişilebilirlik sorunlarını belirlemek için Axe veya WAVE gibi erişilebilirlik test araçlarını kullanın.
• Manuel Test: Engelli kişilerin kullanabildiğini doğrulamak için tarih seçiciyi bir ekran okuyucu ve klavye navigasyonu kullanarak manuel olarak test edin.
• Kullanıcı Testi: Geri bildirim toplamak ve iyileştirme alanlarını belirlemek için engelli kişilerle kullanıcı testi yapın.
• WCAG Uyumluluğu: Tarih seçicinizin WCAG 2.1 Seviye AA gereksinimlerini karşıladığından emin olun.

Erişilebilir Tarih Seçici Örnekleri

Birçok açık kaynaklı ve ticari tarih seçici kütüphanesi iyi erişilebilirlik desteği sağlar. Bazı örnekler şunlardır:

• React Datepicker: ARIA desteği ve klavye navigasyonuna sahip popüler bir React bileşeni.
• Air Datepicker: İyi erişilebilirlik özelliklerine sahip hafif ve özelleştirilebilir bir tarih seçici.
• FullCalendar: Kapsamlı erişilebilirlik desteğine sahip tam özellikli bir takvim bileşeni.

Bir tarih seçici kütüphanesi seçerken, erişilebilirlik özelliklerini dikkatlice değerlendirin ve özel gereksinimlerinizi karşıladığından emin olun.

Erişilebilir Tarih Seçiciler Oluşturmak için En İyi Uygulamalar

İşte erişilebilir tarih seçiciler oluşturmak için en iyi uygulamaların bir özeti:

• Tarih seçiciyi yapılandırmak için semantik HTML kullanın.
• Ek semantik bilgi sağlamak için ARIA niteliklerini kullanın.
• Klavye navigasyonunun tamamen uygulandığından emin olun.
• Uyumluluğu doğrulamak için ekran okuyucularla test edin.
• Yeterli renk kontrastı ve net odak göstergeleri sağlayın.
• Küresel kullanıcılar için tarih seçiciyi yerelleştirin ve uluslararasılaştırın.
• Tarih seçiciyi mobil cihazlar için optimize edin.
• Kapsamlı test ve doğrulama yapın.

Sonuç

Erişilebilir tarih seçiciler oluşturmak karmaşık ama önemli bir görevdir. Bu kılavuzda belirtilen yönergeleri ve en iyi uygulamaları takip ederek, farklı kültürel ve teknolojik ortamlarda, her beceri seviyesinden kullanıcının ihtiyaçlarını karşılayan kapsayıcı takvim widget'ları oluşturabilirsiniz. Erişilebilirliğin sürekli bir süreç olduğunu ve tarih seçicilerinizin zaman içinde erişilebilir kalmasını sağlamak için sürekli test ve iyileştirmenin çok önemli olduğunu unutmayın. Erişilebilirliğe öncelik vererek, herkes için daha kapsayıcı ve kullanıcı dostu bir web deneyimi yaratabilirsiniz.

Ek Kaynaklar

• WAI-ARIA Yazma Uygulamaları Kılavuzu (APG) - Takvim
• Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.1
• Deque University