ARIA ve yerel olmayan HTML anlamlarına giriş
Şimdiye kadar, size odaklanma, klavye desteği ve yerleşik anlamlar sağladıkları için yerel HTML öğelerinin kullanılmasını öneriyoruz. Ancak, basit bir düzen ve yerel HTML'nin yeterli olmayacağı durumlar da vardır. Örneğin, şu anda çok yaygın bir kullanıcı arayüzü yapısı olan pop-up menüsü için standartlaştırılmış bir HTML öğesi yoktur. Ayrıca, "kullanıcının bunu en kısa sürede bilmesi gerekiyor" gibi anlamsal bir özellik sağlayan bir HTML öğesi de yoktur.
O halde bu derste, HTML'nin kendi başına ifade edemeyeceği anlamları nasıl ifade edeceğinizi keşfedeceğiz.
Web Accessibility Initiative'in Erişilebilir Zengin İnternet Uygulamaları spesifikasyonu (WAI-ARIA veya sadece ARIA), yerel HTML ile yönetilemeyen erişilebilirlik sorunları bulunan alanları birbirine bağlamak için idealdir. Bu özellik, bir öğenin erişilebilirlik ağacına çevrilme şeklini değiştiren özellikleri belirtmenize olanak tanır. Bir örneğe göz atalım.
Aşağıdaki snippet'te liste öğesini bir tür özel onay kutusu olarak kullanıyoruz. CSS "onay kutusu" sınıfı, öğeye gerekli görsel özellikleri sağlar.
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
Bu, gören kullanıcılar için sorunsuz bir şekilde kullanılabiliyor olsa da ekran okuyucular, öğenin onay kutusu olarak tasarlandığına dair herhangi bir gösterge vermez. Bu nedenle, az gören kullanıcılar öğeyi tamamen gözden kaçırabilir.
Ancak ekran okuyucunun öğeyi doğru şekilde yorumlayabilmesi için ARIA özelliklerini kullanarak öğeye eksik bilgileri verebiliriz. Öğeyi açıkça onay kutusu olarak tanımlamak ve varsayılan olarak işaretli olduğunu belirtmek için role
ve aria-checked
özelliklerini ekledik. Liste öğesi artık erişilebilirlik ağacına eklenecek
ve bir ekran okuyucu bunu doğru şekilde onay kutusu olarak bildirecektir.
<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 büyüterek çalışır.
![Standart DOM erişilebilirlik ağacı.](https://web.dev/static/articles/semantics-aria/image/the-standard-dom-accessib-f1377436c8cbd.jpg?authuser=5&hl=tr)
![ARIA artırılmış erişilebilirlik ağacı.](https://web.dev/static/articles/semantics-aria/image/the-aria-augmented-access-a0705fd66fc51.jpg?authuser=5&hl=tr)
ARIA, sayfadaki herhangi bir öğe için erişilebilirlik ağacını hassas bir şekilde (hatta kökten) değiştirmemize izin verse de, değişen tek şey budur. ARIA, öğenin doğal davranışlarını artırmaz; öğeyi odaklanılabilir hale getirmez veya klavye etkinliği işleyicileri vermez. Bu, geliştirme görevimizin hala bir parçasıdır.
Varsayılan anlamları yeniden tanımlamaya gerek olmadığını anlamak önemlidir. Standart HTML <input type="checkbox">
öğesinin, kullanımından bağımsız olarak doğru şekilde duyurulması için ek bir role="checkbox"
ARIA özelliği gerekmez.
Ayrıca, belirli HTML öğelerinin ARIA rollerinin ve özelliklerinin kendileriyle ilgili kısıtlamaları olduğunu unutmayın. Örneğin, standart bir <input
type="text">
öğesine herhangi bir ek rol/özellik uygulanmamış olabilir.
Daha fazla bilgi için HTML spesifikasyonunda ARIA bölümüne bakın.
ARIA'nın sunduğu diğer özelliklere göz atalım.
ARIA neler yapabilir?
Onay kutusu örneğinde gördüğünüz gibi ARIA mevcut öğe semantiğini değiştirebilir veya yerel anlamlar içermeyen öğelere anlamlar ekleyebilir. Ayrıca bir menü veya sekme paneli gibi HTML'de hiç var olmayan anlamsal kalıpları da ifade edebilir. ARIA, çoğu zaman, düz HTML ile mümkün olmayacak widget türünde öğeler oluşturmamıza olanak tanır.
- Örneğin, ARIA yalnızca yardımcı teknoloji API'lerine açık olan fazladan etiket ve açıklama metni ekleyebilir.
<button aria-label="screen reader only label"></button>
- ARIA, belirli bir bölgeyi kontrol eden özel bir kaydırma çubuğu gibi standart üst/alt bağlantıyı genişleten öğeler arasındaki anlamsal ilişkileri ifade edebilir.
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- ARIA, sayfanın bazı bölümlerini "canlı" hale getirerek değişiklik olduğunda yardım teknolojisini anında bilgilendirir.
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
ARIA sisteminin temel özelliklerinden biri, roller toplamasıdır. Erişilebilirlik terimlerindeki bir rol, belirli bir kullanıcı arayüzü kalıbı için bir kısayol göstergesi işlevi görür. ARIA, tüm HTML öğelerinde role
özelliği aracılığıyla kullanabileceğimiz kalıplar sözlüğü sağlar.
Önceki örnekte role="checkbox"
öğesini uyguladığımızda, yardım teknolojisine öğenin "onay kutusu" kalıbına uyması gerektiğini bildiriyorduk. Diğer bir deyişle, öğenin işaretli ya da işaretli olmayan bir duruma sahip olacağını ve bu durumun, tıpkı standart bir HTML onay kutusu öğesinde olduğu gibi fare veya boşluk çubuğu kullanılarak değiştirilebileceğini garanti ediyoruz.
Aslında, klavye etkileşimleri ekran okuyucu kullanımında çok belirgin bir şekilde öne çıktığından, özel widget oluştururken role
özelliğinin her zaman tabindex
özelliğiyle aynı yere uygulandığından emin olmak çok önemlidir. Bu, klavye etkinliklerinin doğru yere gitmesini ve odak bir öğeye ulaştığında rolünün doğru bir şekilde aktarılmasını sağlar.
ARIA spesifikasyonu, role
özelliği için olası değerlerin ve bu rollerle birlikte kullanılabilecek ilişkili ARIA özelliklerinin bir sınıflandırmasını açıklar. Bu, ARIA rol ve özelliklerinin birlikte nasıl çalıştığı ve tarayıcılar ile yardımcı teknolojiler tarafından desteklenen bir şekilde nasıl kullanılabileceği hakkında nihai bilgi sağlayan en iyi kaynaktır.
![Kullanılabilir tüm ARIA rollerinin listesi.](https://web.dev/static/articles/semantics-aria/image/a-list-all-available-ar-64bce9c9d6.jpg?authuser=5&hl=tr)
Ancak spesifikasyon oldukça kapsamlıdır. Mevcut ARIA rollerini ve özelliklerini kullanmayla ilgili en iyi uygulamaların incelendiği ARIA Yazma Uygulamaları dokümanı ile başlamak daha ulaşılabilir.
ARIA, HTML5'teki seçenekleri genişleten önemli nokta rolleri de sunar. Daha fazla bilgi için Önemli Nokta Rolleri Tasarım Kalıpları spesifikasyonuna bakın.