Erişilebilir arayüz bileşenleri
Menü, sekme, kalıcı pencere, akordeon ve bildirim gibi bileşenleri ARIA kalıplarına ve klavye beklentilerine uygun yazıp ekran okuyucuyla sınarsın.
Seviye 301 · 15 ders · 12 pratik lab
Dersler
Ad ve durum
- Erişilebilir ad nasıl hesaplanır
- Roller, durumlar ve özellikler
- Erişilebilirlik ağacını incelemek
- Kısa görev: simge düğmelerine ad ver
Bileşen kalıpları
- Aç-kapa ve akordeon
- Sekmeler ve ok tuşlarıyla gezinme
- Kalıcı pencere: odak tuzağı ve odağın geri dönüşü
- Menü düğmesi
- Otomatik tamamlayan arama kutusu
- Canlı bölgeler ve bildirimler
- Kısa görev: erişilemeyen bir açılır pencereyi onar
Dinamik arayüz
- Tek sayfalık uygulamada sayfa değişimi ve odak
- Karmaşık veri tabloları
- Sürükle-bırakın klavye alternatifi
- Bitirme görevi: erişilebilir bir rezervasyon sihirbazı
Pratik lablar
- Adsız denetimleri ağaçta bul: Bir metin düzenleyici araç çubuğunun erişilebilirlik ağacını inceleyip adı olmayan denetimleri listele.
- Anahtarların durumunu ARIA ile ilet: Açık/kapalı ve seçili durumu yalnızca CSS sınıfıyla gösteren anahtarlara aria-pressed ve aria-checked ekle.
- Çelişen ad kaynaklarını çöz: aria-label, aria-labelledby ve görünür metni çelişen bir kart listesinde hesaplanan adları görünür metinle uyumlu hale getir.
- SSS akordeonunu erişilebilir yap: Sıkça sorulan sorular akordeonuna buton, aria-expanded ve aria-controls ekleyerek klavyeyle kullanılır hale getir.
- Ürün sekmelerine ok tuşu gezinmesi ekle: Ürün ayrıntı sekmelerine roving tabindex ile ok tuşu, Home ve End gezinmesi ekle.
- Hesap menüsü butonunu baştan kur: Hesap menüsünü açan bir butonu klavye, odak yönetimi ve Escape ile kapanma dahil eksiksiz kur.
- Sepet bildirimini canlı bölgeyle duyur: Ürün sepete eklenince çıkan görsel bildirimi ekran okuyucuya da aria-live ile duyur.
- Arama önerilerini klavyeyle seçtir: Şehir arama kutusunun önerilerini aria-activedescendant ile okla gezilebilir ve duyurulur yap.
- Gürültülü duyuruları dengele: Her saniye güncellenen bir piyasa paneli ekran okuyucuyu boğuyor; canlı bölgeleri öncelik ve sıklığa göre yeniden düzenle.
- Ders programı tablosuna başlık ilişkisi ekle: İki satırlı başlığı olan bir ders programı tablosuna scope ve headers ilişkilerini ekle.
- Sürükle bırakmaya klavye yolu ekle: Bir görev panosunda kartları taşımak için butonlu ve sesli duyurulu bir klavye alternatifi yap.
- Yönetim panelinde odak kaybını düzelt: Filtre uygulanınca ve kayıt silinince odağı kaybeden tek sayfa yönetim panelinde odağı mantıklı yerlere taşı.
Kurs hakkında
Menü, sekme, kalıcı pencere, akordeon ve bildirim gibi bileşenleri ARIA kalıplarına ve klavye beklentilerine uygun yazıp ekran okuyucuyla sınarsın.
Ne öğreneceksin
- Ad ve durum
- Bileşen kalıpları
- Dinamik arayüz
Ön koşullar
Aynı yolun 101 ve 201 düzeyindeki konularına hâkim olmalısın.
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 301 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.