Çoğu geliştirici, modern web'in standart biçimlendirme dili olan HyperText Markup Language (HTML)'i bilir. Ancak Accessible Rich Internet Applications (ARIA) (eski adıyla WAI-ARIA) hakkında daha az bilgi sahibi olabilirsiniz: ARIA nedir, nasıl kullanılır, ne zaman ve ne zaman kullanılmamalıdır?
HTML ve ARIA, dijital ürünlerin erişilebilir olmasında önemli bir rol oynar. Özellikle ekran okuyucular gibi yardımcı teknolojiler (AT) söz konusu olduğunda bu durum daha da belirginleşir. Her ikisi de içeriği Braille veya metin okuma gibi alternatif bir biçime dönüştürmek için kullanılır.
ARIA'nın kısa tarihçesini, neden önemli olduğunu ve ne zaman, nasıl kullanmanın en iyi olacağını inceleyin.
ARIA'ya giriş
ARIA, ilk olarak 2008'de Web Erişilebilirliği Girişimi (WAI) grubu tarafından geliştirildi. Bu grup, interneti yöneten ve düzenleyen, kapsamlı Dünya Çapında Ağ Birliği'nin (W3C) bir alt kümesidir.
ARIA gerçek bir programlama dili değildir ancak erişilebilirliği artırmak için HTML öğelerine ekleyebileceğiniz bir dizi özelliktir. Bu özellikler, modern tarayıcılarda bulunan erişilebilirlik API'lerini kullanarak rol, durum ve özelliği yardımcı teknolojilere iletir. Bu iletişim, erişilebilirlik ağacı üzerinden gerçekleşir.
Erişilebilir Zengin İnternet Uygulamaları Paketi olan WAI-ARIA, web içeriklerini ve web uygulamalarını engelli kullanıcılar için daha erişilebilir hale getirmenin bir yolunu tanımlar. Bu özellikle HTML, JavaScript ve ilgili teknolojilerle geliştirilen dinamik içerik ve gelişmiş kullanıcı arayüzü kontrollerinde yardımcı olur."
WAI grubu
Erişilebilirlik ağacı
ARIA, erişilebilirlik ağacının bölümlerini değiştirerek, ortaya çıkararak ve artırarak AT kullananlar için daha iyi bir deneyim sunmak amacıyla yanlış veya eksik kodu değiştirir.
Erişilebilirlik ağacı, tarayıcı tarafından oluşturulur ve standart Belge Nesne Modeli (DOM) ağacına dayanır. DOM ağacı gibi, erişilebilirlik ağacı da tüm işaretleme öğelerini, özellikleri ve metin düğümlerini temsil eden nesneler içerir. Erişilebilirlik ağacı, platforma özgü erişilebilirlik API'leri tarafından da yardımcı teknolojilerin anlayabileceği bir gösterim sağlamak için kullanılır.
ARIA tek başına bir öğenin işlevini veya görsel görünümünü değiştirmez. Bu nedenle, yalnızca AT kullanıcıları ARIA içeren ve içermeyen dijital ürünler arasındaki farkları fark edebilir. Bu, geliştiricilerin bir öğeyi mümkün olduğunca erişilebilir hale getirmek için uygun kod ve stil değişikliklerini yapmaktan tek başına sorumlu olduğu anlamına da gelir.
ARIA'nın üç ana özelliği vardır: roller, özellikler ve durumlar/değerler.
Roller, bir öğenin sayfada veya uygulamada ne olduğunu ya da ne yaptığını tanımlar.
<div role="button">Self-destruct</div>
Özellikler, bir nesnenin özelliklerini veya ilişkilerini ifade eder.
<div role="button" aria-describedby="more-info">Self-destruct</div>
<div id="more-info">This page will self-destruct in 10 seconds.</div>
Durumlar ve değerler, öğeyle ilişkili mevcut koşulları veya veri değerlerini tanımlar.
<div role="button" aria-describedby="more-info" aria-pressed="false">
Self-destruct
</div>
<div id="more-info">
This page will self-destruct in 10 seconds.
</div>
ARIA'nın üç öğesi de tek bir kod satırında kullanılabilir ancak bu zorunlu değildir. Bunun yerine, nihai erişilebilirlik hedefinize ulaşana kadar ARIA rollerini, özelliklerini ve durumlarını ya da değerlerini katmanlayın. ARIA'yı kod tabanınıza doğru şekilde dahil etmek, AT kullanıcılarının web sitenizi, uygulamanızı veya diğer dijital ürünlerinizi başarılı ve eşitlikçi bir şekilde kullanmak için ihtiyaç duydukları tüm bilgilere sahip olmalarını sağlar.
Chrome Geliştirici Araçları, kısa süre önce erişilebilirlik ağacının tamamını görme olanağı sunarak geliştiricilerin kodlarının erişilebilirliği nasıl etkilediğini anlamalarını kolaylaştırdı.
ARIA ne zaman kullanılır?
2014'te W3C, HTML5 önerisini resmen yayınladı. Bu sürümle birlikte <main>, <header>, <footer>, <aside>, <nav> gibi önemli öğelerin ve hidden ile required gibi özelliklerin eklenmesi de dahil olmak üzere bazı büyük değişiklikler yapıldı. Bu yeni HTML5 öğeleri ve özellikleri, tarayıcı desteğinin artmasıyla birlikte ARIA'nın belirli bölümlerini artık daha az önemli hale getiriyor.
Tarayıcı, ARIA eşdeğeri olan örtülü role sahip bir HTML etiketini desteklediğinde genellikle öğeye ARIA eklemeniz gerekmez. Ancak ARIA, HTML'nin hiçbir sürümünde bulunmayan birçok rol, durum ve özellik içerir. Bu özellikler şu an için kullanılmaya devam edebilir.
Bu noktada, en önemli soruya geliyoruz: ARIA'yı ne zaman kullanmalısınız? Neyse ki WAI grubu, öğeleri nasıl erişilebilir hale getireceğinize karar vermenize yardımcı olmak için ARIA'nın beş kuralını geliştirdi.
1. kural: ARIA kullanmayın
Evet, doğru okudunuz. Bir öğeye ARIA eklemek, öğeyi daha erişilebilir hale getirmez. WebAIM Million yıllık erişilebilirlik raporu, ARIA'nın bulunduğu ana sayfalarda, ARIA'nın bulunmadığı ana sayfalara kıyasla ortalama% 70 daha fazla hata tespit edildiğini ortaya koydu. Bu durumun temel nedeni, ARIA özelliklerinin uygun şekilde uygulanmamasıdır.
Bu kuralın istisnaları vardır. Bir HTML öğesi erişilebilirlik desteğine sahip olmadığında ARIA gereklidir. Bunun nedeni, tasarımın belirli bir HTML öğesine izin vermemesi veya istenen özelliğin ya da davranışın HTML'de kullanılamaması olabilir. Ancak bu durumlar nadir olmalıdır.
Yapmayın: Rol atama.
<a role="button">Submit</a>
Yapılması gerekenler: Anlamsal öğeyi kullanın.
<button>Submit</button>
Şüpheye düştüğünüzde semantik HTML öğelerini kullanın.
2. Kural: HTML'ye (gereksiz) ARIA eklemeyin
Çoğu durumda, HTML öğeleri olduğu gibi iyi çalışır ve bunlara ek ARIA eklenmesi gerekmez. Hatta ARIA kullanan geliştiriciler, etkileşimli öğeler söz konusu olduğunda öğelerin işlevsel olması için genellikle ek kod eklemek zorunda kalır.
Yapmayın: Yanıltıcı bir rol atamayın.
<h2 role="tab">Heading tab</h2>
Yapılması gerekenler: Rolleri doğru şekilde atayın.
<div role="tab"><h2>Heading tab</h2></div>
HTML öğelerini amaçlandığı şekilde kullandığınızda daha az çalışarak daha iyi performans gösteren kodlar elde edebilirsiniz.
3. Kural: Klavyeyle gezinmeyi her zaman destekleyin
Tüm etkileşimli (devre dışı bırakılmamış) ARIA kontrollerine klavye ile erişilebilmelidir. Normalde klavye odağı almayan ve odaklanması gereken tüm öğelere tabindex= "0" ekleyebilirsiniz. Olası klavye odağı sırası sorunlarını önlemek için mümkün olduğunca pozitif tam sayılarla sekme dizinleri kullanmaktan kaçının.
Yapılmaması gerekenler: tabindex eklemeyin.
<span role="button" tabindex="1">Submit</span>
Yapılacaklar: tabindex özelliğini "0" olarak ayarlayın.
<span role="button" tabindex="0">Submit</span>
Elbette, bu durumda imkanınız varsa gerçek bir <button> öğesi kullanın.
4. Kural: Odaklanılabilir öğeleri gizlemeyin
Odaklanılması gereken öğelere (tabindex= "0" içeren öğeler dahil) role= "presentation" veya aria-hidden= "true" eklemeyin. Bu rolleri ve durumları öğelere eklediğinizde, yardımcı teknolojiye bu öğelerin önemli olmadığı ve atlanması gerektiği mesajı gönderilir. Bu durum, kafa karışıklığına yol açabilir veya bir öğeyle etkileşimde bulunmaya çalışan kullanıcıları rahatsız edebilir.
Yapmayın: Odaklanılabilir öğeleri gizlemeyin.
<div aria-hidden="true"> <button>Submit</button> </div>
Yapılması gerekenler: Odaklanılabilir öğeleri kullanıma sunun
<div> <button>Submit</button> </div>
5. kural: Etkileşimli öğeler için erişilebilir adlar kullanın
Etkileşimli bir öğenin amacı, kullanıcı onunla nasıl etkileşimde bulunacağını bilmeden önce iletilmelidir. Tüm öğelerin, AT cihazlarını kullanan kişiler için erişilebilir özellikli bir adı olduğundan emin olun.
Erişilebilir adlar, bir öğeyle çevrili içerik (<a> durumunda), alternatif metin veya etiket olabilir.
Aşağıdaki kod örneklerinin her birinde erişilebilir özellikli ad "Kırmızı deri botlar"dır.
<!-- A plain link with text between the link tags. -->
<a href="shoes.html">Red leather boots</a>
<!-- A linked image, where the image has alt text. -->
<a href="shoes.html"><img src="shoes.png" alt="Red leather boots"></a>
<!-- A checkbox input with a label. -->
<input type="checkbox" id="shoes">
<label for="shoes">Red leather boots</label>
Bir öğenin erişilebilir özellikli adını kontrol etmenin birçok yolu vardır. Örneğin, Chrome Geliştirici Araçları'nı kullanarak erişilebilirlik ağacını inceleyebilir veya ekran okuyucuyla test edebilirsiniz.
HTML'de ARIA
HTML öğelerini tek başına kullanmak en iyi uygulama olsa da belirli durumlarda ARIA öğeleri eklenebilir. Örneğin, çevresel kısıtlamalar nedeniyle daha yüksek düzeyde AT desteğine ihtiyaç duyan desenlerde veya tüm tarayıcılar tarafından tam olarak desteklenmeyen HTML öğeleri için yedek yöntem olarak ARIA'yı HTML ile eşleştirebilirsiniz.
Elbette, HTML'de ARIA'yı uygulama önerileri vardır. En önemlisi: Varsayılan HTML rollerini geçersiz kılmayın, gereksiz tekrarları azaltın ve istenmeyen yan etkilerin farkında olun.
Bazı örneklere göz atın.
Yapmayın: Yanlış rolü atama.
<a role="heading">Read more</a>
Yapılacaklar: Doğru rolü ve ek bir bağlantı açıklaması kullanın.
<a aria-label="Read more about some awesome article title">Read More</a>
Yapmayın: Gereksiz bir rol eklemeyin.
<ul role="list">...</ul>
Yapılacaklar: Gereksiz bilgileri azaltın.
<ul>...</ul>
Yapılmaması gerekenler: Olası yan etkileri gözden kaçırmayın.
<details> <summary role="button">more information</summary> ... </details>
Yapılacaklar: Yan etkileri ele alın.
<details> <summary>more information</summary> ... </details>
ARIA'nın karmaşıklıkları
ARIA karmaşıktır ve kullanırken her zaman dikkatli olmanız gerekir. Bu dersteki kod örnekleri oldukça basit olsa da erişilebilir özel desenler oluşturmak kısa sürede karmaşık bir hale gelebilir.
Klavye etkileşimleri, dokunmatik arayüzler, AT/tarayıcı desteği, çeviri ihtiyaçları, çevresel kısıtlamalar, eski kod ve kullanıcı tercihleri gibi birçok şeye dikkat etmek gerekir. Biraz kodlama bilgisi, yanlış kullanıldığında zararlı veya sadece can sıkıcı olabilir.
Bu uyarıların dışında, dijital erişilebilirlik her şeyin veya hiçbir şeyin olmadığı bir durum değildir. Bu gibi bazı belirsiz alanlara izin veren bir spektrumdur. Duruma bağlı olarak birden fazla kodlama çözümü "doğru" kabul edilebilir. Önemli olan, öğrenmeye, test etmeye ve dijital dünyamızı herkes için daha açık hale getirmeye çalışmaya devam etmenizdir.