ARIA ve HTML

Çoğu geliştirici, modern uygulamalarımızın standart biçimlendirme dilini bilir. web, HyperText Biçimlendirme Dili (HTML). Ancak bazı durumlarda Erişilebilir Rich Internet Uygulamaları (ARIA) (eski adıyla WAI-ARIA): ne olduğu, nasıl kullanıldığı ve ne zaman ve ne zaman kullanılmadığı.

HTML ve ARIA, dijital ürünlerin erişilebilir hale gelmesinde önemli rol oynar. özellikle de ekran okuyucular gibi yardımcı teknolojiler (AT) söz konusu olduğunda. Her ikisi de içeriği Braille veya Metin Okuma (TTS).

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

ARIA'ya giriş

ARIA ilk olarak 2008'de Web Accessibility Initiative (WAI) grubu: ve bu hizmetlerin yönetiminde ve ticari dallarında faaliyet gösteren World Wide Web Consortium'un (W3C) interneti düzenler.

ARIA gerçek bir programlama dili değildir ancak ekleyebileceğiniz bir dizi özellik içerir Erişilebilirliklerini artırmak için HTML öğeleri. Bu özellikler erişilebilirlik API'leri aracılığıyla yardımcı teknolojilere rol, durum ve özellik açısından yeni tarayıcılarda belirir. Bu iletişimin temelinde, ağacı.

"WAI-ARIA, Erişilebilir Rich Internet Applications Suite, web'in güvenli ve erişilebilir içerikleri ve web uygulamalarını engelli kişiler için daha erişilebilir hale getirmeyi amaçlıyoruz. Google dinamik içerik ve gelişmiş kullanıcı arayüzü denetimleri konusunda yardımcı olur. geliştirilme sürecidir."

WAI grubu

Erişilebilirlik ağacı

ARIA, kullanıcılara daha iyi bir deneyim sunmak için yanlış veya eksik kodda değişiklik yapar. erişilebilirlik özelliklerinin parçalarını değiştirerek, kullanıma sunarak ve artırarak, AT'yi kullananlar için ağacı.

Erişilebilirlik ağacı, tarayıcı tarafından oluşturulur ve Belge Nesne Modeli (DOM) ağacı. Tıpkı DOM ağacı gibi, erişilebilirlik ağacı tüm işaretleme öğelerini, özellikleri ve metni temsil eden nesneleri içerir düğüm. Erişilebilirlik ağacı, platforma özel erişilebilirlik tarafından da kullanılır Yardımcı teknolojilerin anlayabileceği bir temsil sağlayan API'ler.

ARIA, bir öğenin işlevini veya görsel görünümünü tek başına değiştirmez. Dolayısıyla, aşağıdaki özelliklere sahip dijital bir ürün arasında yalnızca AT kullanıcıları ARIA ve onsuz bir tane. Bu aynı zamanda tek başına geliştiricilerin de yapmak için uygun kod ve stil değişikliklerini erişilebilir hale getirmek istiyoruz.

ARIA'nın üç ana ö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 nesneyle ilgili özellikleri veya ilişkileri 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/değerler, geçerli koşulları veya öğeyle ilişkilendirilen 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 gereklidir. Bunun yerine, şu işlemi yapana kadar ARIA rollerini, özelliklerini ve durumlarını/değerlerini: emin olmanız gerekir. ARIA'nın Böylece, AT kullanıcılarının ihtiyaç duydukları tüm bilgilere web sitenizi, uygulamanızı veya diğer dijital ürünlerinizi başarılı ve adil şekilde kullanmanız gerekir.

Chrome Geliştirici Araçları, kısa bir süre önce, erişilebilirlik ağacının tamamını inceleyin Böylece geliştiricilerin, kodlarının nasıl etkili olduğunu daha kolay anlamalarını erişilebilirlik.

ARIA ne zaman kullanılır?

2014'te W3C, HTML5 önerisini resmi olarak yayınladı. Birlikte <main> gibi önemli nokta öğelerinin eklenmesi de dahil olmak üzere bazı büyük değişiklikler, <header>, <footer>, <aside>, <nav> ve hidden ve required. Mevcut sürümle birlikte bu yeni HTML5 öğeleri ve tarayıcı desteği artırıldığında, ARIA'nın belirli bölümleri artık daha az kritik önem taşıyor.

Tarayıcı, ARIA ile dolaylı role sahip bir HTML etiketini desteklediğinde genellikle öğeye ARIA eklenmesine gerek yoktur. Ancak ARIA şu anda hiçbir ülkede bulunmayan birçok rol, eyalet ve özellik içeriyor. HTML sürümü için de geçerlidir. Bu özellikler şimdilik kullanışlı olmaya devam ediyor.

Bu da bizi asıl soruya getiriyor: ARIA'yı ne zaman kullanmalısınız? Neyse ki WAI grubu, karar vermenize yardımcı olacak, ARIA'nın beş kuralı erişilebilir hale getirmektir.

1. Kural: ARIA'yı kullanma

Evet, doğru okudunuz. Bir öğeye ARIA eklemek, erişilebilir hale getirebilirsiniz. WebAIM Million yıllık erişilebilirlik raporu ARIA içeren ana sayfaların ARIA olmayanlara kıyasla ortalama% 70 daha fazla algılanan hata oranı Bunun nedeni, ARIA özelliklerinin yanlış uygulanmasıdır.

Bu kuralın istisnaları vardır. Bir HTML öğesi olduğunda ARIA gerekir adlı platformun erişilebilirlik desteği yok. Bunun nedeni, tasarımın belirli bir HTML öğesine izin vermiyor veya istenen özellik/davranış kullanılabilir. Ancak bu durumların nadir olarak karşımıza çıkacağından emin olabilirsiniz.

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

<button>Submit</button>

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

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

Çoğu durumda, HTML öğeleri kullanıma hazırdır ve bunlara ek ARIA eklenmesi gerekmez. Hatta ARIA kullanan geliştiricilerin, etkileşimli öğelerde bu öğeleri işlevsel hale getirmek için genellikle ek kod eklemeleri gerekir.

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

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

HTML öğelerini amaçlanır.

3. Kural: Klavyeyle gezinmeyi her zaman destekleyin

Tüm etkileşimli (devre dışı bırakılmamış) ARIA kontrolleri klavyeden erişilebilir olmalıdır. Siz tabindex= "0" öğesini ekleyebilir odaklanılması gereken öğelerin normalde klavye odağını alın. Sekme dizinlerini pozitif tam sayılar klavyenin odaklanma sırası sorunlarını önlemek için mümkün olduğunca sık kullanın.

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

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

4. Kural: Odaklanabilir öğeleri gizleme

Gerekli öğelere role= "presentation" veya aria-hidden= "true" eklemeyin (tabindex= "0" içeren öğeler dahil) odak noktası olacak. Eklediğinizde bu rolleri/durumları öğelere uygularken, AT'ye bunların önemli değildir ve bunları atlamaktır. Bu da kafa karışıklığına veya Kullanıcıların bir öğeyle etkileşimde bulunmaları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

Etkileşimli öğenin amacı kullanıcıya aktarılmadan önce nasıl etkileşim kuracaklarını bilmelerini sağlar. Tüm öğelerin bir AT kullananlar için erişilebilir ad cihazlar.

Erişilebilir adlar, bir öğeyle çevrili içerikler olabilir ( <a>), alternatif metin veya bir etiket.

Aşağıdaki kod örneklerinin her biri için erişilebilir ad "Kırmızı deri " der.

<!-- 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 bir ekran okuyucuyla test edebilirsiniz.

HTML'de ARIA

HTML öğelerinin tek başlarına kullanılması en iyi uygulama olsa da ARIA öğeleri bazı durumlarda eklenebilir. Örneğin, ARIA ile HTML'yi çevresel etkenler nedeniyle daha yüksek düzeyde AT desteği gerektiren veya tamamen kısıtlanmayan HTML öğeleri için bir yedek yöntem tüm tarayıcılar tarafından desteklenir.

Elbette ARIA'nın HTML. En önemlisi: URL'leri geçersiz kılmayın varsayılan HTML rollerini oluşturmayı deneyin, fazlalığı azaltın ve istenmeyen yan etkilere karşı dikkatli olun.

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şık özellikleri

ARIA karmaşık bir yapı olduğundan bu özelliği kullanırken her zaman dikkatli olmanız gerekir. Araç kod örneklerinin kullanımı oldukça basittir. özel kalıplar hızla karmaşık hale gelebilir.

Aşağıdakiler dahil ancak bunlarla sınırlı olmamak üzere dikkat edilmesi gereken birçok nokta vardır: klavye etkileşimleri, dokunmatik arayüzler, AT/tarayıcı desteği, çeviri ihtiyaçları, çevresel kısıtlamalar, eski kodlar ve kullanıcı tercihleri olabilir. Az kodlama bilgisi zararlı olabilir, hatta sadece can sıkıcı olabilir sağlayabilir. Kodunuzu basit tutmayı unutmayın.

Bu uyarıları bir kenara koyarsak dijital erişilebilirlik "ya hep ya hiç" tarzında değildir. Bu, bunun gibi bazı gri alanlara izin veren bir spektrumdur. Birden fazla kodlama çözümü "doğru", duruma göre değişir. Önemli olan öğrenmeye, test etmeye ve sunduğumuz herkese daha açık bir dijital dünya olduğunu görüyoruz.

Öğrendiklerinizi sınayın

ARIA ve HTML bilginizi test edin