Gördüğünüz rollerin çoğu ARIA 1.0'ın bir parçası olarak tanımlandı ve daha sonra HTML5'e dahil edildi. Yeni HTML5 öğelerinden bazıları (iletişim kutusu, ana vb.) Orijinal ARIA rollerine dayanır.
http://www.w3.org/TR/wai-aria/
Yerel semantik öğenize ek olarak rolleri kullanmanın iki ana nedeni vardır.
Sebep # 1. Ana bilgisayar dili öğesinin uygun olmadığı veya çeşitli nedenlerle daha az anlamsal olarak uygun bir öğenin kullanıldığı rolü geçersiz kılma.
Bu örnekte, sonuçta ortaya çıkan işlevsellik bir gezinme bağlantısından daha düğme benzeri olsa da bir bağlantı kullanılmıştır.
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
Ekran okuyucular bunu bir düğme olarak duyar (bir bağlantının aksine) ve sınıf-itis ve div-itis'lerden kaçınmak için bir CSS özellik seçici kullanabilirsiniz.
*[role="button"] {
/* style these a buttons w/o relying on a .button class */
}
Sebep # 2. ARIA rolünü uygulayan ancak yerel öğenin rolünü henüz uygulamayan tarayıcıları desteklemek için yerel bir öğenin rolünü yedekleme.
Örneğin, "ana" rol tarayıcılarda yıllardır desteklenmektedir, ancak HTML5'e nispeten yeni bir eklentidir, bu nedenle birçok tarayıcı semantiği henüz desteklememektedir <main>.
<main role="main">…</main>
Bu teknik olarak gereksizdir, ancak bazı kullanıcılara yardımcı olur ve herhangi birine zarar vermez. Birkaç yıl içinde, bu teknik muhtemelen gereksiz hale gelecektir.
Ayrıca şunu da yazdınız:
Bazı insanların kendilerinin uydurduklarını görüyorum. Buna izin verilir mi veya rol özelliğinin doğru kullanımı var mı?
Gerçek bir rol dahil edilmedikçe, bu özelliğin geçerli bir kullanımıdır. Tarayıcılar, belirteç listesinde ilk tanınan rolü uygular.
<span role="foo link note bar">...</a>
Listenin dışında, sadece linkve notegeçerli rolleri vardır ve önce gelir, çünkü bağlantı rolü böylece uygulanacaktır. Özel roller kullanıyorsanız, bunların ARIA'da veya kullandığınız ana bilgisayar dilinde (HTML, SVG, MathML, vb.) Tanımlanmış herhangi bir rolle çakışmadıklarından emin olun.