ARIA ve HTML

Çoğu geliştirici, modern web'imizin standart biçimlendirme dili olan HyperText Biçimlendirme Dili (HTML) konusuna aşinadır. Ancak Erişilebilir Zengin İnternet Uygulamaları (ARIA) (eski adıyla WAI-ARIA): ne olduğu, nasıl kullanıldığı ve ne zaman kullanılmayacağı hakkında daha az bilgi sahibi olabilirsiniz.

Özellikle ekran okuyucular gibi yardımcı teknolojiler (AT) söz konusu olduğunda, HTML ve ARIA dijital ürünleri erişilebilir hale getirmede önemli rol oynar. Her ikisi de içeriği Braille veya Metin-Konuşma (TTS) gibi alternatif bir biçime dönüştürmek için kullanılır.

ARIA'nın kısa bir geçmişini, neden önemli olduğunu, ne zaman ve nasıl kullanabileceğini inceleyelim.

ARIA'ya giriş

ARIA ilk olarak 2008 yılında, interneti yöneten ve düzenleyen kapsamlı World Wide Web Consortium'un (W3C) alt kümesi olan Web Accessibility Initiative (WAI) grubu tarafından geliştirilmiştir.

ARIA gerçek bir programlama dili değildir. Ancak HTML öğelerine erişilebilirliklerini artırmak için ekleyebileceğiniz bir dizi özelliktir. Bu özellikler, modern tarayıcılarda bulunan erişilebilirlik API'leri aracılığıyla yardımcı teknolojilere rol, durum ve özellik 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. Özellikle HTML, JavaScript ve ilgili teknolojilerle geliştirilen dinamik içerik ve gelişmiş kullanıcı arayüzü kontrolleri konusunda yardımcı olur."

WAI grubu

Erişilebilirlik ağacı

ARIA, erişilebilirlik ağacının bazı kısımlarını değiştirerek, ortaya çıkararak ve artırarak AT kullananlara daha iyi bir deneyim sunmak için yanlış veya eksik kodları değiştirir.

Erişilebilirlik ağacı, tarayıcı tarafından ve standart Belge Nesne Modeli (DOM) ağacına göre oluşturulur. DOM ağacında olduğu 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ı, yardımcı teknolojilerin anlayabileceği bir temsil sağlamak için platforma özel erişilebilirlik API'leri tarafından da kullanılır.

ARIA tek başına öğelerin işlevselliğini veya görsel görünümünü değiştirmez. Bu nedenle, yalnızca AT kullanıcıları, ARIA'sı olan ve olmayan dijital ürünler arasındaki farklılıkları fark eder. Bu aynı zamanda, bir öğeyi mümkün olduğunca erişilebilir hale getirmek için uygun kod ve stil değişikliklerinden yalnızca geliştiricilerin sorumlu olduğu anlamına da gelir.

ARIA'nın üç temel özelliği roller, özellikler ve durumlar/değerlerdir.

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>

Eyaletler/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 gerekli değildir. Bunun yerine, nihai erişilebilirlik hedefinizi tamamlayana kadar ARIA rollerini, özelliklerini ve durumları/değerlerini katmanlar halinde ekleyin. 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şit bir şekilde kullanmak için ihtiyaç duydukları tüm bilgilere sahip olmasını sağlar.

Chrome Geliştirici Araçları, kısa süre önce erişilebilirlik ağacının tamamını görmenin bir yolunu geliştirmiştir. Bu yöntem, geliştiricilerin kodlarının erişilebilirliği nasıl etkilediğini anlamalarını kolaylaştırır.

ARIA ne zaman kullanılır?

2014'te, W3C, HTML5 önerisini resmi olarak yayınladı. Bu geçişle birlikte, <main>, <header>, <footer>, <aside> ve <nav> gibi önemli nokta öğelerinin yanı sıra hidden ve required gibi özelliklerin eklenmesi de dahil olmak üzere bazı büyük değişiklikler yapıldı. Bu yeni HTML5 öğeleri ve özellikleriyle, artan tarayıcı desteğiyle birlikte ARIA'nın belirli bölümleri artık daha az kritik.

Tarayıcı, ARIA eşdeğeri olan örtülü role sahip bir HTML etiketini desteklediğinde genellikle ARIA'nın öğeye eklenmesine gerek yoktur. Bununla birlikte ARIA, hiçbir HTML sürümünde bulunmayan birçok rol, durum ve özellik içerir. Bu özellikler şimdilik kullanışlı olmaya devam edecektir.

Bu da bizi asıl soruya getiriyor: ARIA'yı ne zaman kullanmalısınız? Neyse ki WAI grubu, öğeleri nasıl erişilebilir yapacağınıza karar vermenize yardımcı olmak için ARIA'nın beş kuralını geliştirmiştir.

1. Kural: ARIA kullanma

Evet, doğru okudunuz. Bir öğeye ARIA eklemek, doğası gereği öğeyi daha erişilebilir hale getirmez. WebAIM Million yıllık erişilebilirlik raporunda, ARIA içeren ana sayfaların tespit edilen hata sayısı, ARIA'yı içermeyen sayfalara kıyasla ortalama% 70 daha fazladır. Bunun nedeni, ARIA özelliklerinin yanlış uygulanmasıdır.

Bu kuralın istisnaları vardır. Bir HTML öğesinde erişilebilirlik desteği olmadığında ARIA gerekir. Bunun nedeni, tasarımın belirli bir HTML öğesine izin vermemesi veya istenen özelliğin/davranışın HTML'de mevcut olmaması olabilir. Ancak bu tür durumlar nadirdir.

<a role="button">Submit</a>

<button>Submit</button>

Şüpheye düştüğünüzde anlamsal HTML öğelerini kullanın.

2. Kural: ARIA'yı HTML'ye eklemeyin (gereksiz)

Çoğu durumda, HTML öğeleri kullanıma hazır olarak sunulur ve bunlara ek ARIA eklenmesi gerekmez. Öyle ki, ARIA kullanan geliştiriciler genellikle etkileşimli öğeler söz konusu olduğunda öğeleri işlevsel hale getirmek için ek kod eklemelidirler.

<h2 role="tab">Heading tab</h2>

<div role="tab"><h2>Heading tab</h2></div>

HTML öğelerini istenen şekilde kullandığınızda daha az iş yapın ve daha iyi performans gösteren kodlar kullanın.

3. Kural: Klavyeyle gezinmeyi her zaman destekle

Tüm etkileşimli (devre dışı bırakılmamış) ARIA denetimleri klavyeden erişilebilir olmalıdır. Normalde klavye odağını almayan herhangi bir öğeye odaklanması gereken tüm öğelere tabindex= "0" ekleyebilirsiniz. Olası klavye odaklanma sırası sorunlarını önlemek için mümkün olduğunda pozitif tamsayılarla sekme dizinlerini kullanmaktan kaçının.

<span role="button" tabindex="1">Submit</span>

<span role="button" tabindex="0">Submit</span>

4. Kural: Odaklanabilir öğeleri gizleme

tabindex= "0" içeren öğeler de dahil olmak üzere, odaklanılması gereken öğelere role= "presentation" veya aria-hidden= "true" eklemeyin. Bu rolleri/durumları öğelere eklediğinizde, AT'ye bu öğelerin önemli olmadığını ve bunları atlaması gerektiğini belirten bir mesaj gönderilir. Bu durum, kafa karışıklığına yol açabilir veya kullanıcıların bir öğeyle etkileşimde olmaya çalışmasını engelleyebilir.

<div aria-hidden="true"><button>Submit</button></div>

<div><button>Submit</button></div>

5. Kural: Etkileşimli öğeler için erişilebilir adlar kullanın

Kullanıcıya etkileşimli öğenin amacı, onunla nasıl etkileşim kuracağını anlamadan önce iletilmesi gerekir. Tüm öğelerin AT cihazı kullanan kişiler için erişilebilir bir adı olduğundan emin olun.

Erişilebilir adlar; bir öğe (<a> durumunda), alternatif metin veya etiketle çevrelenmiş içerik olabilir.

Aşağıdaki kod örneklerinin her biri için erişilebilir 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 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 öğeyi ekran okuyucuyla test edebilirsiniz.

HTML'de ARIA

HTML öğelerini tek başlarına kullanmak en iyi uygulama olsa da ARIA öğeleri belirli durumlarda eklenebilir. Örneğin, çevresel kısıtlamalar nedeniyle daha yüksek düzeyde AT desteği gerektiren kalıplarda ARIA'yı HTML ile veya tüm tarayıcılar tarafından tam olarak desteklenmeyen HTML öğeleri için yedek yöntem olarak eşleyebilirsiniz.

Elbette, HTML'de ARIA uygulama önerileri de vardır. En önemlisi: Varsayılan HTML rollerini geçersiz kılmayın, gereksiz olanları azaltmayın ve istenmeyen yan etkilere dikkat edin.

Bazı örneklere göz atalım.

<a role="heading">Read more</a>

<a aria-label="Read more about some awesome article title">Read More</a>

<ul role="list">...</ul>

<ul>...</ul>

<details>
  <summary role="button">more information</summary>
  ...
</details>

<details>
  <summary>more information</summary>
  ...
</details>

ARIA'nın karmaşıklıkları

ARIA karmaşık bir yapı olduğundan her zaman dikkatli olmanız gerekir. Bu dersteki kod örnekleri oldukça basit olsa da, erişilebilir özel kalıplar oluşturmak kısa sürede karmaşık hale gelebilir.

Dikkat edilmesi gereken pek çok şey vardır. Bunlar arasında klavye etkileşimleri, dokunma arayüzleri, AT/tarayıcı desteği, çeviri ihtiyaçları, ortam kısıtlamaları, eski kod ve kullanıcı tercihleri bulunur. Biraz kodlama bilgisi, doğru şekilde kullanılmadığı takdirde zararlı veya sadece can sıkıcı olabilir. Kodunuzu basit tutmayı unutmayın.

Bu uyarılar bir yana, dijital erişilebilirlik "ya hep ya hiç" bir durum değildir. Bunun gibi bazı gri alanlara izin veren bir spektrumdur. Duruma bağlı olarak birden çok kodlama çözümü "doğru" olarak görülebilir. Önemli olan öğrenmeye, test etmeye ve dijital dünyamızı herkese daha açık hale getirmeye devam etmenizdir.

Öğrendiklerinizi sınayın

ARIA ve HTML bilginizi test edin