Bu kural ne anlama geliyor

Başarı Ölçütü 1.3.6, programatik amaç tanımlama kavramını form girdilerinin ötesinde tüm kullanıcı arayüzü bileşenlerine, simgelere ve sayfa bölgelerine genişletir. 1.3.5 özellikle kişisel veri alanları için autocomplete'e odaklanırken, 1.3.6 daha kapsamlıdır: her etkileşimli bileşenin, her simgenin ve her bölgenin amacı standart işaretleme — ARIA belirgin bölgeleri, roller, etiketler ve semantik HTML — aracılığıyla tanımlanabilir olmalıdır.

Bu ölçüt, yardımcı teknolojilerin ve kullanıcı tarafından yüklenen kişiselleştirme araçlarının içerik sunumunu uyarlamasına olanak tanır. Bir kullanıcı tanıdık olmayan simgeleri metin etiketleriyle değiştirebilir, gerekli olmayan bölgeleri gizleyebilir veya önemli bileşenlere görsel ipuçları ekleyebilir. Bu uyarlamalar, her öğenin amacının programatik olarak erişilebilir olmasını gerektirir.

Neden önemlidir

Bilişsel engelli kullanıcılar genellikle tanıdık olmayan simgeler, karmaşık arayüzler ve yoğun içerikle zorlanır. Her bileşenin ve bölgenin amacı programatik olarak tanımlandığında, kişiselleştirme araçları arayüzü basitleştirebilir — simgeleri kelimelerle değiştirebilir, gezintiyi vurgulayabilir veya ek içeriği gizleyebilir. Bu, bunaltıcı bir sayfayı yönetilebilir bir hale dönüştürür.

Bu ölçüt ayrıca sembol tabanlı iletişime dayanan kullanıcıları (AAC kullanıcıları) destekler; yardımcı teknolojinin arayüz öğelerini kullanıcının tercih ettiği sembol setini kullanarak sunmasına olanak tanır. Bir arama simgesi, kullanıcının iletişim panosundan tanıdığı bir sembolle değiştirilebilir.

İlgili axe-core kuralları

1.3.6 için belirli axe-core kuralları bulunmaz çünkü bu, otomatik testin tam olarak doğrulayamayacağı semantik bütünlük gerektiren Düzey AAA bir ölçüttür. Ancak ARIA belirgin bölgeleri, roller ve etiketlerle ilgili kurallar bu ölçütü karşılamaya katkıda bulunur.

Nasıl test edilir

Tüm sayfa bölgelerinin uygun ARIA belirgin bölge rolleri (<header>, <nav>, <main>, <aside>, <footer>) veya açık role nitelikleri kullandığını doğrulayın.
Her yalnızca simge içeren düğmenin veya bağlantının aria-label, aria-labelledby veya görsel olarak gizli metin aracılığıyla erişilebilir bir ada sahip olduğunu kontrol edin.
Etkileşimli bileşenlerin doğru ARIA rollerini (role="search", role="navigation", role="complementary" vb.) kullandığını doğrulayın.
Özellikle aynı belirgin bölgenin birden fazla örneği olduğunda bölgelerin açıklayıcı etiketlere sahip olduğunu doğrulayın (örneğin farklı aria-label değerlerine sahip iki <nav> öğesi).
Bir kişiselleştirme tarayıcı eklentisiyle test ederek programatik amaçlarına göre UI bileşenlerini tanımlayıp uyarlayabildiğini kontrol edin.

Nasıl düzeltilir

Sayfa bölgelerini tanımlamak için semantik HTML ve ARIA belirgin bölgeleri kullanın:

<header role="banner">
  <nav aria-label="Ana gezinti">
    <ul>
      <li><a href="/">Ana Sayfa</a></li>
      <li><a href="/hakkımızda">Hakkımızda</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Makale Başlığı</h1>
    <p>Makale içeriği...</p>
  </article>
</main>

<aside aria-label="İlgili makaleler">
  <h2>İlgili</h2>
  <ul>...</ul>
</aside>

<footer role="contentinfo">
  <nav aria-label="Alt bilgi gezintisi">...</nav>
</footer>

Her yalnızca simge içeren kontrole programatik bir ad verin:

<!-- Erişilebilir ada sahip yalnızca simge düğmesi -->
<button aria-label="Ara" type="submit">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-search" />
  </svg>
</button>

<!-- Görsel olarak gizli metinli yalnızca simge bağlantısı -->
<a href="/ayarlar">
  <svg aria-hidden="true"><use href="#icon-gear" /></svg>
  <span class="sr-only">Ayarlar</span>
</a>

Arama işlevi için search belirgin bölge rolünü kullanın:

<form role="search" aria-label="Site araması">
  <label for="search-input">Arama</label>
  <input type="search" id="search-input"
         name="q" autocomplete="off">
  <button type="submit">Ara</button>
</form>

Sık yapılan hatalar

Sayfa bölgeleri için semantik belirgin bölgeler yerine genel <div> kapsayıcıları kullanmak.
aria-label veya görsel olarak gizli metin içermeyen yalnızca simge düğmeleri, etiketlenmemiş olarak bırakmak.
Ayırt edici aria-label değerleri olmadan birden fazla gezinme belirgin bölgesi kullanmak (ikisi de etiketsiz iki <nav> öğesi).
Dekoratif simgelerde aria-hidden="true" eksikliği, ekran okuyucuların anlamsız içerik duyurmasına neden olmak.
ARIA rolleri olmadan özel bileşenler kullanmak, amaçlarını yardımcı teknoloji için görünmez kılmak.
Bir simgenin yanındaki görünür metnin yeterli olduğunu varsaymak — programatik ilişkilendirme açık olmalıdır.

1.3.6 Amacı Tanımlama