Web erişilebilirliği temelleri
Ekran okuyucu ve klavyeyle sayfaları kendin dener; WCAG ilkelerine göre metin, renk, form ve gezinme sorunlarını bulup düzeltirsin.
Seviye 201 · 16 ders · 15 pratik lab
Dersler
Kimin için, neden
- Erişilebilirlik kimin için: engel türleri ve durumlar
- WCAG’nin dört ilkesi ve düzeyleri
- Dünyada erişilebilirlik yasaları ve standartları
- Ekran okuyucuyla ilk gezinti
- Kısa görev: bir siteyi yalnız klavyeyle kullan
İçerik ve görünüm
- Metin alternatifleri
- Başlıklar ve yer işaretleriyle gezinme
- Renk karşıtlığı ve yalnız renge dayanmamak
- Okunur içerik: dil, sade anlatım, bağlantı metni
- Kısa görev: bir sayfanın karşıtlık hatalarını düzelt
Etkileşim
- Klavye erişimi ve odak sırası
- Atlama bağlantıları
- Erişilebilir formlar: etiket, hata, yönerge
- ARIA’nın ilk kuralı: önce yerel HTML
- Otomatik denetim araçları ve sınırları
- Bitirme görevi: bir kamu hizmeti sayfasını erişilebilir yap
Pratik lablar
- Ekran okuyucuyla randevu almayı dene: Bir sağlık ocağının randevu sayfasında ekran okuyucuyla randevu almayı dene ve takıldığın üç yeri not et.
- Başlık ve bölge yapısını onar: Başlık seviyelerini atlayan ve bölge işareti olmayan bir belediye duyuru sayfasını ekran okuyucuyla gezilebilir yap.
- Grafiğe metin alternatifi hazırla: Bir enerji tüketimi grafiği için kısa alt metin ve ayrıntılı veri tablosundan oluşan erişilebilir bir alternatif hazırla.
- Yalnızca renkle verilen bilgiyi düzelt: Zorunlu alanları sadece kırmızıyla gösteren bir formu simge ve metin ekleyerek renk körü kullanıcılar için anlaşılır yap.
- Karmaşık duyuruyu sade dille yeniden yaz: Bir belediyenin uzun cümleli, jargon dolu su kesintisi duyurusunu kısa cümleler, doğru lang özniteliği ve açıklanmış kısaltmalarla yeniden yaz.
- Marka paletini kontrast kurallarına uydur: Bir kafe zincirinin altı renkli paletinden metin, buton ve odak halkası için AA'yı geçen renk eşleşmeleri türet.
- Uzun menülü sayfaya atla bağlantısı ekle: Uzun menüsü olan bir sayfaya klavye odağında görünen ve doğrudan içeriğe atlatan bir bağlantı ekle.
- Karışık odak sırasını düzelt: CSS ile yeri değiştirilmiş ve pozitif tabindex verilmiş bir formun mantıksız odak sırasını düzelt.
- Tıklanabilir div'leri gerçek butona çevir: Tıklanabilir div'lerle yapılmış bir kontrol panelini klavye, odak ve rol açısından tam çalışır hale getir.
- Placeholder yerine görünür etiket koy: Yalnızca placeholder kullanan bir üyelik formunda yazmaya başlayınca kaybolan ipuçlarını görünür ve bağlı etiketlere çevir.
- Hata mesajlarını alanlara bağla: Hataları sayfa başında toplayan bir formda her hatayı ilgili alana bağla ve özet listeden alana bağlantı ver.
- Ödeme seçeneklerini ekran okuyucuya aç: Teslimat ve ödeme seçenekleri olan bir ödeme sayfasını fieldset, legend ve açıklamalarla ekran okuyucuda anlaşılır kıl.
- Otomatik araçla ilk taramayı yap: Bir kütüphane sitesinin ana sayfasını otomatik denetim aracıyla tarayıp bulguları önem sırasına koy.
- Gereksiz ARIA'yı temizle: Yerel HTML öğelerine yanlış roller verilmiş bir sayfada ARIA'yı temizleyip doğru öğeleri kullan.
- Aracın kaçırdığı sorunları bul: Otomatik taramadan temiz çıkan bir bilet sayfasını elle test ederek aracın göremediği en az üç sorunu bul.
Kurs hakkında
Ekran okuyucu ve klavyeyle sayfaları kendin dener; WCAG ilkelerine göre metin, renk, form ve gezinme sorunlarını bulup düzeltirsin.
Ne öğreneceksin
- Kimin için, neden
- İçerik ve görünüm
- Etkileşim
Ön koşullar
Aynı yolun 101 düzeyindeki kurslarını bitirmiş olmak ya da o konuları biliyor olmak yeterlidir.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 201 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.