WordPress Sitenizde ARIA Nasıl Kullanılır
Web geliştirmenin temel hedeflerinden biri ilginç bir kullanıcı deneyimi yaratmaktır. Bunu genellikle web sitenize etkileşimli özellikler ve çarpıcı görsel öğeler ekleyerek yaparsınız. Bununla birlikte, bu yönlere her potansiyel ziyaretçi, özellikle de ekran okuyucularına güvenenler tarafından erişilemeyebilir. Neyse ki, tüm kullanıcılarınızın sıkı çalışmanızın sonuçlarını hissetmelerine yardımcı olacak bir sistem var. HTML’de erişilebilen zengin internet uygulamalarını (ARIA) birleştirerek siteniz sadece biraz ekstra çaba gerektirir ve büyük sonuçlar sağlayabilir. Bu yazı sizi Aria ve nasıl kullanacağınızı tanıtacak. Hadi gidelim!
Giriş Aria: Nedir ve Kısacası Neden Kullanmak İsteyebilirsiniz, Aria, HTML özniteliğini belirlemenin bir yoludur, böylece ekran okuyucunun onu doğru bir şekilde tanımlayabilmesi ve ardından ziyaretçilere iletebilmesi için. Bu, Web geliştirmenin erişilebilen önemli bir yönüdür ve ekran okuyucu kullanıcıları için daha doğru deneyimler yaratmaya yardımcı olur. Bunun nedeni, HTML’nizdeki ARIA’yı birleştirmek, tarayıcının ekran okuyucuları için web sayfalarınızı değiştirme şeklini etkiler. Bu değiştirilmiş içerik bir erişilebilirlik ağacında sunulur ve ARIA, HTML öğelerinizi buna çevirme görevini alır.
Örneğin, bir onay kutusu içeren bir sayfanız var ve HTML’nizde ARIA’yı kullandınız. Aria, ekran okuyucusuna kullanıcıya sayfada bir onay kutusu olduğunu söyleyecek ve kontrol edilip edilmediğini gösterecektir. Orijinal HTML bunu kendiniz yapamaz. Web’i ne sıklıkla kullandığınızı, sadece işinizde değil, aynı zamanda günlük yaşamınızda da kullanın. Şimdi çoğu web’in sizin için kullanılamayacağını hayal edin. Eğitim, iş, sağlık hizmeti, bilgi, iletişim ve hatta eğlence için daha az kaynağa erişebilirsiniz. Erişilebilecek web geliştirme için en iyi uygulamayı kullanmak Yaş veya yetenek ne olursa olsun herkes için aynı fırsat. Bu, Birleşmiş Milletler tarafından bir insan hakkı olarak kabul edilir ve kendi yeteneği nedeniyle takip edilmeye layık bir hedeftir. Bununla birlikte, ARIA’yı kullanmaya yatırım yapmak için yeterli değilse, erişilebilir geliştirmenin iş perspektifinden de yararlı olduğunu da not etmek isteyebilirsiniz. Bu, arama motorlarını optimize etmek ve web sitenizin erişimini artırmanın en iyi uygulamasıyla örtüşmektedir. Ayrıca, bazı durumlarda yasalarca gereklidir. Başka bir deyişle, sitenizi daha kolay erişilebilir hale getirmek için bazı basit adımlar atmanın birçok nedeni vardır.
WordPress sitenizde ARIA nasıl kullanılır HTML (3 ana uygulama) Kesinlikle bu yazının kapsamı dışında kendinizi ARIA ve Web Erişilebilirliği hakkında eğitmeye devam etmenizi önereceğiz. Mevcut sitenizin erişilebilirliğini test etmeyi düşünebilirsiniz. Bu, aslında WordPress sitesinde HTML’nizde Aria’yı kullanmaya başlamak için bilmeniz gereken üç şey olduğunu söylüyor. Aşağıdaki uygulamayı öğrenmek size güçlü bir temel verecektir. 1. ARIA’yı Semantik HTML ile kullanarak HTML’nize ARIA’nın nasıl uygulanacağını tartışmadan önce, onu kullanmak için doğru zamanı not etmek önemlidir. Orijinal HTML Web içeriğine erişilemese de, ARIA’nın gerekli olmayan veya doğru kullanılmadığı takdirde ARIA ile çelişecek birkaç anlamsal öğe vardır. – HTML’lerinin amacını açıklayın. Bu elementlere ARIA eklemek aşırı olacaktır, çünkü HTML semantiği unsurların rolünü ima eder (yakında Aria’nın rolü hakkında daha fazla konuşacağız). Buna ek olarak, geliştiricilerin bunları semantik HTML’ye aykırı bir şekilde kullanmasını önlemek için ARIA kullanmaya uygulanan bazı kurallar vardır. World Wide Web Konsorsiyumu (W3C), hangi anlamsal HTML öğelerinin ARIA’nın rolünü ima ettiğini açıklayan yararlı bir tabloya sahiptir:
İlk sütun HTML öğesini belirlerken, ikinci sütun ima edilen rolü listeler. Elementin örtük rolü listelenmişse, öğe için ek ARIA rolünü eklemenize gerek yoktur. Üçüncü sütun, en iyi uygulamaya göre her HTML öğesinin sahip olabileceği rolü içerir.
2. HTML etiketine bir rol ekleme Üzerinde çalıştığınız HTML öğesinin ARIA’nın kullanılmasını gerektirdiğinden emin olduktan sonra doğrudan ‘roller’ ve ‘öznitelikler’ kullanabilirsiniz. Aria’nın rolünün bir önceki bölümden ne yaptığını zaten bir resme sahip olabilirsiniz. Etikette bulunan öğelerin türünü belirlerler ve öğenin amacını gösterirler. Örneğin, kullanıcılara bir güncelleme yüklemeleri gerektiğini söylemek için bir uyarı yapmak istiyorsanız, ‘uyarı’ rolünü şöyle kullanacaksınız:
>
Lütfen en son yenilemeyi yükleyin!
Daha önce açıkladığımız gibi, öğenin semantik olup olmadığını ve rolü ima edip etmediğini belirlemeniz gerekmez ve ima edilen role aykırı öğeler için yeni bir rol belirlememelisiniz. Ancak, her bir öğe için yalnızca bir rol uygulayabileceğinizi de fark etmelisiniz.
Bu yöntemi düşünün – öğenin hangi rolünü tanımlar. Bir öğe aynı anda iki şey olamaz, bu yüzden onu en iyi tanımlayan rolü seçmelisiniz. Bu nedenle, gerekirse, farklı rollere sahip öğelerde bir öğeyi puanlamayı seçebilirsiniz. Örneğin, yukarıdaki uyarıyı başlığınıza eklemek istiyorsanız, şöyle görünebilir:
Lütfen en son yenilemeyi yükleyin!
Bir öğenin bir başlık ve uyarı olduğunu belirtmek yerine, bu, başlıkta bir uyarı olduğunu açıklar.
3. Durum kayıtları ve özellik özellikleri için özellikler dahil, ARIA’yı oluşturan ikinci unsurdur. Rolden farklıdırlar, çünkü ekran okuyucusuna, öğelerin ne olduğunu tanımlamak yerine belirli öğeler hakkında önemli bir şey söylerler. İki tür ARIA özelliği vardır: Devlet, kullanıcılar onunla etkileşime girdiğinde değişebilecek özellikler hakkında bilgi paylaşır. Örneğin, bu bir onay kutusu veya radyo düğmesi olabilir.
Mülkiyet, kullanım sırasında değişemeyen özellikleri gösterir. Diğer öğeleri veya bir öğenin bulunduğu hiyerarşi seviyesini etiketleyen bir unsur, her ikisi de mülktür.
Her ikisi de kolayca tanınır, çünkü her zaman aria ile başlarlar- ardından kullanılan belirli durum veya özellikler. Örneğin, ekran okuyucusuna varsayılan olarak doldurulmuş onay kutusunun bu örnekte olduğu gibi ARIA kontrollü olduğunu bildirmek için kullanılan durum:
>
Benzer şekilde, bir etiketleme elemanı Aria-Labelledy olduğunda kaydedilen özellik. Bu özniteliği, örneğin, onunla ilgili metni göstermek için görüntüye uygulayabilirsiniz: >
Kullanabileceğiniz daha fazla özellik örneği görmek için izin verilen W3C’nin rolleri, durumu ve özelliği listesini görmelisiniz.
Sonuç Web geliştirme açısından, erişilebilecek içerik yapmak düşündüğünüz ilk şey olmayabilir.Ancak, en iyi uygulama web erişilebilirliğini izleyerek ve Sitenizdeki HTML ARIA’yı birleştirerek, Web’i herkes için kullanılabilir hale getirmede rol oynayabilirsiniz.WordPress sitenizde ARIA kullanmak için üç ana uygulama şunlardır: ARIA’yı semantik HTML ile kullanma.
HTML etiketine bir rol ekleyin.
Kayıt Durumu ve Mülkiyet Özellikleri dahil.
WordPress sitenizde ARIA kullanımı hakkında sorularınız var mı?Aşağıdaki yorum bölümünde bize bildirin!Makale Resim Küçük Resim Eguginka / Shutterstock.com
