Erişilebilirlik Temelleri

Bir cümlelik özet

Erişilebilirlik, bir web sayfasının gören, görmeyen, klavye kullanan veya farklı ihtiyaçları olan herkes tarafından rahatça kullanılabilmesini sağlayan kurallar bütünüdür.

Neden önemli?

Bir web sayfası yalnız fareyle ekrana bakan kişiler için yazılmaz. Kimi kullanıcı ekranı hiç göremez ve ekran okuyucu adı verilen, sayfadaki metni sesli okuyan bir program kullanır. Kimi kullanıcı fare kullanamaz ve yalnız klavyeyle gezinir. Kimi kullanıcı renkleri ayırt etmekte zorlanır.

Erişilebilirlik (İngilizcesi *accessibility*, kısaca a11y), sayfayı bu insanların da kullanabilmesi için düşünmektir. İyi haber şu: erişilebilir bir sayfa yazmak çok fazla ekstra iş değildir. Doğru etiketi doğru yerde kullanmak çoğu zaman yeterlidir.

Erişilebilirlik yalnız bir grup insan için de değildir. Parlak güneşte telefonuna bakan biri, kolu kırık olduğu için tek elle klavye kullanan biri veya sesli okuma özelliğini seven biri de bundan yararlanır. Erişilebilir sayfa, herkes için daha kullanışlı sayfadır.

Görseller ve alternatif metin

Bir ekran okuyucu bir görselin içine bakıp ne olduğunu anlayamaz. Onun için görsele bir alternatif metin (alt text) yazarız. alt özniteliği, görsel yüklenmezse veya kullanıcı göremezse okunacak açıklamadır.

Anlamlı görsel

Görsel bir bilgi taşıyorsa, alt metni o bilgiyi kısaca anlatmalıdır.

<img src="kedi.jpg" alt="Pencere kenarında uyuyan turuncu bir kedi">

Ekran okuyucu bunu "Pencere kenarında uyuyan turuncu bir kedi, görsel" diye okur. Kullanıcı görseli görmese de neyin orada olduğunu anlar.

Dekoratif görsel

Görsel yalnız süs amaçlıysa ve bir bilgi taşımıyorsa, alt metnini boş bırakırız. Böylece ekran okuyucu onu atlar ve kullanıcıyı gereksiz yormaz.

<img src="cizgi-suslemesi.png" alt="">

Dikkat: alt özniteliğini tamamen silmek ile boş yazmak farklıdır. Boş alt="" "bu süs, atla" demektir. Hiç yazmamak ise ekran okuyucunun dosya adını okumasına yol açabilir.

Formlar ve etiketler

Önceki derste formları öğrenmiştik. Bir formu erişilebilir yapmanın en önemli adımı her giriş kutusuna bir etiket (label) bağlamaktır. Etiket, kutunun ne için olduğunu söyler.

Etiketi kutuya bağlamak için label elemanının for değeri ile input elemanının id değerini aynı yaparız.

<label for="takma-ad">Takma adın</label>
<input id="takma-ad" type="text" name="takma-ad">

Bu bağ sayesinde ekran okuyucu kutuya gelince "Takma adın, metin kutusu" der. Etikete tıklamak da imleci doğrudan kutuya götürür; bu, küçük ekranlarda işi kolaylaştırır.

Hatırlatma: Bu akademinin gerçek bir formu yoktur ve senden ad, e-posta, telefon gibi kişisel bilgi istemez. Aşağıdaki örnekler yalnız alıştırma amaçlıdır; gerçek kişisel bilgini hiçbir alıştırma sayfasına yazma.

Klavye, odak ve renk

Klavyeyle gezinme

Fare kullanamayan biri sayfada Tab tuşuyla ilerler. Her basışta bir sonraki bağlantıya veya butona geçer. Buna odak (focus) denir. Bağlantılar (a), butonlar (button) ve form kutuları doğal olarak odak alır. Bu yüzden tıklanabilir bir şey yaparken div yerine gerçek button kullanmak önemlidir.

<button type="button">Menüyü aç</button>

Odaklanan elemanın etrafında genelde bir çerçeve belirir. Bu çerçeveyi CSS ile tamamen silmek erişilebilirliği bozar; kullanıcı nerede olduğunu göremez. Çerçeveyi sileceksen, yerine kendi görünür işaretini koymalısın.

Renk kontrastı

Yazı ile arka planın rengi birbirine çok yakınsa, bazı kullanıcılar yazıyı okuyamaz. Yeterli kontrast (zıtlık) gerekir. Açık gri zemin üzerine açık gri yazı kötü bir seçimdir; koyu yazı ile açık zemin iyidir.

Ayrıca bilgiyi yalnız renge bağlama. "Yeşil olan doğru, kırmızı olan yanlış" dersen, renk körü bir kullanıcı ayırt edemez. Renge ek olarak bir simge veya yazı da ekle.

Başlık düzeni ve temel ARIA

Başlıkları sırayla kullan

Başlık etiketleri (h1, h2, h3) sayfanın içindekiler listesi gibidir. Ekran okuyucu kullanan biri başlıklar arasında zıplayarak sayfayı hızlıca gezebilir. Bu yüzden h1 bir kez kullanılır (sayfanın ana başlığı) ve alt başlıklar sırayla iner. Başlıkları yalnız "yazı büyük görünsün" diye seçme; anlam sırasına göre seç.

aria-label ve aria-hidden

Bazı butonlarda görünür bir yazı olmaz, sadece bir simge vardır. Ekran okuyucu simgeyi okuyamaz. Böyle durumda aria-label ile ona bir isim veririz.

<button type="button" aria-label="Aramayı başlat">
  <span aria-hidden="true">🔍</span>
</button>

Burada aria-label, butonun adını "Aramayı başlat" yapar. İçteki büyüteç simgesi yalnız süstür; aria-hidden="true" ile onu ekran okuyucudan gizleriz ki simgeyi ayrıca "büyüteç" diye okumaya çalışmasın.

Kural: Önce her zaman gerçek HTML etiketini doğru kullan. ARIA, ancak HTML tek başına yetmediğinde eklenen bir yardımcıdır, HTML'in yerine geçmez.

Mini uygulama

Aşağıda hem erişilebilir bir görsel hem de erişilebilir bir buton var. Bunu bir dosyaya yazıp tarayıcıda aç.

<!doctype html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Erişilebilirlik alıştırması</title>
  </head>
  <body>
    <h1>Sevimli hayvanlar</h1>
    <img src="kopek.jpg"
         alt="Çimenlikte koşan kahverengi bir köpek">
    <button type="button" aria-label="Sesi aç">
      <span aria-hidden="true">🔊</span>
    </button>
  </body>
</html>

Şimdi şunları dene:

• Farklı bir görsel adı yaz ve alt metnini o görsele uygun değiştir.
• Tab tuşuna basıp butonun odaklandığını gör; çerçevenin belirmesine dikkat et.
• Butonun aria-label değerini değiştir ve neyin okunacağını düşün.

Uygulama laboratuvarı: Erişilebilirlik Temelleri

Erişilebilirlik Temelleri konusunu kalıcı hâle getirmenin en iyi yolu, kavramı küçük ve ölçülebilir bir göreve dönüştürmektir. Bu çalışmada Görseller ve alternatif metin ile Dekoratif görsel arasındaki ilişkiyi kullanarak anlamlı HTML, düzenli CSS, gerektiğinde küçük JavaScript ve erişilebilirlik kontrolü hazırlayacaksın. Amaç yalnız sonucun çalışması değil; hangi kararı neden verdiğini, neyi test ettiğini ve hangi durumda tasarımı değiştireceğini açıklayabilmektir.

Görev senaryosu

Şu senaryoyu ele al: farklı ekranlarda okunabilen ders kartları arayüzü. Dersin ana hedefi “Alt metni, klavye erişimi, renk kontrastı ve temel aria ile herkes için erişilebilir sayfalar yapmayı öğren” olduğuna göre önce problemi tek cümleyle tanımla. Ardından sistemin alacağı girdiyi, uygulayacağı işlemi ve üreteceği çıktıyı ayrı ayrı yaz. Bilmediğin bir ayrıntı varsa onu varsayım olarak işaretle; varsayımı gerçek bilgi gibi kullanma.

1. Planla: Başlangıç durumunu, beklenen sonucu ve kullanacağın kavramları yaz.
2. En küçük sürümü kur: Yalnız temel davranışı çalıştır; süsleme ve ek özellikleri sonraya bırak.
3. Üç test hazırla: Normal bir durum, sınırda bir durum ve hatalı ya da beklenmeyen bir durum seç.
4. Sonucu kaydet: Beklenen ile gerçekleşeni yan yana yaz; fark varsa olası nedeni belirt.
5. Tek değişiklik yap: Aynı anda birçok şeyi değiştirmek yerine bir kararı düzeltip testi yeniden çalıştır.

Başarı ölçütleri

• Başlık hiyerarşisi mantıklı mı?
• Bağlantılar klavye ve dokunmayla çalışıyor mu?
• Mobil ekranda yatay taşma var mı?
• Görsellerin alternatif metni ve boyutları tanımlı mı?
• HTML, CSS ve JavaScript sorumlulukları birbirine karışıyor mu?

“Erişilebilirlik Temelleri” çalışmasını bitirdiğinde ürünü bir arkadaşına yalnız bölüm başlıklarıyla anlat. Arkadaşın farklı ekranlarda okunabilen ders kartları arayüzü senaryosundaki adımları ve karar nedenlerini takip edebiliyorsa anlatım yeterince açıktır. Anlaşılmayan noktayı daha fazla terim ekleyerek değil, Görseller ve alternatif metin ve Dekoratif görsel ilişkisini daha küçük adımlara bölerek düzelt.

Sık yapılan hatalar

Boş veya anlamsız alt metni

Anlamlı bir görsele alt="görsel" yazmak işe yaramaz. Ne olduğunu söylemez. Görselin içeriğini kısaca yaz.

Etiketi olmayan form kutusu

Yalnız kutuyu koyup label yazmamak, ekran okuyucu kullanan birinin kutunun ne için olduğunu anlamamasına yol açar. Her kutuya bir etiket bağla.

Odak çerçevesini silmek

outline: none yazıp yerine hiçbir işaret koymamak, klavye kullanıcısının nerede olduğunu kaybetmesine neden olur. Ya çerçeveyi bırak ya da kendi görünür işaretini ekle.

Tıklanabilir div kullanmak

Buton işi yapacak bir div klavyeyle odak almaz. Tıklanabilir bir şey için gerçek button veya a kullan.

ARIA'yı gereksiz yere kullanmak

Zaten yazısı olan bir butona aria-label eklemek çelişki yaratır. ARIA'yı yalnız gerçekten gerektiğinde kullan.

Güvenlik notu

Erişilebilirlik ile gizlilik birlikte düşünülür. alt metni veya aria-label içine gerçek adını, adresini, telefon numaranı ya da okulunun adını yazma; bu metinler sayfanın kaynağında herkese açıktır. Alıştırma yaparken uydurma isimler ve örnek veriler kullan. Bir siteye gerçek kişisel bilgi girmen gerektiğini düşündüğün her durumda önce bir yetişkine danış. Unutma: bu akademinin gerçek bir formu yoktur ve senden kişisel bilgi toplamaz.

Ders özeti

• Erişilebilirlik (a11y), sayfanın görmeyen, klavye kullanan veya farklı ihtiyaçları olan herkes için kullanılabilir olmasıdır.
• Anlamlı görsellere açıklayıcı alt metni, dekoratif görsellere boş alt="" yazılır.
• Her form kutusu label ile for/id bağı üzerinden etiketlenmelidir.
• Klavye kullanıcıları için gerçek button/a kullanılır ve odak çerçevesi görünür bırakılır; renk kontrastı yeterli olmalıdır.
• Simge butonlarına aria-label verilir, süs simgeleri aria-hidden="true" ile gizlenir; ARIA, doğru HTML'in yerine değil yanına eklenir.

Kontrol soruları

1. Ekran okuyucu nedir ve ne işe yarar?
2. Bir görsel yalnız süs amaçlıysa alt özniteliğine ne yazılır?
3. Bir label elemanını bir input kutusuna nasıl bağlarız?
4. Klavye kullanıcısı için odak çerçevesini CSS ile silmek neden sorunludur?
5. aria-label ve aria-hidden="true" ne işe yarar? Kısaca açıkla.

Cevaplar

1. Ekran okuyucu, sayfadaki metni ve öğeleri sesli okuyan bir programdır; görmeyen veya az gören kullanıcılar sayfayı bununla kullanır.
2. Boş bırakılır: alt="". Böylece ekran okuyucu süs görseli atlar.
3. label elemanının for değerini, input elemanının id değeriyle aynı yaparak. Örnek: <label for="takma-ad"> ile <input id="takma-ad">.
4. Çünkü klavyeyle gezinen kullanıcı o an hangi öğede olduğunu göremez hale gelir; çerçeveyi silersen yerine kendi görünür işaretini koymalısın.
5. aria-label, yazısı olmayan bir öğeye ekran okuyucunun okuyacağı bir isim verir; aria-hidden="true" ise bir süs öğesini ekran okuyucudan gizler.

Kaynak ve doğrulama notu

“Erişilebilirlik Temelleri” dersi için doğrulama odağı Görseller ve alternatif metin ile Dekoratif görsel arasındaki ilişkinin örnekler üzerinde tutarlı çalışmasıdır. Örnekler standart HTML, CSS ve tarayıcı JavaScript’i yaklaşımıyla hazırlanmıştır. Sayfa yalnız görsel olarak değil; klavye kullanımı, odak sırası, mobil görünüm ve anlamlı başlık yapısı açısından da kontrol edilmelidir.

Sonraki ders

Proje: Kişisel Proje Sayfası