Merhaba değerli takipçilerim,

Web ve mobil uygulamalarında erişilebilirlik standartlarına uyma zorunluluğu ülkemizde de yürürlüğe girmek üzere. Artık web ve mobil uygulamaları hazırlarken W3C ve ISO standartlarına uygun hazırlamakla kalmayıp, test araçlarıyla erişilebilirlik kriterine uygunluğu test etmelisiniz. Ayrıca VoiceOver ve TalkBack gibi uygulamaları ve Braille klavyeyi kullanarak görme engelliler için uygunluğu da ayrıca test etmelisiniz.

Bu makalenin kalan kısmında WCAG 2.2 standardının madde madde özetini paylaşıyor olacağım. Bu erişilebilirlik standartının tam içeriğine W3C’nin sitesinden erişebilirsiniz. Ayrıca Cumhurbaşkanlığı da bir erişilebilirlik genelgesi yayınlamak üzere. WCAG 2.2’nin Türkçe özeti aşağıdadır:

Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.2

WCAG (Web Content Accessibility Guidelines) 2.2, erişilebilirlik ilkelerini ve başarı ölçütlerini dört ana başlık altında toplar: Algılanabilirlik, İşletilebilirlik, Anlaşılabilirlik ve Sağlamlık. WCAG 2.2’nin getirdiği ek kuralları içerecek şekilde tüm ilkeleri ve kuralları madde madde şu şekilde sıralayabilirim:

1. Algılanabilirlik

Web içeriği, herkes tarafından algılanabilir olmalıdır.

1.1 Metin Alternatifleri

  • 1.1.1 Metin Alternatifi: Görsel içerikler için metin alternatifleri sağlanmalıdır.*

1.2 Zamanla Kontrol Edilen Medya

  • 1.2.1 Yalnızca Ses veya Görüntü (Ön Kayıtlı): Alternatif metin veya medya açıklamaları sağlanmalı.
  • 1.2.2 Altyazılar (Ön Kayıtlı): Videolarda altyazı kullanılmalı.
  • 1.2.3 Ses Açıklamaları veya Alternatifler (Ön Kayıtlı): Ses açıklaması veya alternatif bir medya sağlanmalı.
  • 1.2.4 Altyazılar (Canlı): Canlı videolar için altyazılar sağlanmalı.
  • 1.2.5 Ses Açıklamaları (Ön Kayıtlı): Ses açıklamaları eklenmeli.

1.3 İçerik Uyumlu

  • 1.3.1 Bilgi ve İlişkiler: Yapısal bilgi, erişilebilir yollarla sunulmalıdır.
  • 1.3.2 Anlamlı Sıra: Okuma sırası anlamlı olmalı.
  • 1.3.3 Duyusal Özellikler: İçeriği anlamak için yalnızca duyusal unsurlara güvenilmemeli.

1.4 Ayrım ve Okunabilirlik

  • 1.4.1 Renk Kullanımı: Bilgi sadece renk ile aktarılmamalı.
  • 1.4.2 Ses Kontrolü: Otomatik oynatılan ses kontrol edilebilir olmalı.
  • 1.4.3 Kontrast (Minimum): Metin ve arka plan kontrastı yeterli olmalı.
  • 1.4.4 Metin Boyutu Yeniden Boyutlandırma: İçerik işlevselliğini kaybetmeden büyütülebilmeli.*
  • 1.4.5 Görsellerde Metin: Görsellerde metin kullanımından kaçınılmalı.
  • 1.4.10 Yeniden Akış: İçerik, ekran boyutlarına uyumlu olmalı.
  • 1.4.11 Kullanıcı Arayüzü Bileşenleri Kontrastı: Arayüz öğeleri kontrastlı olmalı.
  • 1.4.12 Metin Aralıkları: Metin aralıkları düzenlenebilir olmalı.*
  • 1.4.13 İçerik Üzerine Fare veya Klavye: Etkileşimli içerikler net olmalı.

2. İşletilebilirlik

İçerik ve arayüz, her kullanıcı tarafından işletilebilir olmalıdır.

2.1 Klavye Erişilebilirliği

  • 2.1.1 Klavye: Tüm işlevler klavye ile kullanılabilir olmalı.
  • 2.1.2 Klavye Kapatılabilirliği: Klavye tuşları bir tuşa sıkışmaz.
  • 2.1.4 Kısayollar: Tek tuşlu kısayollar devre dışı bırakılabilir.

2.2 Zaman Sınırları

  • 2.2.1 Ayarlanabilir Zaman: Kullanıcılar zaman sınırlamalarını ayarlayabilmeli.
  • 2.2.2 Duraklat, Dur veya Gizle: Otomatik olarak başlayan içerik durdurulabilir.

2.3 Nöbetler ve Fiziksel Tepkiler

  • 2.3.1 Üç Flaş veya Daha Az: Flaş içerikleri sınırlanmalı.

2.4 Navigasyon

  • 2.4.1 Atlama Bağlantıları: İçeriğe hızlı erişim sağlanmalı.*
  • 2.4.2 Sayfa Başlıkları: Anlamlı başlıklar kullanılmalı.
  • 2.4.3 Odak Sırası: Mantıklı bir odak sırası olmalı.
  • 2.4.4 Bağlantılar Amaç: Bağlantı amacı açık olmalı.
  • 2.4.7 Odak Görünürlüğü: Odaklanan öğeler net görünür olmalı.

Yeni Başarı Ölçütleri

  • 2.4.11 Odak Görünürlüğü (2.2 ile gelen): Klavye odak göstergesi görünür olmalı.

3. Anlaşılabilirlik

Bilgi ve arayüzler, kullanıcıların anlaması için net olmalıdır.

3.1 Okunabilirlik

  • 3.1.1 Dil Tanımlama: Sayfa dili belirtilmeli.*
  • 3.1.2 Kısmi Dil Tanımlama: İçerikteki dil değişiklikleri belirtilmeli.

3.2 Tahmin Edilebilirlik

  • 3.2.1 Odaklandığında: Bileşenler odaklanınca beklenmeyen şeyler olmamalı.
  • 3.2.2 Girdi Yapıldığında: Girdi yapmak beklenmeyen değişikliklere yol açmamalı.

3.3 Girdi Yardımı

  • 3.3.1 Hata Belirleme: Hatalar kullanıcıya belirtilmeli.*
  • 3.3.3 Hata Önerisi: Kullanıcı hataları için öneriler sunulmalı.
  • 3.3.7 Kullanıcı Yardımı (2.2 ile gelen): Girdi alanları için yardım sağlanmalı.

4. Sağlamlık

İçerik, farklı teknolojiler ve cihazlarla uyumlu olmalıdır.

4.1 Uyumlu İşaretleme

  • 4.1.1 Ayrıştırma: Kod hataları giderilmeli.
  • 4.1.2 İsim, Rol, Değer: Tüm öğeler için etiket ve değerler doğru atanmalı.*

Yeni Başarı Ölçütleri

  • 4.1.3 Yardımcı Teknoloji Uyumluluğu (2.2 ile gelen): Yeni teknolojiler için uyum testleri yapılmalı.

Bu konuyu daha iyi öğrenmek isteyenler W3C ve ISO’nun ilgili belgelerini okumalıdırlar. İyi görmeyenler için siyah zemin üzerinde beyaz yazı (koyu tema / dark mode) kullanın. İyi görmeyenlerin sayfaları zoom yaptıklarını yani yakınlaştırma yaptıklarını unutmayın. Zoom yapıldığında siteniz ya de uygulamanızın buna uyum sağlaması gerekir.

Görme engelliler üye olurken ve oturum açarken görenlere göre daha fazla zorlandıkları için bu işlemleri mümkün olduğunca basitleştirin. Uygulamanızı mutlaka ekran okuyucu programlarla test edin. İşitme engelliler için altyazılar ve işaret dilinden yararlanın. Ayrıca uygulamanızı bilişsel olarak da erişilebilir yapın. Son olarak gerektiği yerlerde “aria” özniteliklerini de kullanmanızı hatırlatırız.

Mutlu kodlamalar 🙂