Roll özniteliği neden eklendi?

ARIA (Erişilebilir Zengin İnternet Uygulamaları) içinde role özniteliği, bir öğenin kullanıcı arayüzü türünü açıkça tanımlamak için kullanılır. Bu, ekran okuyucular gibi yardımcı teknolojilerin, öğenin amacını anlamasına ve bu bilgiyi sınırlı yeteneklere sahip kullanıcılara iletmesine yardımcı olur. HTML semantiğini tamamlar, özellikle yerleşik semantiği olmayan öğeler veya standart semantik yeterli olmadığında.

Örneğin:

• div öğesine role="button" atanmışsa, ekran okuyucu tarafından bir düğme olarak algılanır, hatta standart davranış veya HTML düğmesi semantiği olmasa bile.

<div role="button" tabindex="0" aria-pressed="false">
  Beni tıkla
</div>

• nav öğesinde navigation rolü (ki nav zaten yerleşik navigasyon semantiğine sahiptir) bazı durumlarda yorumlamayı geliştirebilir.

<nav role="navigation">
  <ul>
    <li><a href="/">Ana Sayfa</a></li>
  </ul>
</nav>

• Bazı karmaşık widgetlar, semantik olmayan öğeler temel alınarak oluşturulmuşsa, doğru temsil için roller alırlar:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Sekme 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Sekme 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Sekme 1 içeriği.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Sekme 2 içeriği.
</div>

role özniteliği, öğeleri işlevleri ve amaçlarına göre sınıflandırır ve yardımcı teknolojiler kullanan kullanıcılar için daha doğru ve faydalı etkileşim sağlar. Diğer ARIA öznitelikleri (örneğin, aria-label, aria-expanded, aria-hidden) ile birlikte kullanılması önemlidir, çünkü bu öznitelikler öğelerin durumunu ve özelliklerini iletir.

Unutulmamalıdır:

• Her zaman HTML5'in yerel semantiğine öncelik verilir. Uygun bir HTML öğesi varsa, role ve diğer ARIA öznitelikleriyle davranışını taklit etmek yerine onu kullanın. Örneğin, <button> yerine <div role="button"> kullanmayın.
• Bir öğenin rolünü değiştirmek, onun yerleşik davranışını değiştirmez. Örneğin, div üzerinde role="button" kullanmak, onu Space veya Enter ile odaklanabilir veya etkinleştirilebilir yapmaz, ek JavaScript olmadan.