ARIA: zehir mi yoksa panzehir mi?

ARIA nedir?

ARIA, web yazarlarının yalnızca ekran okuyucuların görebileceği alternatif bir gerçeklik oluşturmasına olanak tanır.

Bazen, web içeriğinde neler olduğu konusunda okuyucuları bilgilendirmek için gerçeği açıklamak veya hatta doğrudan "yalan söylemek" gerekir. Örneğin, "odak gerçekten burada" veya "bu gerçekten bir kaydırma çubuğu". Bu, çalışma tezgahınızdaki araçlar ve widget'ların üzerine sihirli yapışkan notlar eklemeye benzer. Bu sihirli notlar, üzerinde yazılanlara herkesi inandırır.

Sihirli bir yapışkan not olduğunda, her aracın ne olduğuna veya ne yaptığına dair inancımızı geçersiz kılar. Örneğin, "Burada bir yapıştırıcı tabancası var" yazan bir ARIA eklerseniz. Boş bir mavi kutu olmasına rağmen sihirli yapışkan not, bunun bir yapıştırıcı tabancası olduğunu söylüyor. "Ayrıca %30 dolu" ifadesini de ekleyebilirsiniz. Ekran okuyucu artık% 30 dolu bir yapıştırıcı tabancası olduğunu bildirir.

Bunun web eşdeğeri, içinde resim bulunan düz bir div almak ve ARIA'yı kullanarak bunun 100 üzerinden 30 değerinde bir kaydırma çubuğu olduğunu belirtmektir. ARIA, div öğesini kaydırma çubuğu haline getirmez. Yalnızca ekran okuyucuya, öğenin kaydırma çubuğu olduğunu söylemesini söyler.

ARIA, bir web sayfasının görünümünü veya fare ya da klavye kullanıcısının davranışını etkilemez. ARIA'nın etkisini yalnızca yardımcı teknolojileri kullanan kullanıcılar fark eder. Web geliştiricileri, yardımcı teknoloji kullanmayan kullanıcıları etkilemeden istedikleri ARIA'yı ekleyebilir.

Doğru okudunuz: ARIA aslında klavye odak noktası veya sekme sıralaması için hiçbir şey yapmaz. Tüm bunlar HTML ile yapılır ve bazen JavaScript ile küçük değişiklikler yapılır.

ARIA nasıl çalışır?

Ekran okuyucular veya diğer yardımcı teknolojiler, tarayıcılardan her öğeyle ilgili bilgi ister. Bir öğede ARIA varsa tarayıcı bu bilgileri alır ve ekran okuyucuya söz konusu öğe hakkında söylediklerini değiştirir.

ARIA'nın bazı yaygın kullanımlarını aşağıda bulabilirsiniz.

• Otomatik tamamlama, ağaç veya elektronik tablo gibi HTML'de bulunmayan özel bileşenler ekleyin.
• HTML'de bulunan ancak yazarın yeniden tasarlamaya karar verdiği bileşenler (standart öğenin davranışını veya görünümünü değiştirmek istemesi nedeniyle olabilir). Örneğin, HTML <input type="range"> öğesi temelde bir kaydırma çubuğudur ancak yazarlar bu öğeyi farklı göstermek ister.
  • Çoğu durumda bu sorun CSS ile çözülebilir. Ancak range için CSS awkwARD. Yazarlar kendi kaydırma çubuklarını oluşturabilir ve role="slider" ile aria-valuenow kullanarak klavyeye mevcut değerin ne olduğunu söyleyebilir.
• Ekran okuyuculara sayfanın bir alanındaki ilgili değişiklikleri bildirmek için canlı bölgeler ekleyin.
• Başlıklar gibi yer işaretleri oluşturun. Belirgin işaretler, ekran okuyucu kullanıcılarının istediklerini daha hızlı bulmalarına yardımcı olur. Yer işaretleri, ilgili alanın tamamını içerebilir. Örneğin, "bu kapsayıcı sayfanın ana alanıdır" ve "bu kapsayıcı bir gezinme panelidir".

Neden ARIA?

HTML'ye zaten çalışan bazı ARIA eklemek yararlı olabilir. Örneğin, bir form denetiminin geçersiz giriş için hata mesajı uyarısına işaret etmesini isteyebiliriz. Dilerseniz bir metin girişinin belirli bir kullanımını da belirtebilirsiniz. Bu küçük düzenlemeler, sıradan web sitelerini ekran okuyucularla daha kullanılabilir hale getirebilir.

Menü çubuğu örneği

Yerel web mağazasında ihtiyacımız olan tüm widget'ların satılmadığını varsayalım. Ancak biz MacGyver gibiyiz. Diğer widget'lardan kendi widget'larımızı oluşturabiliriz. Bu, menü çubuğu oluşturması gereken bir web yazarı ile oldukça benzerdir.

<nav> öğesi mevcut olsa da menü çubukları genellikle div'ler, resimler, düğmeler, tıklama işleyiciler, tuş basma işleyiciler ve ARIA kullanılarak bir araya getirilir.

Fare kullanıcılarını destekleme

Birlikte bir menü çubuğu oluşturalım. div adlı genel kutu öğelerinde bir grup öğe gösteririz. Kullanıcımız bir div'i her tıkladığında ilgili komut yürütülür. Harika, fare tıklayıcılar için işe yaradı.

Ardından, güzel görünmesini sağlarız. Öğeleri düzgün bir şekilde hizalamak ve etraflarına görsel dış çizgiler yerleştirmek için CSS'yi kullanırız. Görme engelli kullanıcıların, bir menü çubuğu olduğunu ve nasıl kullanılacağını sezgisel olarak anlayabileceği kadar diğer menü çubuklarına benzetiyoruz. Hatta menü çubuğumuzda, farenin üzerine geldiği öğelerde farklı bir arka plan rengi kullanılır. Bu sayede kullanıcıya faydalı görsel geri bildirimler sağlanır.

Bazı menü öğeleri üst öğedir. Alt alt menüler oluştururlar. Kullanıcı bu simgelerden birine geldiğinde, alt alt menüyü kaydıran bir animasyon başlatırız.

Web'deki birçok şeyde olduğu gibi, bunların hiçbirine erişmek oldukça zordur.

Menü çubuğunu klavyeyle erişilebilir hale getirme

Klavye erişilebilirliğini ekleyelim. Bunun için ARIA değil, yalnızca HTML değişiklikleri gerekir. ARIA'nın, yardımcı teknolojileri kullanmayan kullanıcılar için görünüm, fare veya klavye gibi temel özellikleri etkilemediğini unutmayın.

Web sayfaları, farenin yanı sıra klavyeye de yanıt verebilir. JavaScript'imiz gerçekleşen tüm tuş vuruşlarını dinleyebilir ve tuş vuruşunun yararlı olup olmadığına karar verebilir. Aksi takdirde, yenmeyecek kadar küçük bir balık gibi sayfaya geri atar. Kurallarımız şu şekildedir:

• Kullanıcı bir ok tuşuna basarsa kendi dahili menü çubuğu planlarımıza bakalım ve yeni etkin menü öğesinin ne olması gerektiğine karar verelim. Görme engeli olmayan kullanıcının nerede olduğunu görsel olarak bilmesi için mevcut vurguları temizleyip yeni menü öğesini vurgularız. Ardından web sayfası, tarayıcının normal işlemi (bu durumda sayfayı kaydırma) gerçekleştirmesini önlemek için event.preventDefault() çağrısı yapmalıdır.
• Kullanıcı Enter tuşuna basarsa bunu bir tıklama gibi değerlendirebilir ve uygun işlemi yapabilir (hatta başka bir menüyü açabiliriz).
• Kullanıcı başka bir işlem yapması gereken bir tuşa basarsa kullanıcıyı sayfaya geri gönderin. Örneğin, menü çubuğunuzda Tab tuşuna gerek yoktur. Bunu doğru şekilde belirlemek zordur. Örneğin, menü çubuğunda ok tuşları kullanılmalıdır ancak Alt+Ok veya Komut+Ok tuşları kullanılamaz. Bunlar, tarayıcı sekmenizin web geçmişinde önceki ve sonraki sayfaya gitmek için kullanılan kısayollardır. Yazar dikkatli olmazsa bu öğeler menü çubuğu tarafından silinir. Bu tür hatalar çok sık görülür. ARIA'yı kullanmaya henüz başlamadık bile.

Ekran okuyucunun menü çubuğunuza erişimi

Menü çubuğımız bant ve div'lerle oluşturuldu. Sonuç olarak, ekran okuyucu bunların ne olduğunu bilemez. Etkin öğenin arka plan rengi yalnızca bir renktir. Menü öğesi div'leri, belirli bir anlamı olmayan basit nesnelerdir. Sonuç olarak, menü çubuğunu kullanan bir kullanıcıya hangi tuşlara basılması gerektiği veya hangi öğenin seçildiğiyle ilgili herhangi bir talimat gönderilmez.

Ama bu adil değil. Menü çubuğu, görme engelli olmayan kullanıcılar için sorunsuz çalışır.

ARIA imdadınıza yetişir. ARIA, ekran okuyucuya odağın bir menü çubuğunda olduğunu göstermemize olanak tanır. Yazar her şeyi doğru yaparsa özel menü çubuğımız, ekran okuyucuya masaüstü uygulamasındaki bir menü çubuğu gibi görünür.

İlk ARIA yalanımız aria-activedescendant özelliğidir. Özelliği etkin menü öğesinin kimliğine ayarlayın ve her değiştiğinde güncellemeyi unutmayın. Örneğin, aria-activedescendant="settings-menuitem". Bu, ekran okuyucunun ARIA etkin öğemizi odak olarak değerlendirmesine neden olur. Bu öğe, sesli olarak okunur veya Braille ekranda gösterilir.

Odaklanmış menü çubuğundan belirli bir menü öğesine işaret etmek için aria-activedescendant tuşunu kullanarak ekran okuyucu, kullanıcının nereye gittiğini bilir ancak nesne hakkında başka hiçbir şey bilmez. div nedir? Bu noktada rol özelliği devreye girer. İçerdiği öğenin tamamı için role="menubar", öğe grupları için role="menu" ve … davul sesi … tek tek menü öğeleri için role="menuitem" kullanırız.

Menü öğesi bir alt menüye yönlendiriyorsa ne olur? Kullanıcının bunu bilmesi gerekir. Görme engeli olmayan kullanıcılar için menünün sonunda küçük bir üçgen resmi olabilir ancak ekran okuyucu, en azından şu anda resimleri otomatik olarak nasıl okuyacağını bilmez. Genişletilebilir her menü öğesine aria-expanded="false" ekleyerek genişletilebilecek bir öğenin genişletilmediğini belirtebiliriz. Ayrıca, yazar yalnızca güzellik amaçlı olduğunu belirtmek için img üçgenine role="none" koymalıdır. Bu, ekran okuyucunun resim hakkında gereksiz olan herhangi bir şey söylemesini önler.

Klavye hatalarını düzeltme

Klavye erişimi, temel HTML'nin bir parçası olsa da üzerine yazmak kolaydır. Örneğin:

• Bir onay kutusunun açma/kapatma işlemi için boşluk çubuğu kullanılıyor ancak yazar preventDefault() işlevini çağırmayı unutmuş. Artık boşluk tuşu hem onay kutusunu açıp kapatıyor hem de sayfayı aşağı kaydırıyor. Bu, boşluk tuşu için varsayılan tarayıcı davranışıdır.
• ARIA modal iletişim kutusu, sekme gezinmesini içinde kilitlemek istiyor. Yazar, iletişim kutusundayken yeni sekme açmak için Ctrl+Tab tuşlarına izin vermeyi unutursa bu işlem beklendiği gibi çalışmaz.
• Yazar, bir seçim listesi oluşturur ve yukarı ve aşağı tuşlarını uygular. Ancak yazarın yine de ana sayfa, son, sayfa yukarı, sayfa aşağı veya ilk harfe gitme gezinme tuşlarını eklemesi gerekir.

Yazarlar bilinen kalıpları izlemelidir. Daha fazla bilgi için Kaynaklar bölümüne göz atın.

Klavye erişimi ile ilgili sorunları ekran okuyucu olmadan veya sanal tarayıcı modu kapalıyken de denemeniz faydalı olacaktır. Klavye erişimi ARIA yerine HTML ile uygulandığından, ekran okuyucu olmadan klavye hatalarını keşfedebilirsiniz. Sonuçta ARIA, klavye veya fare davranışını etkilemez. Bunun yerine, web sayfasındaki içerik, şu anda odaklanılan öğe vb. hakkında ekran okuyucuya yalan söyler.

Klavye hataları neredeyse her zaman web içeriğindeki bir hatadan (özellikle HTML ve JavaScript'te) kaynaklanır, ARIA'da değil.

Neden bu kadar çok var?

Yazarların ARIA'yı yanlış kullanmasının birçok yolu vardır. Her hata, tamamen bozulmaya veya küçük farklılıklara neden olur. Yazarın yayınlamadan önce fark etmesi pek olası olmadığından, göze çarpmayan sorunlar daha da kötü olabilir.

Yazar deneyimli bir ekran okuyucu kullanıcısı değilse ARIA'da mutlaka bir sorun yaşanır. Menü çubuğu örneğimizde yazar, "menuitem" doğru olduğunda "option" rolünün kullanılacağını düşünebilir. aria-expanded kullanmayı, aria-activedescendant değerini doğru zamanlarda ayarlayıp temizlemeyi veya diğer menüleri içeren bir menü çubuğu kullanmayı unutabilirler. Menü öğesi sayıları ne olacak? Ekran okuyucular genellikle menü öğelerini "5 öğeden 3. öğe" gibi bir ifadeyle sunar. Böylece kullanıcı nerede olduğunu bilir. Bu genellikle tarayıcı tarafından otomatik olarak sayılır ancak bazı durumlarda ve bazı tarayıcı - ekran okuyucu kombinasyonlarında yanlış sayılar hesaplanabilir. Bu durumda yazarın bu sayıları aria-posinset ve aria-setsize ile geçersiz kılması gerekir.

Bunlar yalnızca menü çubukları. Kaç tür widget olduğunu düşünün. Dilerseniz ARIA spesifikasyonuna veya içerik oluşturma uygulamalarına göz atın. Her kalıpta ARIA'nın kötüye kullanılması için onlarca yol vardır. ARIA, yazarların ne yaptıklarını bilmelerine güvenir. Çoğu yazar ekran okuyucu kullanıcısı olmadığından ne gibi hatalar olabilir?

Diğer bir deyişle, gerçek ekran okuyucu kullanıcılarının, kullanıma hazır olarak kabul edilmeden önce ARIA widget'larını denemesi yüzde 100 gereklidir. Çok fazla nüans var. İdeal olarak, birkaç eksik uygulamanın yanı sıra çok sayıda uygulama özelliği nedeniyle her şey birkaç farklı tarayıcı-ekran okuyucu kombinasyonuyla denenmelidir.

Özet

ARIA, HTML'de belirtilen her şeyi geçersiz kılmak veya bunlara ekleme yapmak için kullanılabilir. Erişilebilirlik sunumunda küçük değişiklikler yapabilir veya tüm bir deneyim oluşturabilir. Bu nedenle ARIA, ekran okuyucu kullanıcısı olmayan geliştiricilerimizin elinde hem inanılmaz derecede güçlü hem de tehlikelidir.

ARIA, diğer seçenekleri geçersiz kılan bir işaretleme katmanıdır. Ekran okuyucu ne olduğunu sorduğunda, ARIA varsa kullanıcıya gerçeğin ARIA sürümü sunulur.

Ek kaynaklar

W3C'nin ARIA Yazma Uygulamaları, her bir örneğin önemli klavye gezinme özelliklerini belgeler ve çalışan JavaScript, CSS ve ARIA sağlar. Örnekler, şu anda geçerli olana odaklanır ve mobil cihazları kapsamaz.

Erişilebilirlik API'si nedir?

Erişilebilirlik API'si, ekran okuyucuların veya diğer yardımcı teknolojilerin sayfada neler olduğunu ve neler olup bittiğini öğrenmesini sağlar. MSAA, IA2 ve UIA bunlara örnek olarak gösterilebilir. Erişilebilirlik API'sinin iki bölümü vardır:

• Kapsayıcı hiyerarşisini temsil eden bir nesne "ağacı". Örneğin, bir doküman birkaç paragraf içerebilir. Paragraflarda metin, resim, bağlantı ve metin süslemeleri bulunabilir. Nesne ağacındaki her öğenin rol (ben neyim?), ad veya etiket, kullanıcı tarafından girilen değer, açıklama ve odaklanılabilir, odaklanmış, zorunlu, işaretli gibi boole durumları gibi özellikleri olabilir. ARIA, bu özelliklerin herhangi birini geçersiz kılabilir.
  • Ekran okuyucular, kullanıcıların sanal arabellek modunda gezinmesine yardımcı olmak için ağacı kullanır (ör. "lütfen bir sonraki başlığa gidin").
• Ağaçtaki değişiklikleri açıklayan bir dizi etkinlik ("odak artık burada" gibi). Ekran okuyucu, kullanıcıya az önce ne olduğunu bildirmek için etkinlikleri kullanır. Önemli HTML veya ARIA işaretlemelerinde değişiklik yapıldığında, ekran okuyucuya bir değişiklik olduğunu bildirmek için bir etkinlik tetiklenir.

HTML, bu erişilebilirlik API'leriyle iyi bir şekilde eşlenir. HTML yeterli olmadığında ARIA eklenebilir. Böylece tarayıcı, nesne ağacını veya etkinlikleri ekran okuyucuya göndermeden önce HTML anlamlarını geçersiz kılar.