ARIA, WordPress Sitenizin HTML'sinde Nasıl Kullanılır?

Yayınlanan: 2019-06-29

Web geliştirmenin birincil hedeflerinden biri, ilgi çekici bir kullanıcı deneyimi yaratmaktır. Bunu genellikle web sitenize etkileşimli özellikler ve çarpıcı görsel öğeler ekleyerek yapacaksınız. Ancak, bu yönlere her potansiyel ziyaretçi, özellikle de ekran okuyuculara güvenenler mutlaka erişemez.

Neyse ki, tüm kullanıcılarınızın sıkı çalışmanızın sonuçlarını deneyimlemelerine yardımcı olacak bir sistem var. Erişilebilir Zengin İnternet Uygulamalarını (ARIA) sitenizin HTML'sine dahil etmek yalnızca biraz fazladan çaba gerektirir ve çok büyük getirileri olabilir. Bu gönderi size ARIA'yı ve nasıl kullanılacağını tanıtacak. Hadi gidelim!

ARIA'ya Giriş: Nedir ve Neden Kullanmak isteyebilirsiniz?

Kısacası, ARIA, ekran okuyucuların bunları doğru bir şekilde tanımlayabilmesi ve ardından ziyaretçilere iletebilmesi için HTML niteliklerini belirtmenin bir yoludur. Erişilebilir web geliştirmenin önemli bir yönüdür ve ekran okuyucu kullanıcıları için daha doğru deneyimler oluşturmaya yardımcı olur.

Bunun nedeni, ARIA'yı HTML'nize dahil etmenin, tarayıcıların ekran okuyucular için web sayfalarınızı değiştirme şeklini etkilemesidir. Bu değiştirilmiş içerik bir erişilebilirlik ağacında sunulur ve ARIA, HTML öğelerinizi buna çevirme görevini üstlenir.

Örneğin, onay kutusu olan bir sayfanız olduğunu ve HTML'nizde ARIA kullandığınızı varsayalım. ARIA, ekran okuyucuya, kullanıcıya sayfada bir onay kutusu olduğunu bildirmesini söyleyecek ve işaretli olup olmadığını belirtecektir. Yerel HTML bunu kendi başına yapamaz.

Web'i yalnızca işinizde değil, günlük yaşamınızda ne sıklıkta kullandığınızı düşünün. Şimdi web'in büyük bir bölümünün sizin için kullanılamaz olduğunu hayal edin. Eğitim, istihdam, sağlık, bilgi, iletişim ve hatta eğlence için daha az kaynağa erişiminiz olur.

Erişilebilir web geliştirme için en iyi uygulamaları kullanmak, interneti yaş veya yetenekten bağımsız olarak herkes için eşit fırsatlar sunan bir yer haline getirmek için üzerinize düşeni yapmanın bir yoludur. Bu, Birleşmiş Milletler tarafından temel bir insan hakkı olarak kabul edilir ve kendi değeri için takip etmeye değer bir hedeftir.

ARIA'yı kullanmaya yatırım yapmanız için bu yeterli değilse, erişilebilir geliştirmenin iş açısından da faydalı olduğunu da belirtmek isteyebilirsiniz. Arama Motoru Optimizasyonu en iyi uygulamalarıyla örtüşür ve web sitenizin erişimini artırır. Ayrıca, bazı durumlarda yasalarca zorunludur. Başka bir deyişle, sitenizi daha erişilebilir hale getirmek için birkaç basit adım atmak için birçok neden var.

ARIA, WordPress Sitenizin HTML'sinde Nasıl Kullanılır (3 Temel Uygulama)

Kendinizi ARIA ve web erişilebilirliği konusunda bu yazının kapsamı dışında eğitmeye devam etmenizi kesinlikle tavsiye ederiz. Özellikle sitenizin mevcut erişilebilirliğini test etmeyi düşünebilirsiniz.

Bununla birlikte, WordPress sitenizin HTML'sinde ARIA'yı kullanmaya başlamak için bilmeniz gereken gerçekten sadece üç şey var. Aşağıdaki uygulamaları öğrenmek size sağlam bir temel sağlamalıdır.

1. ARIA'yı Semantik HTML ile Kullanma

ARIA'yı HTML'nize nasıl uygulayacağımızı tartışmadan önce, onu kullanmanın ne zaman uygun olduğunu not etmek önemlidir. Yerel HTML tek başına erişilebilir web içeriği oluşturmasa da, ARIA'yı gereksiz kılan veya doğru kullanılmadığında ARIA ile çelişen bazı anlamsal öğeler vardır.

<header> , <figure> ve <nav> gibi anlamsal öğeler HTML'lerinin amacını tanımlar. ARIA'yı bu öğelere dahil etmek gereksiz olacaktır, çünkü anlamsal HTML zaten öğenin rolünü ima eder (birazdan ARIA rolleri hakkında daha fazla konuşacağız).

Ayrıca, geliştiricilerin ARIA'yı anlamsal HTML ile çelişecek şekilde kullanmasını önlemek için ARIA kullanımına uygulanan belirli kurallar vardır. World Wide Web Konsorsiyumu (W3C), hangi anlamsal HTML öğelerinin ARIA rollerini ima ettiğini gösteren kullanışlı bir tabloya sahiptir:

HTML için ARIA kurallarını açıklayan bir tablo.

İlk sütun bir HTML öğesini belirtirken, ikincisi ima edilen rolü listeler. Öğenin zımni bir rolü listelenmişse, onun için ek bir ARIA rolü eklemeniz gerekmez. Üçüncü sütun, en iyi uygulamalara göre her HTML öğesinin sahip olabileceği rolleri listeler.

2. HTML Etiketlerine Roller Ekleme

Üzerinde çalıştığınız HTML öğesinin ARIA kullanımını gerektirdiğinden emin olduğunuzda, 'roller' ve 'nitelikler' kullanmaya geçebilirsiniz. ARIA rollerinin ne yaptığı hakkında önceki bölümden zaten bir fikriniz olabilir. Etikette bulunan öğenin türünü belirtirler ve öğenin amacını belirtirler.

Örneğin, kullanıcıları bir güncelleme yüklemeleri gerektiği konusunda bilgilendirmek için bir uyarı oluşturmak isterseniz, 'uyarı' rolünü şu şekilde kullanırsınız:

 <div rolü="uyarı">
<p>Lütfen en son güncellemeyi yükleyin!</p>
</div>

Daha önce açıkladığımız gibi, eleman anlamsal ise ve rolü ima ediyorsa rol atamanıza gerek yoktur ve ima edilen rolüyle çelişen bir elemana yeni bir rol atamamalısınız. Ancak, her öğeye yalnızca bir rol uygulayabileceğinizi de unutmamalısınız.

Şöyle düşünün - bir elementtir ne bir rol tanımlar. Bir öğe aynı anda iki şey olamaz, bu yüzden onu en iyi tanımlayan rolü seçmelisiniz. Bununla birlikte, ihtiyacınız olduğunda, bir öğeyi farklı bir role sahip bir öğenin içine yerleştirmeyi seçebilirsiniz.

Örneğin, yukarıdaki uyarıyı başlığınıza eklemek isterseniz, şöyle görünebilir:

 <header><div rolü="uyarı">
<p>Lütfen en son güncellemeyi yükleyin!</p>
</div></header>

Tek bir öğenin hem bir başlık hem de bir uyarı olduğunu belirtmek yerine, bu başlıkta bir uyarı olduğunu açıkça ortaya koyar.

3. Niteliklerin Not Durumlarına ve Özelliklerine Dahil Edilmesi

Nitelikler ARIA'yı oluşturan ikinci unsurdur. Bu öğenin ne olduğunu tanımlamak yerine ekran okuyucularına belirli bir öğe hakkında önemli bir şey söylemeleri bakımından rollerden farklıdırlar. İki tür ARIA özelliği vardır:

  • Devletler , bir kullanıcı kendileriyle etkileşim kurduğunda değişmesi muhtemel özelliklerle ilgili bilgileri paylaşır. Örneğin, bu, onay kutularını veya radyo düğmelerini içerebilir.
  • Özellikler , kullanım sırasında değişmesi muhtemel olmayan özelliklere işaret eder. Başka bir öğeyi veya bir öğenin bulunduğu hiyerarşik düzeyi etiketleyen bir öğe, her ikisi de özelliktir.

Her zaman arya ile başladıkları için her ikisinin de fark edilmesi kolaydır - ardından kullanılan belirli durum veya özellik gelir. Örneğin, bir ekran okuyucuya varsayılan olarak bir onay kutusunun doldurulduğunu bildirmek için kullanılan durum, bu örnekte olduğu gibi aria işaretlidir :

 <span rolü="onay kutusu" 
aria-checked="true"
tabindex="0">
</span>

Benzer şekilde, bir öğenin diğerini etiketlediğini not etmek için kullanılan özellik aria-labeledby'dir. Bu özniteliği, örneğin, onunla ilişkili başlığı belirtmek için bir resme uygulayabilirsiniz:

 <figure aria-labelledby="operahouse_1" role="group">
<img src="operahousesteps.jpg" alt="Sydney Opera Binası">
<figcaption>Burada <cite>Seville Berberi</cite> operasını gördük!</figcaption>
</şekil>

Kullanabileceğiniz daha fazla öznitelik örneği görmek için W3C'nin izin verilen roller, durumlar ve özellikler listesine bakmanızı öneririz.

Çözüm

Web geliştirme söz konusu olduğunda, erişilebilir içerik oluşturmak aklınıza gelen ilk şey olmayabilir. Ancak, en iyi web erişilebilirlik uygulamalarını takip ederek ve sitenize ARIA HTML'yi dahil ederek, web'i herkesin kullanımına sunmada rol oynayabilirsiniz.

ARIA'yı WordPress sitenizde kullanmak için üç temel uygulama şunları içerir:

  1. ARIA'yı anlamsal HTML ile kullanma.
  2. HTML etiketlerine roller ekleme.
  3. Durumları ve özellikleri not etmek için nitelikler dahil.

WordPress sitenizde ARIA kullanımı hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde bize bildirin!

Makale Küçük Resmi EgudinKa / Shutterstock.com