CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Özet - Erişilebilir widget

HTML kursu · Uzman · Ders 6/39

Tüm ARIA teknikleriyle erişilebilir bir widget iskeleti yazarsın.

Bu grupta öğrendiklerimiz

Bu grupta erişilebilirlik için beş tekniği gördün:

  • WCAG ilkeleri: POUR çerçevesi
  • Klavye navigasyonu: tabindex ve focus yönetimi
  • Canlı bölge: aria-live ile duyuru
  • Dialog: <dialog> ve aria-modal
  • Başlık hiyerarşisi: h1-h6 düzeni

Şimdi bunları bir araya getiren bir erişilebilir widget iskeleti yazacaksın.

Uygulama Erişilebilir widget iskeletini yaz

Body içine bir <h1> yaz (örnek: 'Ayarlar'). Sonra bir <button id="opener" aria-haspopup="dialog"> ekle (metni dolu olsun). Sonra bir <dialog aria-modal="true" aria-labelledby="dlg-title"> ekle. dialog içine bir <h2 id="dlg-title"> (metin dolu), bir <p role="status" aria-live="polite"> (metin dolu) ve bir <button> (metin dolu) koy. dialog'u kapat.

Örnek çözümü göster 
<body>
  <h1>Ayarlar</h1>
  <button id="opener" aria-haspopup="dialog">Profil düzenle</button>
  <dialog aria-modal="true" aria-labelledby="dlg-title">
    <h2 id="dlg-title">Profili sıfırla</h2>
    <p role="status" aria-live="polite">Değişiklikler kaydedildi</p>
    <button>Kapat</button>
  </dialog>
</body>

Kendini test et

  1. Tekniği amacıyla eşleştir

    aria-live
    Dinamik içerik duyurusu
    aria-modal
    Modal olduğunu bildirir
    tabindex="0"
    Klavye akışına sokar
    h1
    Ana sayfa başlığı
    alt
    Görsel için alternatif metin

  2. Açıcı butonun özniteliğini yaz

    <button id="open-btn" ____="dialog">Aç</button>
    Cevabı göster 
    <button id="open-btn" aria-haspopup="dialog">Aç</button>

  3. Hangi teknik, ekran okuyucu için dinamik içeriği duyurur?

    • tabindex
    • h1 başlık
    • alt metin
    • aria-live canlı bölge
    Cevabı göster

    aria-live canlı bölge — Doğru. aria-live canlı bölge, dinamik içerik değişimini ekran okuyucuya duyurur.

Uzman bölümündeki tüm dersler

1 İleri erişilebilirlik

  1. WCAG ilkeleri
  2. Klavye navigasyonu
  3. Live regions
  4. Dialog ve modal
  5. Heading outline
  6. Özet - Erişilebilir widget

2 İleri ARIA desenleri

  1. ARIA roles
  2. States ve properties
  3. Grid ve tree
  4. Tabs ve accordion
  5. Menu ve menubar
  6. Özet - Erişilebilir tabpanel

3 Proje: Performanslı sayfa

  1. Proje: Performanslı sayfa
  2. Kritik kaynak sırası
  3. Görsel optimizasyonu
  4. Şablon ve noscript
  5. Proje sonu - Performans sayfası

4 Uluslararasılaştırma

  1. Lang ve dir
  2. Hreflang stratejisi
  3. Bidi ve bdo
  4. Rtl uyumlu işaretleme
  5. Çok dilli SEO
  6. Özet - Çok dilli sayfa

5 Proje: Güvenli sayfa

  1. Proje: Güvenli form sayfası
  2. Rel noopener
  3. CSP meta
  4. Referrer policy
  5. Proje sonu - Güvenli sayfa

6 İleri web bileşenleri

  1. Custom element registry
  2. Slot ve shadow boundary
  3. Declarative shadow DOM
  4. Form-associated custom element
  5. AOM ve accessibility tree
  6. Özet - Bileşen kütüphanesi iskeleti

7 Uzman finali

  1. Meydan okuma - Erişilebilir dialog
  2. Meydan okuma - ARIA tabpanel
  3. Meydan okuma - Çok dilli RTL
  4. Meydan okuma - Güvenlik paketi
  5. Meydan okuma - Uzman projesi