Androverse

ARIA nedir?

Anlamı, kullanım örnekleri ve kararları. Kavramı işin içinde açıyoruz.

Erişilebilirlik sözlüğünden

Kısa cevap

ARIA, arayüz öğelerinin rolünü, durumunu ve ilişkilerini yardımcı teknolojilere bildirmeye yarayan erişilebilirlik özellikleridir.

Nerede işine yarar?

Önce uygun yerel HTML öğesi seçilir; gereken bilgi zaten o öğede varsa yeniden rol verilmez. Özel kontrollerde rol kadar klavye davranışı ve ad da önemlidir. aria-expanded gibi durumlar, ekrandaki gerçek davranışla birlikte güncellenmelidir.

Bir cümlede uygulaması

Açılır menüyü açan düğmede aria-expanded değerini menünün açık durumuyla eşlemek.

Neyle karıştırılmamalı?

ARIA bir öğeye otomatik klavye davranışı kazandırmaz; davranış ayrıca uygulanır ve test edilir.

Bir çalışma senaryosu

Bir rol, davranışın yerine geçmez

Bir açılır içerik kontrolü düşünelim. Kullanıcı başlığa basıyor, altında açıklama açılıyor. Görsel olarak açık ve kapalı hali belirgin olabilir; yardımcı teknoloji kullanan kişinin de kontrolün adını ve durumunu anlayabilmesi gerekir. ARIA, gerekli rol, durum ve özellik bilgisini erişilebilirlik ağacına aktarmaya yarayan nitelikler sunar. Ancak açılma, kapanma veya klavye davranışını kendiliğinden yazmaz; bu davranışın uygun biçimde uygulanması gerekir.

Örnek bir hatada geliştirici sıradan bir kapsayıcıya düğme rolü verir, fakat klavye etkileşimini eklemez. Ekran okuyucu bu öğeyi düğme olarak duyurabilirken klavye kullanan kişi beklediği işlemi yapamaz. W3C APG’nin vurguladığı ilke burada önemlidir: yanlış kullanılan ARIA, verdiği bilgi ile gerçek davranış arasında uyumsuzluk yaratabilir. Uygun yerel HTML öğesi varsa önce onun sağladığı anlam ve davranış değerlendirilir.

Bu nedenle ARIA’yı sayfaya serpiştirilecek erişilebilirlik süsleri gibi kullanmayız. Her niteliğin hangi bilgi eksikliğini tamamladığını sorarız. Kontrolün görünür adıyla erişilebilir adı uyumlu mu? Açık durum değişince aktarılan durum da güncelleniyor mu? Gizli içerik yanlışlıkla erişilebilir kalıyor mu? Bu sorular, kodun yalnız sözdizimi açısından doğru olmasından daha geniş bir davranış incelemesi gerektirir.

Tasarım ile geliştirme arasında da bu bilginin paylaşılması gerekir. Bir menünün yalnız görüntüsü teslim edilirse hangi öğenin kontrol, hangisinin bağlantı ve hangisinin başlık olduğu belirsiz kalabilir. Tasarım notuna davranış ve durum eklemek, uygun örüntünün seçilmesini kolaylaştırır. Her özel bileşen yeni bir sorumluluk getirir: adı, rolü, durumu, klavye kullanımı ve odak yönetimi aynı deneyimin parçaları olarak düşünülmelidir.

Canlı güncellenen içerikte de ölçülü davranmak gerekir. Her küçük görsel değişikliği yardımcı teknolojiye duyurmak, kullanıcının okumaya çalıştığı bilgiyi sürekli bölebilir. Önemli işlem sonucu ile dekoratif değişikliği ayır; neyin ne zaman bildirileceğini kullanılan örüntü ve gerçek ihtiyaç üzerinden belirle. Bir formun sonucu, arama filtresinin etkisi veya hata durumu farklı öncelikler taşıyabilir. Burada amaç mümkün olan en çok mesajı üretmek değil, kişinin gerekli değişimi anlamasını sağlamaktır. Duyurulan bilgi görünür içerikle tutarlı olmalı ve kullanıcıyı ilgisiz teknik ayrıntılarla meşgul etmemelidir. Dinamik arayüzün sözlü karşılığı da tasarımın bir parçasıdır.

HTML semantiği ve ARIA

Yerel anlam

HTML’nin anlamlı öğeleri içerik ve kontroller için yerleşik bir temel sunar. Düğme, bağlantı, başlık ve form alanı gibi öğeler doğru amaçla kullanıldığında tarayıcıya ve yardımcı teknolojilere bilgi verir. Görsel stiller bu öğeleri markaya göre şekillendirebilir; anlamlı yapıyı kaybetmek zorunda değildir.

Gerekli ek bilgi

ARIA, yerel yapı tek başına yeterli olmadığında veya dinamik durumların aktarılması gerektiğinde kullanılabilir. Bu kullanım gerçek davranışla birlikte tasarlanır. Gereksiz roller eklemek, doğru yerel anlamı geçersiz kılabilir veya çelişkili bilgi oluşturabilir. En çok nitelik eklenen bileşen, otomatik olarak en erişilebilir bileşen değildir.

Yerel HTML davranışını korumak

ARIA, erişilebilirlik ağacına ad, rol ve durum bilgisi taşır; eksik etkileşimi kendi başına yazmaz. Bir öğeye düğme rolü vermek klavye davranışını otomatik eklemez. Uygun yerel HTML öğesi kullanılabiliyorsa önce onun sağladığı davranış değerlendirilir.

  • Önce doğru HTML öğesini seç.
  • Görünür etiket ile erişilebilir adı uyumlu tut.
  • Açık, seçili ve devre dışı durumlarını gerçek davranışla eşleştir.

Daha fazla ARIA daha iyi mi?

Hayır. Yanlış veya gereksiz ARIA yerel anlamı bozabilir. Bir metin alanının adı ve bir açılır kontrolün durumu gibi gerçek ihtiyaçlar karşılanmalı; uygulama ekran okuyucu ve klavyeyle denenmelidir.

Karar masası

İşin içinde sorulacaklar.

Her öğeye aria-label eklemek yararlı mı?

Hayır. Görünür ve doğru ilişkilendirilmiş metin zaten yeterli ad sağlayabilir. Gereksiz ek etiketler farklı veya tekrar eden bir anlam oluşturabilir. Önce kontrolün erişilebilir adının nereden geldiğini anla. Görsel simge tek başına eylemi ifade ediyorsa bir ad gerekebilir, fakat bu ad gerçek eylemi anlatmalıdır. Kullanıcının gördüğü ve yardımcı teknolojinin duyurduğu bilgi arasında gereksiz fark yaratmaktan kaçın.

Gizli bir panel için neye bakılır?

Panel kapalıyken içindeki kontrollerin yanlışlıkla odak alıp almadığı ve yardımcı teknolojiler tarafından nasıl sunulduğu değerlendirilir. Kullanılan gizleme yöntemi, animasyon ve odak davranışı birlikte düşünülmelidir. Bir niteliği ekleyip bütün sorunun çözüldüğünü varsayma. Panel açıldığında ve kapandığında hangi kontrolün kullanılacağı açık olmalı. Özellikle odak panel içindeyken kapanması halinde anlamlı bir dönüş planlanmalıdır.

APG örneğini kopyalamak yeterli mi?

Örnekler bir örüntünün nasıl çalışabileceğini öğretir, ancak ürünün bağlamına doğrudan uygunluk garantisi vermez. İçerik, tarayıcı, yardımcı teknoloji ve özel davranışlar sonucu etkileyebilir. Örneğin hangi sorunu çözdüğünü ve sınırlarını oku. Ürüne uyarlarken klavye davranışını veya durum ilişkilerini yanlışlıkla kaldırmamaya dikkat et. Sonuç gerçek bileşen üzerinde değerlendirilmelidir; kaynakta bir örneğin bulunması uygulamanın doğru olduğunu tek başına kanıtlamaz.

Sıra sende

Bir açılır kontrolün sözünü kontrol et

Sitedeki içerik açan bir kontrolü seç. Görünürde ne yaptığını, kodda hangi role sahip olduğunu ve yardımcı teknolojiye hangi durumun aktarıldığını ayrı notlara yaz. Üçü aynı davranışı anlatmalı.

Çalışma adımları

ARIA bir erişilebilirlik etiketi değil, gerçek arayüz davranışı hakkında verilen bilgidir. Bu bilgi doğru, gerekli ve davranışla uyumlu olduğunda işe yarar. Yerel HTML anlamı sağlam bir başlangıçtır.

Siteyi geliştirmek ve çalışmalarımızın sonucunu ölçmek için çerez kullanmak istiyoruz. Analiz ve pazarlama çerezleri yalnızca izin verirsen çalışır. Gizlilik ve çerezler