ARIA Etiketleri nedir?

Tanım

ARIA (Erişilebilir Zengin İnternet Uygulamaları) etiketleri, standart HTML öğelerine eklenebilen özel nitelikler ve rollerden oluşan bir kümedir. Amacı, dinamik web içeriğine ve kullanıcı arayüz bileşenlerine anlamsal derinlik kazandırarak erişilebilirliği artırmaktır. Özellikle ekran okuyucular gibi yardımcı teknolojiler için, etkileşimli öğelerin işlevselliği, durumu ve özellikleri hakkında kritik bilgi sağlar. Aksi takdirde bu öğeler belirsiz kalabilir.

Açıklama

Görme engelli bir kullanıcının, ekran okuyucu yardımıyla web sitenizde gezinmeye çalıştığını düşünün. Ekran okuyucular standart metinleri ve temel HTML yapılarını (başlıklar, paragraflar gibi) etkili bir şekilde yorumlayabilirken, modern web uygulamalarında sıkça karşılaşılan karmaşık, dinamik veya standart dışı arayüz öğelerini anlamakta zorlanırlar.

Örneğin, ekran okuyucu şu şekilde görsel olarak sunulan bir görev listesiyle karşılaşsın:
✓ Görev 1: Raporu tamamla (İşaretli)
□ Görev 2: Teklifi gönder
✓ Görev 3: Toplantıyı planla (İşaretli)
□ Görev 4: Müşteriyle iletişime geç
✓ Görev 5: Bütçeyi gözden geçir (İşaretli)

Gören bir kullanıcı için bunun bir kontrol listesi olduğu ve hangi görevlerin tamamlandığı (işaretli) anında anlaşılır. Ancak ek anlamsal işaretler olmadan, standart bir ekran okuyucu yalnızca "Görev 1: Raporu tamamla" gibi metinleri okuyabilir; bunun bir onay kutusu olduğunu veya işaretli/işaretsiz durumunu algılayamaz. Kullanıcı, bu öğelerin etkileşimli doğasından ve mevcut durumundan habersiz kalır.

İşte tam da bu noktada ARIA etiketleri devreye girer. Bu kontrol listesi öğelerinin HTML koduna belirli ARIA nitelikleri ekleyerek, yardımcı teknolojilere gerekli anlamsal bilgiyi sağlayabilirsiniz. Örneğin:

• role="checkbox" → Öğenin bir onay kutusu olduğunu belirtir.
• aria-checked="true" veya aria-checked="false" → Açıkça durumunu bildirir.

Böylece ekran okuyucu, "Görev 1: Raporu tamamla, onay kutusu, işaretli" veya "Görev 2: Teklifi gönder, onay kutusu, işaretsiz" şeklinde anons yaparak kullanıcıya tam bir anlayış ve kontrol imkanı sunar.

Web sitenizde muhtemelen JavaScript ve CSS ile oluşturulmuş birçok etkileşimli bileşen bulunuyordur: özel açılır menüler, sekme panelleri, akordeon menüler, dinamik uyarılar, kaydırıcılar, form doğrulama mesajları gibi. Bu öğeler görsel olarak çekici olsa da, altta yatan HTML genellikle ekran okuyucuların ihtiyaç duyduğu anlamsal bilgiden yoksundur. ARIA etiketleri, bu özel bileşenlerin rolünü, durumunu ve özelliklerini tanımlayan ek anlamsal veriler sağlayarak boşluğu doldurur.

Bu sayede:

• Yardımcı teknoloji kullanıcıları, tüm dinamik içeriği tam olarak anlayabilir ve etkileşime girebilir.
• Web sitenizin kullanılabilirliği ve gezinilebilirliği önemli ölçüde artar.
• Çok daha kapsayıcı ve etkili bir kullanıcı deneyimi sunulur.

ARIA'nın doğru uygulanması, ileri düzey web erişilebilirliğinin kritik bir parçasıdır.