WAI-ARIA: Arayüz Bileşenlerini Yardımcı Teknolojilere Anlatmak

ARIA nedir?

ARIA (Accessible Rich Internet Applications), W3C'nin Web Erişilebilirlik Girişimi (WAI) tarafından geliştirilen bir teknik belirtimdir. Dinamik içeriği ve gelişmiş arayüz bileşenlerini ekran okuyucu gibi yardımcı teknolojilere anlatabilmek için HTML öğelerine eklenen rol, durum ve özellik nitelikleri tanımlar.

Modern web uygulamaları sekmeler, açılır menüler, kaydırıcılar, modal pencereler ve canlı güncellenen bölgeler gibi bileşenler üretir. Tarayıcı bir div öğesinin görsel olarak sekme gibi göründüğünü bilmez; ARIA bu bilgiyi erişilebilirlik ağacı aracılığıyla yardımcı teknolojiye iletir.

ARIA görünümü ya da davranışı değiştirmez. Bir öğenin klavye ile kullanılabilmesini, odağı almasını ya da tıklamaya yanıt vermesini sağlamaz; yalnızca ne olduğunu ve hangi durumda olduğunu anlatır. Bu fark, ARIA'nın doğru kullanımının en önemli noktasıdır.

Roller, durumlar ve özellikler

ARIA temel olarak şu kavramlarla çalışır. Roller bir öğenin ne olduğunu belirtir: button, dialog, tab, menu, slider ve progressbar gibi bileşen rolleri; banner, navigation, main gibi sayfa yapısı rolleri.

Özellikler öğenin niteliğini anlatır: aria-label bir öğeye görünmeyen bir ad verir, aria-labelledby adı başka bir öğeden alır, aria-describedby açıklayıcı metne bağlar, aria-controls kontrol ilişkisini belirtir.

Durumlar anlık değişen bilgiyi taşır: aria-expanded bir menünün açık olup olmadığını, aria-checked bir seçeneğin işaretli olup olmadığını, aria-selected seçili sekmeyi, aria-hidden öğenin yardımcı teknolojilerden gizlenmesini bildirir. Durumlar etkileşim sırasında script tarafından güncellenmelidir; sabit bırakılan bir durum yanıltıcıdır.

Bir de canlı bölgeler (aria-live) vardır; sayfa yenilenmeden güncellenen mesajların ekran okuyucu tarafından duyurulmasını sağlar.

ARIA'nın temel ilkesi: önce yerel HTML

W3C'nin ARIA yazım rehberi, ARIA'sız kullanımın hatalı ARIA'dan iyi olduğunu vurgular. ARIA yardımcı teknolojiler için bir tür CSS gibi çalışır; yanlış kullanıldığında arayüzü ekran okuyucu kullanıcısına yanlış tanıtır.

Bu nedenle ilk tercih, anlamı zaten taşıyan yerel HTML öğeleridir: düğme için button, bağlantı için a, form alanı için input, başlık için h öğeleri. Yerel öğeler odak, klavye etkileşimi ve rol bilgisini kendiliğinden getirir. Div üzerine role=button yazmak ise bir söz vermektir: ENTER ve boşluk tuşuyla çalışma, odak alabilme gibi davranışları kodlamak size düşer.

ARIA'ya yalnızca yerel HTML'in anlatamadığı durumlarda başvurulur: özel bir sekme paneli, ağaç görünümü ya da otomatik tamamlama kutusu gibi gelişmiş bileşenlerde.

Küçük bir örnek: açılır menü düğmesi

Örneğin bir sitede, tıklanınca alt menüyü gösteren bir düğme olsun. Düğme yerel button öğesi olarak yazılır ve aria-expanded niteliği taşır. Menü kapalıyken değeri false, açıldığında true olur. Düğmenin aria-controls niteliği açılan menünün kimliğine bağlanır.

Ekran okuyucu kullanıcısı düğmeye geldiğinde adı, düğme olduğunu ve menünün kapalı olduğunu duyar. Menü açılınca durum güncellenir ve kullanıcı aynı bilgiyi doğru biçimde alır. Eğer kod aria-expanded değerini güncellemeyi unutursa kullanıcı menünün açık olduğunu duyamaz ve bileşen kullanılamaz hale gelir.

Aynı mantık modal pencerelerde de işler: dialog rolü, aria-modal özelliği, ad veren başlığın aria-labelledby ile bağlanması ve odağın pencere içinde tutulması birlikte düşünülmelidir.

ARIA, WCAG ve erişilebilirlik ilişkisi

WCAG (Web İçeriği Erişilebilirlik Yönergeleri) neyin erişilebilir sayılacağını anlatan ölçütler sunar. ARIA ise bu ölçütlere ulaşmak için kullanılan teknik araçlardan biridir. Başka bir deyişle WCAG hedefi, ARIA yöntemin bir parçasını tanımlar.

ARIA tek başına bir sayfayı erişilebilir yapmaz. Yeterli renk karşıtlığı, klavye ile tam gezinti, anlamlı başlık yapısı, form hata mesajları ve alternatif metinler erişilebilirliğin diğer bileşenleridir. Erişilebilirlik ile kullanılabilirlik farkını anlamak da bu yüzden önemlidir; erişilebilir bir bileşen, farklı ihtiyaçlara sahip kullanıcıların da kullanabildiği bileşendir.

Denetimlerde ARIA, otomatik araçlarla kısmen kontrol edilir; ancak bir rolün doğru seçilip seçilmediği ya da durumun doğru güncellenip güncellenmediği çoğunlukla ekran okuyucu ve klavye ile elle test etmeyi gerektirir.

Sık yapılan hatalar

En yaygın hata, gerekmeyen yere ARIA eklemektir. Zaten düğme olan öğeye role=button yazmak ya da başlık öğesine başka rol vermek bilgi kirliliği yaratır.

Bir başka hata, role verip davranışı yazmamaktır. Tab rolü verilmiş bir öğe ok tuşlarıyla gezilebilmeli, odak yönetimi bileşen kalıbına uygun olmalıdır. Gizli içeriğe aria-hidden uygulayıp içinde odaklanabilir bir öğe bırakmak da kullanıcıyı görünmez bir öğeye götürür.

Görünür metni olan öğelerde aria-label ile farklı bir ad vermek, sesli komutla çalışan kullanıcılar için tutarsızlık yaratır; görünür etiket ile erişilebilir ad uyuşmalıdır. Son olarak, durum niteliklerini script ile güncellemeyi atlamak çok sık rastlanan bir hatadır.

Bu çalışmayı sistematik öğrenmek isteyenler için Mindset'in Web Erişilebilirlik Denetimi ve ARIA Uygulamaları programı; erişilebilirlik çerçevesi ve WCAG, anlamsal HTML, klavye navigasyonu, ARIA rolleri, durumlar ve bileşenler ile denetim süreci modüllerini içerir.