WCAG Odaklı Erişilebilir Web Geliştirme Eğitimi
WCAG Odaklı Erişilebilir Web Geliştirme Eğitimi
Eğitim Hakkında
Dijital dünyayı herkes için daha erişilebilir hale getirmek, yasal standartlar ve daha kapsayıcı olma vizyonunun güçlenmesi ile önemli gündemlerden birisi haline geldi. Eğitimimiz, erişilebilir web siteleri ve uygulamaları geliştirmek isteyen herkes için bir başlangıç noktası sunuyor.
Ön Koşul
Bu eğitimin herhangi bir ön koşulu yoktur.
Eğitim İçeriği
- Giriş ve Neden Erişilebilirlik?, Erişilebilirlik Nedir?
- Neden Erişilebilir Web Geliştirmeliyiz? (Yasal, Etik, Ekonomik Faydaları)
- Engellilik Modelleri (Tıbbi, Sosyal, İnsan Hakları) ve Web Erişilebilirliği
- WCAG Nedir? (Prensiplerine Genel Bakış: Algılanabilir, Çalıştırılabilir, Anlaşılabilir, Sağlam)
- HTML'e Giriş ve Anlamsal Yapı, HTML Nedir?
- Temel HTML Belge Yapısı (<html>, <head>, <body>)
- Anlamsal HTML Kullanımı (<header>, <footer>, <nav>, <main>, <article>, <section>, <aside>)
- Başlık Etiketleri (<h1>'den <h6>'ye) ve Hiyerarşi
- Paragraf (<p>) ve Metin Biçimlendirme (<strong>, <em>)
- Modül 1 Sonu Uygulama: Basit bir "Hakkımızda" veya "İletişim" sayfası oluşturmaları istenecektir. Sayfada anlamsal HTML etiketleri (<header>, <main>, <footer>, <p>, <h1>-<h6>) doğru bir şekilde kullanılmalı ve mantıklı bir başlık hiyerarşisi oluşturulmalıdır.
- Metin Erişilebilirliği, Bağlantı Metinleri (<a>) ve Erişilebilirlik
- Liste Öğeleri (<ul>, <ol>, <li>), Tablolar (<table>, <thead>, <tbody>, <tr>, <th>, <td>) ve Erişilebilirlik (Basit Tablolar)
- Kısaltmalar (<abbr>) ve Alıntılar (<blockquote>)
- Görsel ve İşitsel Medya Erişilebilirliği
- Görseller (<img>) için Alternatif Metinler (Alt Text)
- Anlamsal ve Dekoratif Görseller Arasındaki Fark
- Arka Plan Görselleri ve Erişilebilirlik
- Video ve Ses İçerikleri için Erişilebilirlik (Altyazı, Transkript, Sesli Betimleme Kavramları)
- Modül 2 Sonu Uygulama: Modül 1'de oluşturdukları sayfayı geliştirerek, içerisinde anlamlı bağlantılar, bir liste (örneğin hizmetler listesi) ve en az bir görsel bulunduran bir sayfa oluşturmaları istenecektir. Görsel için doğru alt metni eklenmeli ve bağlantı metinleri açıklayıcı olmalıdır.
- Klavye Erişilebilirliğine Giriş
- Neden Klavye Erişilebilirliği Önemli?
- Odak Yönetimi (tabindex kullanımı ve riskleri)
- Odak Görünürlüğü (Focus Indicators)
- Mantıksal Sekme Sırası (Tab Order)
- Atlanan Bağlantılar (Skip Links)
- Form Erişilebilirliği
- Form Etiketleri (<label>) ve İlişkilendirme (for, id)
- Giriş Alanları (<input>, <textarea>, <select>)
- Doğrulama ve Hata Mesajları
- Alan Kümeleri (<fieldset>, <legend>)
- Modül 3 Sonu Uygulama: Modül 2'de oluşturdukları sayfayı geliştirerek, içerisinde bir iletişim formu (isim, e-posta, mesaj alanları ve gönder butonu) eklemeleri istenecektir. Formdaki tüm alanlar label ile doğru bir şekilde ilişkilendirilmeli ve form klavye ile tamamen erişilebilir olmalıdır. Odak sırası mantıklı olmalıdır.
- Renk ve Kontrast Erişilebilirliği
- Renk Kullanımının Önemi (Bilgiyi sadece renkle iletmeme)
- WCAG Kontrast Oranları (AA ve AAA Düzeyi)
- Kontrast Kontrol Araçları
- Görsel İçerikte Renk Körlüğü İçin Duyarlılık
- ARIA'ya Giriş ve Temel Kullanım
- ARIA Nedir? (Amacı ve Ne Zaman Kullanılmalı)
- ARIA Rolleri (Örnekler: role="navigation", role="button")
- ARIA Özellikleri (aria-label, aria-labelledby, aria-describedby, aria-haspopup)
- ARIA Durumları (aria-expanded, aria-hidden, aria-current)
- "No ARIA is better than Bad ARIA" Prensibi
- Modül 4 Sonu Uygulama: Modül 3'te oluşturdukları formu ve genel sayfayı renk ve kontrast açısından iyileştirmeleri istenecektir. Ayrıca, sayfaya basit bir etkileşimli öğe (örneğin, bir açılır menü veya bir bilgi kutusu) ekleyerek temel ARIA özelliklerini (örn. aria-hidden veya aria-expanded) doğru bir şekilde uygulamaları beklenecektir.
- Erişilebilirlik Test Yöntemleri
- Binclusive gibi Otomatik Test Araçları
- Manuel Testler (Klavye ile Gezinme, Ekran Okuyucu Testleri - Temel Giriş)
- Kullanıcı Testleri (Engelli Bireylerle Çalışma Önemi)
- Tarayıcı Geliştirici Araçları ile Erişilebilirlik Kontrolleri
- Duyarlı Tasarım ve Erişilebilirlik
- Duyarlı Tasarımın Erişilebilirliğe Etkisi
- Mobil Erişilebilirlik Dikkat Edilmesi Gerekenler
- İçerik Düzeninin ve Okunabilirliğin Korunması
- Erişilebilirlik Trendleri ve Gelecek
Kazanımlar
-
Erişilebilirliğin ne anlama geldiğini ve neden önemli olduğunu öğrenebilecek, WCAG prensiplerini ve anlamsal HTML kullanımını kavrayabileceksiniz.
-
Web sitelerindeki metin, görsel ve videoları herkesin rahatça kullanabilmesi için gerekli erişilebilirlik tekniklerini uygulayabileceksiniz.
-
Formlar, butonlar ve menüler gibi etkileşimli öğelerin klavye ile sorunsuz çalışmasını sağlayabileceksiniz.
-
Renk ve kontrastın erişilebilirlik üzerindeki etkisini anlayabilecek, WCAG kontrast gereksinimlerini karşılayabilecek ve ARIA’yı doğru şekilde kullanabileceksiniz.
-
Geliştirdiğiniz sayfaları farklı araçlarla test edebilecek, manuel testlerin önemini kavrayabilecek ve duyarlı tasarımın erişilebilirliğe katkısını değerlendirebileceksiniz.
Hedef Kitle
- Web geliştiricileri
- Tasarımcılar (UI/UX)
- Product Designer'lar
- Product Manager'lar
Sertifika
Eğitimlerimize %80 oranında katılım gösterilmesi ve eğitim müfredatına göre uygulanacak sınav/projelerin başarıyla tamamlanması durumunda, eğitimin sonunda dijital ve QR kod destekli “BT Akademi Başarı Sertifikası” verilmektedir.
SEKTÖRÜN GÜVENDİĞİ ÇÖZÜM ORTAĞI
BT Akademi'yi tercih eden 4.000'den fazla kurum yanılmıyor.
