ARIA ve yerel olmayan HTML anlamlarına giriş
Ş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 kontrol edebilirsiniz. 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.