Erişilebilirlik için ARIA

ARIA (Accessible Rich Internet Applications), özellikle görme engelli bireyler için, dinamik ve etkileşimli web içeriklerinin yardımcı teknolojilerle (ekran okuyucular gibi) anlaşılabilir olmasını sağlayan bir HTML spesifikasyonudur. Standart HTML elementleri her zaman yeterli açıklamayı sağlayamaz. İşte bu noktada ARIA, arayüzün yapı taşlarına anlam katar ve web uygulamasını herkes için erişilebilir hale getirir.
ARIA’yı bir mektup yazmak gibi düşünebilirsiniz. HTML ile mektubu yazarsınız, ama kime hitap ettiğinizi, hangi bölümlerin önemli olduğunu belirtmezseniz okuyucu zorlanır. ARIA, bu mektubu başlıklandırır, önemli yerlerin altını çizer ve okuyucuya neyin ne olduğunu açıklar.
Kişisel web sitelerinde tema geçişi butonları, bloglarda içerik sekmeleri, e-ticaret sitelerinde filtreleme menüleri ve haber sitelerinde canlı bildirimler gibi bileşenlerde ARIA kullanımı kritik öneme sahiptir. ARIA sayesinde, bu bileşenler sadece görsel değil, erişilebilir hale gelir.
Bu derste şunları öğreneceksiniz:

• ARIA'nın ne olduğunu ve neden önemli olduğunu,
• Kişisel web sitesi, blog, e-ticaret ve haber sitesi bağlamında nasıl uygulanacağını,
• En iyi uygulamaları ve yaygın hataları,
• Gerçek dünyadan çalışır örneklerle ARIA'yı etkili şekilde kullanmayı.

Bu örnek, bir div elementine ARIA aracılığıyla buton rolü kazandırarak erişilebilir hale getirme sürecini göstermektedir. Modern arayüzlerde, geliştiriciler genellikle özel stil ve kontrol ihtiyaçları nedeniyle <button> yerine div veya span gibi etiketler kullanır. Ancak bu elementler doğal olarak etkileşimli değildir. ARIA ile bu sorun çözülebilir.
role="button", ekran okuyuculara bu div elementinin buton işlevi gördüğünü bildirir. Görsel olarak bir buton gibi görünse bile, ekran okuyucu aksi takdirde bunu sadece dekoratif bir blok olarak algılar.
tabindex="0", bu elementi klavye ile odaklanabilir hale getirir. Bu, erişilebilirlik açısından kritiktir çünkü sadece fareyle değil, klavye ile de erişim sağlanmalıdır.
aria-pressed="false", butonun varsayılan olarak devre dışı (pasif) olduğunu belirtir. Kullanıcı bu butona tıkladığında (JavaScript ile), bu değerin "true" olarak değiştirilmesi beklenir.
Kişisel bir web sitesinde, bu yapı örneğin "Karanlık Modu Aç/Kapat" gibi bir işlevde kullanılabilir. Standart HTML yerine özel bileşen kullanılması gerektiğinde, bu tür yapılar ARIA sayesinde erişilebilir hale gelir.
Yeni başlayanlar için sık sorulan bir soru şudur: “Neden doğrudan <button> kullanmıyoruz?” Elbette, kullanabiliyorsanız en iyi tercih semantik HTML’dir. Ancak özel tasarım gereksinimlerinde div gibi etiketleri kullanmak kaçınılmaz olabilir. Bu noktada ARIA, eksik anlamı telafi eder.

Bu örnek, bir blog sitesinde yaygın olarak karşılaşılan sekmeli içerik sunumunun erişilebilir şekilde uygulanmasını göstermektedir. ARIA burada, her sekmenin (tab) bir içerik paneli (tabpanel) ile ilişkili olduğunu açıkça belirtir.
role="tablist", tüm sekmeleri barındıran konteynerin tanımıdır.
aria-label="Yazı Kategorileri", ekran okuyuculara bu sekmelerin neyle ilgili olduğunu söyler. Bu, özellikle bağlamı anlamada önemli bir ipucudur.
role="tab", sekme öğesini tanımlar.
aria-selected="true/false", hangi sekmenin aktif olduğunu belirtir.
tabindex="0" aktif sekmenin klavye ile odaklanabilir olduğunu, -1 ise diğerlerinin odaklanamayacağını belirtir.
id="sekme-genel", içerik paneline bağlanacak referans noktasıdır.
role="tabpanel", sekme ile ilişkili içerik alanını tanımlar.
aria-labelledby="sekme-genel", bu panelin hangi sekmeye ait olduğunu açıklar.
Bu yapı, sadece görsel olarak değil, ekran okuyucu kullanan bireyler için de tam anlamıyla anlaşılır bir sekme sistemi oluşturur. Özellikle bloglarda, kullanıcılar belirli bir kategoriye ait yazılara kolayca erişebilmelidir. Bu yapı sayesinde, kullanıcı deneyimi tüm cihaz ve kullanıcı profilleri için eşitlenmiş olur.

En iyi uygulamalar:

1. Semantik HTML önceliklidir: <button>, <nav>, <section> gibi anlamlı etiketleri mümkün olduğunca kullanın.
2. Dinamik durumları doğru yönetin: aria-pressed, aria-expanded gibi nitelikleri kullanıcı etkileşimine göre güncelleyin.
3. Tutarlı etiketleme kullanın: aria-labelledby, aria-describedby ile öğeleri açıkça ilişkilendirin.

4. Klavye erişilebilirliğini test edin: Tüm etkileşimlerin yalnızca klavye ile de çalıştığından emin olun.
   Yaygın hatalar:

5. Yinelenen roller: Örneğin <button role="button"> gereksizdir.

6. Eksik tabindex kullanımı: div gibi elementler, tabindex="0" olmadan klavye ile erişilemez.
7. Hatalı ID referansları: aria-labelledby geçerli bir id ile eşleşmezse, anlam kaybı yaşanır.
8. Dinamik güncelleme yapılmaması: Etkileşim sonrası aria-selected veya aria-expanded gibi değerlerin güncellenmemesi kullanıcıyı yanıltır.
   Hata ayıklama ipuçları:

• Erişilebilirlik test araçları (axe, Lighthouse, WAVE) kullanarak hataları erken tespit edin.
• Ekran okuyucu deneyimi (NVDA, VoiceOver) ile pratik yapın.
• Tarayıcı geliştirici araçlarında öğelerin ARIA niteliklerini kontrol edin.
  Pratik öneri: Kod yazarken görsel tasarımı değil, kullanıcı deneyimini merkeze alın. Her etkileşimli öğeyi erişilebilir kılmak bir zorunluluktur, lüks değil.

Özet ve sonraki adımlar:
Bu derste, ARIA'nın erişilebilirlik açısından neden vazgeçilmez olduğunu, nasıl çalıştığını ve gerçek örneklerde nasıl uygulandığını öğrendiniz. ARIA, ekran okuyucu gibi yardımcı teknolojilere içerikle ilgili ek bilgi sağlayarak kullanıcı deneyimini zenginleştirir.
ARIA nitelikleri; CSS ile görsel durumları kontrol etmeyi ([aria-expanded="true"] { display: block; }) ve JavaScript ile etkileşimli bileşenler oluşturmayı mümkün kılar. Bu nedenle, ARIA sadece HTML’in değil, modern webin tamamlayıcı bir parçasıdır.
Önerilen sonraki konular:

• aria-live ile dinamik içerik güncellemeleri
• Modal diyaloglarda aria-modal ve aria-hidden
• Form doğrulama için aria-invalid ve aria-describedby
• Komponent tabanlı framework'lerde ARIA kullanımı (React, Vue)
  Öneri: Kendi sitenizde veya projelerinizde bulunan bir bileşeni seçin ve bu derste öğrendiğiniz prensiplerle erişilebilir hale getirin. Geliştirdiğiniz her bileşen, daha kapsayıcı bir web için büyük bir adımdır.