ARIA etiketleri, görsel öğelerin yeterli bağlama sahip olmadığı durumlarda ekran okuyucuları gibi yardımcı teknolojilere açıklayıcı metin sağlamak için kullanılan özel HTML öznitelikleridir. Geliştiriciler, simgelere, düğmelere veya etkileşimli bileşenlere net, metin tabanlı bir ad atayarak, görme engelli kullanıcıların belirli sayfa öğelerinin amacını ve işlevini etkili bir şekilde yorumlayabilmelerini sağlarlar. Bu etiketlerin doğru bir şekilde uygulanması, bireysel fiziksel donanım veya yazılım yapılandırmalarından bağımsız olarak herkesin kullanabileceği dijital alanlar oluşturmak için temel bir gerekliliktir.
Modern web geliştirme için erişilebilirlik etiketleri neden gereklidir?
Modern web arayüzleri, yerden tasarruf etmek ve temiz bir estetik korumak için genellikle arama için büyüteç veya gezinme için hamburger menüsü gibi simgelere güvenir. Gören kullanıcılar bu sembolleri geleneksel tasarım kalıplarına dayanarak anında tanırken, ekran okuyucuları bir grafik dosyasının veya CSS ile stillendirilmiş bir öğenin görsel anlamını yardım almadan yorumlayamazlar. Bir aria-label eklemek, geliştiricinin ekran okuyucu yazılımının kullanıcıya yüksek sesle okuduğu gizli bir metin açıklaması ekleyerek bu boşluğu kapatmasını sağlar.
Bu etiketler olmadan, yardımcı yazılıma güvenen bir kullanıcı sadece düğme veya grafik kelimesini duyabilir, bu da o düğmenin gerçekte ne yaptığına dair hiçbir bağlam sağlamaz. Bu, kullanıcıların iletişim formu göndermek veya bir e-ticaret kataloğunu filtrelemek gibi temel görevleri tamamlayamadığı önemli bir engel oluşturur. Alien Road, erişilebilirliğin site lansmanı tamamlandıktan ve tasarım kilitlendikten sonra eklenen bir son düşünce değil, oluşturma sürecinizde varsayılan bir ayar olması gerektiğini vurgular.
ARIA özniteliklerinin kullanımıyla ilgili temel kural nedir?
Herhangi bir geliştirici için en hayati ilke, W3C yönergelerinin ARIA’nın yalnızca yerel HTML öğeleri gerekli erişilebilirlik bilgilerini sağlayamadığında kullanılması gerektiğini belirtmesidir. Bu genellikle ARIA’nın birinci kuralı olarak adlandırılır. Bir düğme, çapa etiketi veya form etiketi gibi anlamsal bir öğe kullanabildiğinizde, bunları her zaman genel bir div veya span öğesine aria-label eklemeye tercih edin. Yerel HTML kullanmak, tarayıcının ve yardımcı teknolojinin etkileşimi nasıl yöneteceğini zaten bilmesini sağlar.
ARIA’ya aşırı güvenmek, kullanıcılar için deneyimi aslında düşürebilir. Zaten erişilebilir olan öğelere gereksiz öznitelikler eklerseniz, ekran okuyucu çıktısını gereksiz bilgilerle karıştırma riskiyle karşı karşıya kalırsınız. Yapısal gezinme ve etkileşimli kontroller için anlamsal HTML’e bağlı kalın. ARIA etiketlerine yalnızca tasarımınız özel bir widget, sadece simgeli bir düğme veya standart etiketlerin kendi başlarına doğru bir şekilde temsil edemediği etkileşimli bir durum gerektirdiğinde başvurun.
aria-label etkili bir şekilde nasıl uygulanır?
Bir aria-label uygulamak, özniteliğin doğrudan HTML etiketinin içine yerleştirilmesini gerektirir. Örneğin, yalnızca bir arama simgesi içeren bir düğmeniz varsa, özniteliği şu şekilde uygularsınız:
Etiketlerinizi kısa ve açıklayıcı tutun. ‘için düğme’ veya ‘simgesi’ gibi ifadelerden kaçının çünkü ekran okuyucusu muhtemelen öğe türünü otomatik olarak duyuracaktır. İyi bir etiket, işlevsel bir tanımlayıcı görevi görür. Düğmeniz bir alışveriş sepetini açmak için bir modal pencereyi tetikliyorsa, onu basitçe ‘Alışveriş sepetini aç’ olarak etiketleyin. Amaç, gören bir kullanıcının arayüze bir saniyeliğine bakarak elde ettiği aynı anlayış seviyesini sağlamaktır.
Erişilebilir etiketleri uygulamak için kontrol listesi
- ARIA kullanmadan önce button veya input gibi yerel bir HTML etiketinin görevi yerine getirip getiremeyeceğini doğrulayın.
- Etiket metninin öğenin görsel görünümünü değil, eylemi veya amacı tanımladığından emin olun.
- Çıktının yararlı olduğunu doğrulamak için NVDA veya VoiceOver gibi gerçek ekran okuyucu yazılımlarını kullanarak etiketlerinizi test edin.
- Web siteniz birden fazla dili destekliyorsa etiketlerinizin yerelleştirildiğinden emin olun.
- Zaten metin içeriği olan öğelerde aria-label kullanmaktan kaçının, çünkü bu görünür etiketi geçersiz kılabilir ve kafa karışıklığına neden olabilir.
Erişilebilir gezinme ve formlar için yaygın kalıplar
Tipik bir hesap veya site yapısında, gezinme çubuklarının ve form girişlerinin manuel etiket ayarlarına en çok ihtiyaç duyan yerler olduğunu göreceksiniz. CSS ile geçiş anahtarı gibi görünecek şekilde stillendirilmiş özel bir onay kutusu kullanırsanız, ekran okuyucusu bunu bir form girişi olarak tanımayabilir. Doğru rolü ve bir aria-label uygulamak, cihazın öğeyi bir anahtar olarak işlemesini sağlar ve kullanıcıyı ‘Karanlık modu değiştir, işaretli’ gibi durum hakkında bilgilendirir.
Gezinme menüleri için, mobil uyumlu hamburger menülerinizin menü durumunu tanımlayan bir aria-label içerdiğinden emin olun. Menü şu anda kapalıysa, etiket ‘Menüyü aç’ olmalıdır. Kullanıcı tıkladıktan ve menü genişledikten sonra, etiketi ideal olarak ‘Menüyü kapat’ olarak güncellemelisiniz. Bu dinamik güncelleme, kullanıcıların görsel geri bildirime ihtiyaç duymadan site arayüzünüzdeki konumlarını ve seçeneklerini takip etmelerine yardımcı olan yaygın bir kalıptır.
Kodlama aşamasında kaçınılması gereken yaygın tuzaklar
Büyük bir hata, aynı sayfadaki farklı öğelere aynı etiketi atamaktır. Bir tablo satırındaki her ‘sil’ simgesi sadece ‘sil’ olarak etiketlenmişse, düğme listesiyle gezinen bir kullanıcının hangi satır üzerinde işlem yaptığına dair hiçbir fikri olmayacaktır. Etiketlerinize her zaman ‘Kullanıcı John Doe’yu sil’ veya ‘Fatura 5432’yi sil’ gibi belirli bağlamlar ekleyin. Bu düzeyde bir özgüllük, karmaşık kontrol paneli sayfalarında kullanılabilirliği korumak için kritiktir.
Bir diğer yaygın tuzak, ARIA etiketlerinin gizli doğasını görmezden gelmektir. Ekranı görebilen kullanıcılar, bir aria-label özniteliğinin içindeki metni asla görmeyeceklerdir. Bir etiketin tüm kullanıcılar için görünür olması gerekiyorsa, standart bir HTML etiket öğesi veya görünür bir metin aralığı kullanın. aria-label’ı yalnızca görsel tasarım standart bir metin etiketi eklemeyi imkansız kıldığında kullanın, örneğin metin eklemenin düzeni bozacağı yüksek kısıtlamalı sadece simgeli arayüzlerde.
Yerel HTML ile ARIA karşılaştırması
- Yerel HTML: Tarayıcı düzeyinde erişilebilirliği sağlamak için standart bağlantılar, düğmeler, başlıklar ve listeler için kullanın.
- ARIA: Yalnızca özel widget’lar, sadece simgeli düğmeler veya yerel öğelerin temsil edemediği karmaşık dinamik durumlar için kullanın.
- Yerel HTML: ARIA’nın otomatik olarak sağlamadığı yerleşik klavye gezinme desteği sağlar.
- ARIA: Ekran okuyucusunun kullanıcıya doğru güncellemeyi bildirdiğinden emin olmak için her durum değişikliği için manuel test gerektirir.
Sitenizi erişilebilirlik başarısı için nasıl test edebilirsiniz?
ARIA etiketlerinizin çalışıp çalışmadığını belirlemek için yalnızca otomatik erişilebilirlik araçlarına güvenmemelisiniz. Otomatik tarayıcılar eksik etiketleri bulmada harika olsa da, etiket metninin insan kullanıcı için gerçekten yararlı olup olmadığını yargılayamazlar. Kendi sitenizi bir ekran okuyucu ile kullanmaya zaman ayırın. macOS kullanıcıları için bu, Command + F5 kullanarak VoiceOver’ı açmak anlamına gelir. Windows kullanıcıları için NVDA, uygulamanızı test etmek için ücretsiz ve güvenilir bir seçenektir.
Sadece klavyenizi ve ekran okuyucunuzu kullanarak bir sepete ürün eklemek veya bir potansiyel müşteri oluşturma formunu doldurmak gibi birincil dönüşüm yolunuzda gezinmeye çalışın. Kendinizi sıkışmış veya duyurulan bilgilerden dolayı kafanız karışmış bulursanız, etiketleriniz muhtemelen daha fazla açıklayıcı metne ihtiyaç duyuyordur. Bu manuel test süreci, sitenizin yardımcı teknolojiye güvenen biri için gerçekten erişilebilir olup olmadığının en dürüst değerlendirmesini sağlar.
Bu hafta nereden başlamalı
Bu hafta sitenizin en çok kullanılan etkileşimli öğeleri üzerinde odaklanmış bir denetim yaparak başlayın. Her bir sadece simgeli düğmeyi tanımlayın ve şu anda bir aria-label’a sahip olup olmadıklarını kontrol edin. Değilse, bu öznitelikleri ana gezinmenize, sosyal medya bağlantılarınıza ve form gönderme düğmelerinize eklemeye öncelik verin. Bu basit, artımlı yaklaşım, çok çeşitli kullanıcılar için deneyimi iyileştirecektir.
Düşük asılı meyveleri ele aldıktan sonra, resim karuselleri veya özel tarih seçiciler gibi karmaşık bileşenlerinize bakın. Bunlar genellikle düşük erişilebilirlik puanlarının arkasındaki suçlulardır. Her slaytın veya seçim düğmesinin benzersiz ve açıklayıcı bir etikete sahip olduğundan emin olun. Her hafta bu özel güncellemeler için birkaç saat ayırarak, sitenizin onu ziyaret eden herkes için kullanılabilir kalmasını sağlayan bir erişilebilirlik alışkanlığı oluşturursunuz.
Okumaya devam et: Web Tasarımı ve Geliştirme · Web Tasarımı