ARIA'ya giriş

ARIA ve yerel olmayan HTML anlamlarına giriş

Alice Boxhall

Dave Gash

Meggin Kearney

Şimdiye kadar yerel HTML öğelerini kullanmanızı öneririz çünkü bu öğeler sayesinde desteği ve yerleşik anlamları vardır. Ancak bazen basit bir düzeni ve yerel HTML'yi yeterli bulmaz. Örneğin, şu anda standartlaştırılmış bir HTML öğesi olan pop-up menü. Kuzey " bilgi sahibi olması gerekir." şeklinde bir uyarıda bulunabilir.

Bu derste, HTML'nin kullanamadığı anlamların ifade eder.

Web Erişilebilirlik İnisiyatifi'nin Erişilebilir Zengin İnternet Uygulamaları spesifikasyonu (WAI-ARIA veya sadece ARIA), yönetilemeyen erişilebilirlik sorunları olan alanları birbirine bağlamak için uygundur yerel HTML ile. Sizin için bir alan adının, erişilebilirlik ağacına dönüştürülür. Örnek olarak örneğine bakalım.

Aşağıdaki snippet'te, özel onay kutusu olarak liste öğesi kullanıyoruz. İlgili içeriği oluşturmak için kullanılan CSS "onay kutusu" sınıfı, öğeye gerekli görsel özellikleri verir.

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

Bu seçenek görme engelli kullanıcılar için uygun olsa da ekran okuyucu herhangi bir bildirim sunmaz. Öğenin bir onay kutusu olması amaçlandığından az gören kullanıcılar bir unsur olabilir.

Ancak ARIA özelliklerini kullanarak öğeye eksik bilgileri verebiliriz. Böylece ekran okuyucu düzgün yorumlayabilir. Buraya role ve Öğeyi açıkça onay kutusu ve onay kutusu olarak tanımlamak için aria-checked özellikleri varsayılan olarak işaretli olduğunu belirtin. Liste öğesi erişilebilirlik ağacı ve ekran okuyucu bunu doğru bir şekilde onay kutusu olarak bildirir.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

ARIA, standart DOM erişilebilirlik ağacını değiştirerek ve genişleterek çalışır.

Her ne kadar ARIA, kullanıcılarımızın deneyimini ağacını görürseniz, yaptığı tek şey budur. ARIA elementin doğal davranışını iyileştirmeyen; bu hedeflerin öğesine odaklanılabilir veya klavye etkinlik işleyicileri sağlayabilir. Bu hâlâ görevi görebilir.

Varsayılan değeri yeniden tanımlamaya gerek olmadığını anlambilim. Kullanımından bağımsız olarak standart bir HTML <input type="checkbox"> öğesi için ek bir role="checkbox" ARIA özelliği gerekmez. doğru bir şekilde duyurulmasıdır.

Ayrıca, belirli HTML öğelerinin, ARIA'nın roller ve nitelikler kullanılabilir. Örneğin, standart bir <input type="text"> öğesine ek rol/özellik uygulanmayabilir.

HTML'de ARIA spesifikasyonuna bakın konulu videomuzu izleyin.

ARIA'nın sunduğu diğer özelliklere göz atalım.

ARIA neler yapabilir?

Onay kutusu örneğinde de gördüğünüz gibi ARIA, mevcut öğe anlamlarını değiştirebilir veya yerel anlamların olmadığı öğelere anlambilim ekleyebilirsiniz. Ayrıca menü veya sekme gibi HTML'de hiç var olmayan semantik kalıpları ifade eder panelini açın. ARIA, genellikle mümkün olmayan widget türü öğeleri oluşturmamıza olanak tanır. kullanabilirsiniz.

• Örneğin, ARIA yalnızca yardımcı teknoloji API'lerine erişebilir.
  

<button aria-label="screen reader only label"></button>

• ARIA, CANNOT TRANSLATE kontrol eden özel bir kaydırma çubuğu gibi standart üst/alt bağlantı belirli bir bölge.

    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>

• Ayrıca ARIA, sayfanın bazı bölümlerini "canlı" o yüzden hemen yardımcı teknolojilerle donatılmıştır.

    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

ARIA sisteminin temel bölümlerinden biri roller koleksiyonudur. Rol belirli bir kullanıcı arayüzü için bir steno göstergesidir. desen. ARIA, role aracılığıyla kullanabileceğimiz kalıplar sözlüğü sağlar özelliğini kullanabilirsiniz.

Önceki örnekte role="checkbox" özelliğini uyguladığımızda, öğenin "onay kutusunu" izlemesi gereken yardımcı teknoloji desen. O durumu, kontrol edilmiş durumda (işaretli veya işaretli olmalıdır) ve fare ya da boşluk tuşu kullanılarak durumun değiştirilebilmesini Tıpkı standart bir HTML onay kutusu öğesi gibi.

Aslında klavye etkileşimleri ekran okuyucuda bu kadar belirgin bir özel bir widget oluştururken, widget'ın otomatik olarak role özelliği her zaman tabindex ile aynı yerde uygulanır özelliği; Böylece klavye etkinliklerinin doğru yere gidilmesini ve doğru yere odaklandığında bu özelliğin rolü doğru şekilde aktarılır.

ARIA spesifikasyonunda bir role özelliği ve ilişkili ARIA için olası değerlerin sınıflandırması birlikte kullanılabilecek çeşitli özellikler vardır. Bu en iyisi ARIA rol ve özelliklerinin nasıl çalıştığına dair kesin bilgi kaynağı ve bunların tarayıcılar tarafından desteklenen bir şekilde nasıl kullanılabileceğini yardımcı teknolojiler.

Ancak spesifikasyon çok yoğun. daha yakın bir başlangıç noktası olarak ARIA Yazma uygulamaları dokümanı Bu bölümde, mevcut ARIA rollerini kullanmayla ilgili en iyi uygulamalar ve özellikler.

ARIA, HTML5'teki seçenekleri genişleten önemli nokta rolleri de sunar. Görüntüleyin Önemli Rol Tasarımı Kalıplar bakın.