HTML'deki Aria Nitelikleri Nelerdir ve Neden Önemlidir?

HTML'de yeni olan web tasarımcıları, bir dizi alışılmadık öznitelikle karşılaşabilir. ARIA kelimesinin önüne eklenmiş olan bu özellikler, web'in her yerinde görünür, ancak amaçları yeni kullanıcılar için bir sır olabilir.

ARIA nitelikleri, web sitelerinizin erişilebilirliğinde önemli bir amaca hizmet eder. Hem belirli bir öğenin içeriğini hem de bir öğenin bir sayfayla veya çevresindeki diğer öğelerle ilişkisini tanımlarlar.

Bu çok önemli özellikleri sitenize eklemek, kullandıkları teknolojiden bağımsız olarak tüm ziyaretçilerin aynı deneyimi yaşamasını sağlamaya yardımcı olacaktır.

ARIA Nitelikleri Nelerdir?

ARIA, Erişilebilir Zengin İnternet Uygulamaları'nın kısaltmasıdır. Modern HTML'de, özellikle JavaScript açısından zengin uygulamalarda, bireysel öğelerin hangi role hizmet ettiği sözdizimine dayalı olarak her zaman hemen açık değildir.

Rolleri ayırt etmedeki zorluk, kullanıcılar siteyi ekran okuyucular gibi erişilebilirlik araçlarını kullanarak görüntülediğinde sorun olabilir. Uygun semantik HTML'ye sahip olmayan son kullanıcınız, erişilebilirlik araçlarını kullanırken bir sitede gezinemeyebilir.

Bu sorunu çözmek için tercih ettiğiniz yol, HTML5'te uygun semantik öğeleri kullanın, bu her zaman pratik veya mümkün değildir. HTML öğelerindeki ARIA özniteliklerinin devreye girdiği yer burasıdır. Bu öznitelikler, öğenizin rolünü ve özniteliklerini, erişilebilirlik araçlarının işleyebileceği şekilde tanımlamanıza yardımcı olur.

ARIA Nitelikleri Neden Önemli?

Kısacası ARIA özellikleri, engelli kullanıcıların web sitenizi kullanmasını mümkün kılar. Bu roller ve nitelikler, sitenizdeki çeşitli öğeler hakkında başka türlü kolayca bulunamayacak ek bilgileri tanımlar.

Atayabileceğiniz çok çeşitli ARIA öznitelikleri vardır. Belgenin görsel olmayan bir şekilde anlam ifade etmesini sağlamak için ek bağlama ihtiyaç duyan her yerde bunları kullanmalısınız.

Örneğin, bir ana gezintiye sahip bir siteyi düşünün. sarılmış eleman eleman yerine bir eleman:

<divsınıf="nav">
<Ul>
<li>Evli>
<li>Mağazali>
<li>Hakkındali>
Ul>
div>

Kullanıcıların gezinmesine yardımcı olmak için ARIA özniteliklerini kullanabilirsiniz. role ve aria-label niteliklerini ekleme öğesi, ekran okuyucunun ve yardımcı teknolojilerin menünüzün nerede olduğunu bilmesini sağlar.

<divsınıf="nav">
<Ulrol="navigasyon"arya etiketi="Ana">
<li>Evli>
<li>Mağazali>
<li>Hakkındali>
Ul>
div>

Çoğu durumda uygun öğeleri kullanmanız gerekse de, yaptığınız işin kısıtlamaları dahilinde bu her zaman mümkün olmayabilir. Örneğin, siteniz bir ilerleme çubuğunun kullanılmasını gerektiriyorsa, ancak standart çubuğun izin vermediği bir tasarım istiyorsanız.

Bu senaryoda, ilerleme çubuğunuzu görüntülemek için özel bir öğe grubu oluşturabilirsiniz. Bununla birlikte, bir ekran okuyucu için bu öğeler karmakarışık bir karmaşa gibi görünecektir; sitenizin ziyaretçilerine yararlı bilgiler sunamaz.

Sarmalayıcının rolünü şu şekilde ayarlayarak: ilerleme çubuğuve ekleme aria-valuenow, aria-valuemin, Ve aria-valuemax nitelikler, yine de ilerlemeyi belirtebilirsiniz.

Modern çağda, erişilebilir web siteleri oluşturmak her zamankinden daha önemlidir. Var erişilebilirlik göz önünde bulundurularak oluşturulmuş birkaç React bileşen kitaplığı.

Erişilebilir bir web sitesine sahip olmak, yalnızca birkaç büyük arama motoru için arama sıralamanıza yardımcı olmakla kalmaz, potansiyel bir kullanıcı grubunu kullanıcı tabanınızdan ayırmamanızı da sağlar.

Sitenize uygun ARIA özniteliklerini eklemek, bilgileri tüm kullanıcılara sunduğunuzdan emin olmanıza yardımcı olacaktır. Nihai sonuç, tüm izleyicileri karşılayan ve herkese mümkün olduğunca aynı deneyimi sunan bir site olacaktır.

Hangi ARIA Niteliklerini Kullanmalıyım?

Sitenizde kullanmanız gereken birçok farklı özellik vardır. Genel olarak, bu özellikler iki farklı kategoriye ayrılır. İlki, genellikle özel bir etkileşimli öğeyi tanımlayan pencere öğesi öznitelikleridir.

Farkında olmanız gereken diğer kategori, ilişki nitelikleridir. Bunlar, belirli bir öğenin sitenin geri kalanıyla veya diğer öğelerle nasıl ilişkili olduğu hakkında yardımcı teknolojilere bilgi aktaran niteliklerdir.

Hangi ARIA özelliklerini dahil etmeniz gerektiğine gelince, basit cevap mümkün olduğu kadar çoktur. Kullanmakta olduğunuz öğenin, öğenin yerine getirdiği rolü tanımlamadığı her yerde role niteliğini kullanmalısınız.

Etiketli bir alanınız varsa, bu alan şuna sahip olmalıdır: arya etiketli bağlanmak. Kullandığınız nitelikler mantıklı olduğu sürece, sitenizi yalnızca bunları ekleyerek daha erişilebilir hale getiriyorsunuz.

Widget nitelikleri çok daha geniş bir kategoridir. Standart bir siteye eklemeniz gereken ARIA özelliklerinin çoğunu içerir. Özelleştirilmiş ilerleme çubuğunun önceki örneğinde, aria-valuenow, aria-valuemin ve aria-valuemax'ın tümü pencere öğesi nitelikleridir. Bulundukları öğenin durumunu veya olası durumlarını tanımlarlar.

Bir öğenin durumunu tanımlamak için kullanabileceğiniz pek çok farklı özellik vardır. En yaygın olanlardan biri arya etiketi. Bu özellik, üzerine yerleştirdiğiniz öğeye yalnızca yardımcı teknolojiler tarafından görülebilen bir etiket uygular.

Bu kategoriye giren diğer bir yaygın ARIA özelliği çifti şunlardır: arya gizli Ve arya engelli. Bunlar, bir öğenin mevcut durumunu ve bir ekran okuyucunun bunu kullanıcıya okuması gerekip gerekmediğini iletebilir. Bu, kendi ekran okuyucuları olan çeşitli farklı cihazlar için yararlıdır.

İlişki Nitelikleri

Widget özniteliklerinden farklı olarak, ilişki öznitelikleri yardımcı teknolojilere, bir öğenin etrafındaki diğer öğelerle ilişkisi ve kullanımı hakkında göstergeler verir. Bunlardan en yaygın olanı rol niteliğidir. Rol, bir öğenin bir site içinde hangi amaca hizmet ettiğini belirtir.

ayarlarsanız rol öznitelik navigasyon, hemen bir gezinme sarmalayıcı olarak tanımlanacaktır.

Bazı ilişki nitelikleri, bir öğenin etrafındaki diğer öğelerle nasıl ilişkili olduğunu tanımlar. bu arya etiketli örneğin nitelik, hangi öğenin bu öğe için bir etiket görevi gördüğünü gösterir. Bu, görsel olarak anlamlı olan ancak belge akışında kendilerinden sonra belirli form kontrolleri için etiketler bulunan düzenler kullanıldığında faydalı olabilir.

Widget özniteliklerinden daha az ilişki özniteliği olsa da, bu öznitelikler genellikle daha büyük önem taşır. Genellikle bir belgenin akışını ve kontrolünü açıklayabilir ve bir kullanıcının sitenizde nasıl gezinebileceği hakkında ek ayrıntılar verebilirler.

Bu özellikler, sitenizde formlar ve gezinme öğeleri tasarlarken özellikle önemlidir.

ARIA Niteliklerini HTML'nize Dahil Etmek Neden Bu Kadar Önemli?

ARIA nitelikleri, web sitenizde basit ve gerekli bir amaca hizmet eder. Erişilebilirlik yazılımının kullanılmasından bağımsız olarak sitenin tüm kullanıcılar tarafından erişilebilir olmasını sağlamaya hizmet ederler. Engelli kullanıcılar için sitenizde bu özelliklere sahip olmak siteyi kullanılabilir hale getirebilir.

Yardımcı teknoloji ile çalışmak için tercih edilen yöntem, uygun semantik unsurları kullanmaktır. Ancak bunu yapmak mümkün olmadığında, ARIA öznitelikleri, kullanıcılarınız içeriği kaybetmeden özgürce çalışmayı mümkün kılar.