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

Erişilebilirliğe Giriş ve Temel HTML Yapıları

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>)

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 ve Medya Erişilebilirliği
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ı)

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

Etkileşimli Bileşenler ve Klavye Erişilebilirliği
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>)

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

Renk, Kontrast ve ARIA Uygulamaları
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

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 (ör

Erişilebilirlik Testi ve İleri Konular
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ğe Giriş ve Temel HTML Yapıları: Erişilebilirliğin ne anlama geldiğini ve neden önemli olduğu, WCAG prensiplerini ve anlamsal HTML kullanmanın yollarını,

Metin ve Medya Erişilebilirliği: Web sitenizdeki metinleri, görselleri ve videoları herkesin rahatça kullanabilmesi için neler yapılabileceğini,

Etkileşimli Bileşenler ve Klavye Erişilebilirliği: Formlar, butonlar ve menüler gibi etkileşimli öğelerin klavye ile de sorunsuz çalışmasını sağlamanın inceliklerini,

Renk, Kontrast ve ARIA Uygulamaları: Renk ve kontrastın erişilebilirlik üzerindeki etkisini anlayacak, WCAG'nin kontrast gereksinimlerini karşılamayı ve ARIA'yı ne zaman ve nasıl kullanılacağını,

Erişilebilirlik Testi ve İleri Konular: Geliştirdiğiniz sayfaları farklı araçlarla nasıl test edileceğini, manuel testlerin önemini ve duyarlı tasarımın erişilebilirliğe artısını hedefler.

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.