ARIA: Ekran okuyucuları ve diğer destekleyici cihazlar için en iyi 5 uygulama

Bu, erişilebilecek web deneyimi hakkında yazdığım üçüncü seri. İlk makalede “Var ve Evrensel Tasarım: Neden erişilebilecek web deneyimleri geliştiriyoruz? Erişilebilecek “neden” dijital tasarımı “tartışıyorum”. “ADA ve Evrensel Tasarım: Daha İyi Bir Plan Oluşturma” da, Persona, Kullanıcının Yolculuğu, Site Haritası ve Evrensel Tasarım İlkeleri ile Tutarlı Çerçeve Görüntüsü’nü nasıl yapacağımı tartıştım. Bu makalede, web deneyimleri yapmak için teknikleri tartışacağım, ekran okuyucuları ve diğer yardımcı cihazlar tarafından erişilebilir.
Bu deneyimi hayal edin: Çalışmanızı yapmak için ihtiyacınız olan önemli bilgileri bulmak için web sitesine gidersiniz. Veya önemli bir tarif yeniden doldurma siparişi için. Ya da en sevdiğiniz grup tarafından piyasaya sürülen yeni albümü indirmek için. Siteye gidiyorsunuz, ancak arama çubuğunu bulmadan önce beş dakika avlanmanız gerekiyor. (Telif hakkı bildirimi altında altbilginin en altına gömülür.) “Form” etiketli formun yolu buldunuz. Formda “jenerik” olarak etiketlenmiş ve “metin alanına” girmenizi isteyen bir metin alanı vardır. Altta, “düğmesi” etiketli bir düğme var. Her şeyi bulmaya çalıştığınızda, sayfa tükenir ve sıfırdan başlamanız gerekir. (Ters sayım uyarısı sizi uyarıyor gibi görünüyor, ancak bunun farkında değilsiniz.)
Şimdiye kadar deneyiminiz nasıl?İhtiyacınız olanı bul?Zamanınızın iyi harcandığını mı hissediyorsunuz?Yoksa siteden ayrılmaya ve başka bir yerde denemeye hazırlanıyor musunuz?Bu, Site erişilebilecek en iyi web sitelerinin uygulamasına uygun olarak geliştirilmediğinde, ekran okuyucuları veya diğer yardımcı teknolojilerle web sitelerine erişme deneyimine benzer.Aria Bu gelişmekte olan sorunun üstesinden gelmek için tasarruf etmek için W3C, erişilebilen Web Erişilebilirlik Girişimi açısından zengin İnternet Uygulamaları (WAI-ARIA veya sadece ARIA) oluşturdu.ARIA, ek bağlam ve metin alternatif bilgileri sağlayarak HTML öğesine ekleyebileceğiniz bir özellik çerçevesidir.Aria’nın özellikleri, web uygulamalarını ekran okuyucuları, Braille ekranını, sadece navigasyon klavyesini ve diğer yardımcı teknolojiyi kullanan kişiler için daha erişilebilir hale getirir.
ARIA’nın özelliklerinin yalnızca web deneyimini yardımcı teknoloji kullananlar için daha iyi hale getirdiğini unutmayın. Bu serideki öncülüm, erişilebilen web tasarımının web sitesini sadece engelli insanlar için değil, herkes için daha iyi hale getirmesidir. Bence burada bile doğru, çünkü Aria bizi web deneyimimizin organizasyonuna ve etkileşimine dikkat etmeye zorluyor. İlk en iyi uygulamamda tartışacağım gibi, en iyi çözüm, engelli kişilerin kullanıcıları için ayrı bir deneyim yaratmak değil. Web deneyiminizi önemli ölçüde değiştirmek için ARIA kullanırsanız, herkes için yaptığınız deneyimleri yeniden düşünmenizi öneririm. Aria’nın birçok gelişmesi gereksiz hale geliyor … ve web siteniz herkes için daha iyi olacak. ARIA için en iyi pratik #1: HTML semantiği ile başlayın, kötü bir HTML’ye iyi bir Aria atmayın. İyi şekillendirilmiş bir semantik HTML kullanarak bir site geliştirdiğinizde, erişilebilir hale getirmek için ARIA’nın özelliklerine çok bağımlı olmanıza gerek yoktur. Web uygulamanız
öğesini bir düğme olarak kullanıyorsa, ARIA’nın rolü ekran okuyucusuna bunun bir düğme olduğunu söyleyebilir:
Mesaj Milkshake Ama neden semantik HTML kullanmıyorsunuz? Milkshake Siparişi
Bunun adapte edilmesi daha kolaydır, makineleri okumak daha kolaydır ve hatta SEO’nuzu artırabilir. Semantik HTML kullanamayacağınız birkaç senaryo vardır:
Bu başka bir kişinin kodudur ve onu değiştirme yetkiniz yoktur.
Bu eski bir koddur ve düzeltmek için bir bütçeniz yoktur. Gerekli görünüm ve cihazlar anlamsal öğeleri desteklemez.
HTML5, ihtiyacınız olan semantik öğeleri belirlemez.
Bu durumda, Aria’nın özellikleriyle jenerik unsurları geliştirmekten başka seçeneğiniz yoktur. Ancak bir seçeneğiniz olduğunda, bunun yerine HTML anlambilimini kullanın.
#2: Daha iyi DOM Design, iyi yapılandırılmış bir belge nesne modelinin (DOM) SEO’yu nasıl geliştirebileceğini zaten bilebilirsiniz. Bu çoğunlukla JavaScript DOM’ları manipüle ettiğinde, bazen arama motorları tarafından taranması zor bir şekilde görünür. Ancak mükemmel olmayan bazı SEO uygulamaları bile temelde Dom ile ilgilidir. Bir dizi öğeyi
ve düzenlediğinizde, arama makineleri ve destekleme teknolojisi bunlara rehberlik edecek bir yapı yoktur. Yalnızca bir genel içerik koleksiyonu görürler. Bunun yerine, içeriğinizi mantıksal olarak , , , –

ve diğer semantik öğelerde ayarlayın. Belge yapısını yardımcı teknoloji ile çok daha açık ve daha kolay gezinmeyi kolaylaştırın. (Örümcek arama motorları da minnettar olacak.)
#3: Ağaç Ağaç Erişilebilirliği Ağaç Erişilebilirliği Web Belgesi, bir tarayıcı tarafından oluşturulan ve yardımcı teknoloji için kullanılabilir bir DOM dönüşümüdür. Bu Dom’dan daha uzun ve daha fazla. Tarayıcı yabancı bilgileri siler ve yardımcı teknoloji kullanan kişilere yardımcı olmak için ek bilgiler ekler (bazen hesaplanır). Destekleyici teknolojiye hangi bilgilerin gönderileceğini görmek için web uygulaması erişilebilirlik ağacınızı kontrol edin. Hangi önemli bilgiler eksik? Hangi yabancı bilgiler dahildir? Hangi genel bilgiler daha kesin olarak yapılabilir? Bir liste yapın, ardından #1 ve #2 en iyi uygulamaya dönün. Dom’a kaybolan bilgileri ekleyebilir misiniz? Yabancı bilgiler web uygulamanızda olmalı mı? Daha bilgilendirici bir semantik HTML kullanabilir misiniz? Yukarıdaki tekniklerle erişilebilirlik ağacını geliştirebilirseniz, bunu yapın. Bu, belge yapısını daha açık hale getirir ve kod daha temiz olacaktır. Arama motorları ve yardımcı teknoloji bunu daha iyi anlayacaktır. Ancak erişilebilirlik ağacını bu şekilde geliştiremeyeceğiniz zamanlar olacaktır. Bu durumda, biraz Aria kullanmanın zamanı geldi. #4: ARIA dönüm noktası ve diğer rolleri uygulayın. Sizi bunun yerine semantik HTML kullanmanızı tavsiye ediyorum. Ancak, HTML5, web uygulamanızı oluşturmak için ihtiyaç duyabileceğiniz tüm semantik öğeleri belirlemez. Bununla birlikte, tüm ekranlarda ve cihazlarda bazı öğeler desteklenmez. Bu unsurlar, açılır menüler ve hamburger, pop-up’lar ve uyarılar gibi modern web deneyimlerinin ortak özelliklerini içerir.

ARIA’nın rolü, bir elementin anlamsal rolünü açıkça tanımlayarak erişilebilirlikteki boşluğu kapatır. Landmark Aria, bir gezinme menüsü veya arama aracı gibi belgenin ana içerik alanını belirleyen rolün bir parçasıdır. Örneğin uyarılar, kullanıcının hemen okuması gereken hassas zaman bilgilerini aktarır. Bununla birlikte, bu aciliyeti yardımcı teknolojiye iletmek için HTML’de unsurları yoktur. Aria’nın rolü burada.
Siparişinizi tamamlamak için CSV numarası gereklidir. Aria’nın statüsü ve mülkiyeti ile son boşluk nihayet, Aria’nın statüsüne ve mülküne sahibiz. Bu ARIA özniteliği, bir web deneyiminde erişilebilen bir yere sahiptir, ancak bunu yalnızca 1-4 uygulamasından maksimum sonuçları aldıktan sonra kullanmanız gerekir. Ajansımda, ARIA özelliklerimizin% 90’ından fazlası #4 ve üç ARIA mülkündeki rol ve dönüm noktasından geliyor:
Aria-Label Hamburger menüleri gibi görünür metin etiketleri olmayan öğeleri tanımlayacak
Bu öğeleri etiketleyen metni olan diğer öğeleri tanımlamak için Aria-Labeledby
Bu unsurlar hakkında ek bilgileri olan diğer öğeleri tanımlamak için aria dağıtım