Erişilebilir Tasarım ve WCAG: Prensipler Uygulamada Nasıl Kullanılır?

Erişilebilirlik ve WCAG nedir?

Web erişilebilirliği, bir sitenin ya da uygulamanın görme, işitme, hareket ve bilişsel farklılıkları olan kişiler dahil herkes tarafından kullanılabilmesidir. Kalıcı engeller kadar geçici durumlar da kapsama girer: kırık bir kol, parlak güneş altında ekran okumak ya da gürültülü bir ortamda video izlemek.

WCAG (Web Content Accessibility Guidelines), W3C bünyesindeki Web Erişilebilirlik Girişimi tarafından yayımlanan ve web içeriğinin erişilebilirliğini tanımlayan uluslararası kılavuzdur. WCAG sürümlerle güncellenir ve W3C en son sürümün kullanılmasını önerir; güncel sürüme uyan içerik önceki sürümlere de uyar. Bu yüzden yeni bir projede hedefi en güncel W3C Tavsiyesi üzerinden kurmak, eski bir sürümü anan şartnameyi de karşılamanın en güvenli yoludur. Erişilebilirlik mevzuatı ve satın alma şartnameleri sıklıkla bu kılavuza atıf yapar. Hangi mevzuatın size uygulandığı ülkeye, sektöre ve ürüne göre değişir; bunu hukuk ve uyum biriminizle netleştirin.

Dört ilke: algılanabilir, işletilebilir, anlaşılabilir, sağlam

WCAG'ın tüm başarı kriterleri dört ilke altında toplanır. Algılanabilir (Perceivable): bilgi, kullanıcının algılayabileceği biçimlerde sunulmalıdır. Görsellere alternatif metin, videolara altyazı, metin ile arka plan arasında yeterli karşıtlık bu ilkeye girer.

İşletilebilir (Operable): arayüz fare dışında klavyeyle de kullanılabilmeli, kullanıcıya okumak ve etkileşim kurmak için yeterli zaman tanınmalı, gezinme kolay olmalıdır. Anlaşılabilir (Understandable): metin okunur, davranışlar öngörülebilir, form hataları açıkça anlatılmış olmalıdır. Sağlam (Robust): içerik, yardımcı teknolojiler dahil farklı tarayıcı ve cihazlarla uyumlu, doğru işaretlenmiş olmalıdır.

Uyum seviyeleri A, AA ve AAA olarak adlandırılır. Hangi seviyenin hedeflendiği şartnameye ve mevzuata göre değişir; şartnamede hem WCAG sürümünü hem seviyeyi arayın. Belge yalnız seviyeyi anıyorsa, en güncel sürümle çalışmak W3C önerisine uygundur.

Tasarımda uygulama: görünür içerik

Tasarım aşamasında en çok etki yaratan işler görünür içerikte toplanır. Renk karşıtlığını tasarım sistemi düzeyinde tanımlayın; renk tek başına anlam taşımamalı (örneğin hata durumunu yalnızca kırmızıyla belirtmeyin, simge ve metin ekleyin). Anlamlı görseller için alternatif metin yazın, süs amaçlı görsellerde boş alternatif kullanarak ekran okuyucunun atlamasını sağlayın.

Metin boyutunu büyütebilen, satır aralığı ve genişliği esnek bir yerleşim kurun. Videolarda altyazı ve gerektiğinde yazılı döküm bulundurun. Başlık hiyerarşisini görsel büyüklüğe göre değil, anlamsal sıraya göre düzenleyin; ekran okuyucu kullanıcıları sayfayı başlıklar üzerinden tarar.

Klavye, odak ve etkileşim

Her etkileşimli öğe klavyeyle erişilebilir ve odak durumu görünür olmalıdır. Odak sırası, ekranın görsel ve mantıksal akışını izlemelidir; açılır pencerelerde odak pencere içine taşınmalı, kapanınca tetikleyen öğeye dönmelidir. Odak çerçevesini estetik gerekçeyle kaldırmak, klavye kullanıcılarını yönsüz bırakır.

Formlarda her alanın görünür bir etiketi olmalı, hata iletisi alanla ilişkilendirilmeli ve neyin nasıl düzeltileceğini söylemelidir. Zaman sınırı olan işlemlerde kullanıcıya uzatma imkânı verin. Animasyon ve otomatik oynayan içerikte durdurma denetimi sağlayın; hareket hassasiyeti olan kullanıcılar için azaltılmış hareket tercihine saygı gösterin.

Anlaşılabilirlik ve sağlam yapı

Dil sade, hata iletileri yol gösterici, gezinme tutarlı olmalıdır. Sayfanın dili işaretlenmeli, yardımcı teknolojilerin doğru okuması için anlamsal HTML tercih edilmelidir: düğme için düğme öğesi, bağlantı için bağlantı öğesi kullanmak, özel bileşeni her seferinde ek rol ve özellikle onarmaktan daha güvenilirdir.

Özel bileşenlerde (sekme, menü, açılır liste) ARIA rolleri yalnızca anlamsal HTML yetmediğinde eklenir; yanlış ARIA, hiç ARIA olmamasından daha kötü sonuç verebilir. Bileşeni yazdıktan sonra gerçek bir ekran okuyucu ve yalnız klavye ile deneyin.

Örnek bir akış: form sayfasını erişilebilir kılmak

Erişilebilirliği somutlaştırmak için bir kayıt formunu ele alalım. Önce her alan için görünür bir etiket tanımlanır; yer tutucu metin etiketin yerini tutmaz, çünkü kullanıcı yazmaya başlayınca kaybolur. Zorunlu alanlar yalnızca yıldızla değil, "zorunlu" ifadesiyle de belirtilir. Alan türüne uygun giriş tipi seçilir ki mobil cihazlarda doğru klavye açılsın.

Hata durumunda iletinin alanın hemen yanında görünmesi, alanla programatik olarak ilişkilendirilmesi ve ekran okuyucuya duyurulması gerekir. Kullanıcıya neyin yanlış olduğu ve nasıl düzeltileceği söylenir: "Geçersiz giriş" yerine "E-posta adresi @ işareti içermelidir" gibi. Gönder düğmesine basıldığında hata varsa odak, ilk hatalı alana ya da hata özetine taşınır.

Test sırası şudur: önce yalnızca klavyeyle forma girin ve tüm alanlara Tab ile ulaşabildiğinizi, odak çerçevesini görebildiğinizi doğrulayın. Ardından bir ekran okuyucuyla alanların adının doğru okunduğunu ve hata iletilerinin duyurulduğunu denetleyin. Son olarak sayfayı büyütüp dar ekrana getirin; hiçbir alan kesilmemeli ya da yatay kaydırma gerektirmemelidir. Bu üç basit denetim, formlarda en sık görülen engelleri büyük ölçüde yakalar.

Aynı mantık diğer bileşenler için de geçerlidir: açılır menü, modal pencere, sekme paneli ve tarih seçici gibi özel bileşenler, ilk iş klavye ve ekran okuyucuyla denenir; sonra görsel ayrıntılar cilalanır.

Denetim ve araçlar, öğrenme yolu, sık hatalar

Erişilebilirlik denetimi iki katmanlıdır. Otomatik araçlar (tarayıcı eklentileri, kod analiz araçları) yaygın sorunları hızla yakalar ama sorunların yalnız bir bölümünü bulabilir. Elle denetim şarttır: yalnızca klavyeyle gezinme, ekran okuyucuyla deneme, yakınlaştırma ve yüksek karşıtlık kontrolü. Mümkünse engelli kullanıcıların katıldığı kullanıcı testleri yapın.

Öğrenme yolu: önce dört ilke ve başarı kriterlerinin mantığı, sonra tasarım sisteminde renk, tipografi ve bileşen kuralları, ardından kod düzeyinde anlamsal yapı ve ARIA, en son denetim süreci ve ekip içi yönetişim. Sık hatalar: erişilebilirliği projenin sonunda eklemek, yalnızca otomatik araca güvenmek, odak çerçevesini kaldırmak, yalnızca renkle bilgi vermek ve yanlış ARIA kullanmak.

Mindset programlarında nerede çalışılır?

Mindset kataloğundaki Erişilebilirlik (WCAG) Tasarım Prensipleri eğitimi şu modüllerden oluşur: Erişilebilirlik Temelleri ve Mevzuat, WCAG Prensipleri ve Başarı Kriterleri, Algılama İlkeleri (Görülebilir İçerik), Kullanılabilirlik (İşletilebilir Arayüz), Anlaşılabilirlik ve Sağlam Yapı, Kapsayıcı Tasarım Uygulaması, Erişilebilirlik Denetimi ve Araçları.