ARIA roles
role değer tiplerini (widget, document, landmark, abstract) öğrenirsin.
role özniteliği nedir?
role özniteliği bir öğeye anlamsal rol verir. Yerel HTML etiketinin taşımadığı bir rolü eklemek ya da yanlış rolü düzeltmek için kullanılır. Örneğin bir <div>'e role="navigation" verince ekran okuyucu onu menü olarak okur.
ARIA rolleri dört ana sınıfa ayrılır: widget (tek arayüz öğesi), document (içerik yapısı), landmark (sayfanın büyük bölümleri) ve abstract (yalnızca taban, HTML'de doğrudan kullanılmaz). Doğru sınıfı seçmek erişilebilirliği güçlendirir.
Widget ve document rolleri
Widget rolleri tek bir arayüz öğesini tanımlar: tab, button, checkbox, slider gibi. Bunlar genellikle JavaScript ile birlikte canlanır; yalnız başlarına bir iş yapmazlar.
Document rolleri içeriğin yapısını anlatır: article, definition, note, application. Bir <section>'ı role="region" ile sarmak yerine yerel etiketi tercih etmek çoğu zaman yeterlidir; ARIA yalnızca bir şey eksikse eklenir.
Abstract roller HTML'de kullanılmaz
Abstract roller (range, input, select, structure) yalnızca diğer rollerin tanımında taban olarak yer alır; HTML öğesine doğrudan yazılmaz. Örneğin slider rolü range'ten türetilmiştir, ama siz yalnızca role="slider" yazarsınız.
Sayfada gereksiz role eklemekten kaçının. <nav> zaten navigation rolünü taşır; üstüne role="navigation" yazmak işe yaramaz ve kodu şişirir. ARIA'yi yalnızca yerel HTML yetersiz kaldığında devreye sokun.
Uygulama navigation rolünde bir menü yaz
Body içine bir <div> ekle ve role özniteliğine navigation ver. İçine bir <ul> koy; içinde bir <li> olsun. <li> içine <a href="/hakkımızda">Hakkımızda</a> bağlantısı ekle.
Örnek çözümü göster
<body>
<div role="navigation">
<ul>
<li><a href="/hakkımızda">Hakkımızda</a></li>
</ul>
</div>
</body>Kendini test et
-
Hangisi bir landmark role'dür?
- tab
- banner
- checkbox
- option
Cevabı göster
banner — Doğru. banner bir landmark role'dür; sayfanın üst kısmını tanımlar.
-
navigation rolünü yaz
<div role="____"> <a href="/hakkımızda">Hakkımızda</a> </div>Cevabı göster
<div role="navigation"> <a href="/hakkımızda">Hakkımızda</a> </div> -
Rolü sınıfıyla eşleştir
- role="navigation"
- Landmark role
- role="tab"
- Widget role
- role="article"
- Document role
- role="range"
- Abstract role