ARIA etiketleri ve ilişkiler

Erişilebilir öğe açıklamaları oluşturmak için ARIA etiketlerini kullanma

Aylin Yazar
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Etiketler

ARIA, öğelere etiket ve açıklama eklemek için çeşitli mekanizmalar sağlar. Hatta ARIA erişilebilir yardım veya açıklama metni eklemenin tek yoludur. ARIA'nın erişilebilir etiketler oluşturmak için kullandığı özelliklere göz atalım.

aria etiketi

aria-label, erişilebilir etiket olarak kullanılacak bir dize belirtmemize olanak tanır. Bu, label öğesi gibi diğer yerel etiketleme mekanizmalarını geçersiz kılar. Örneğin, bir button hem metin içeriğine hem de aria-label değerine sahipse yalnızca aria-label değeri kullanılır.

aria-label özelliğini, bir öğenin amacını belirten bir görsel göstergeniz varsa (metin yerine grafik kullanan bir düğme gibi) kullanabilirsiniz. Ancak görsel göstergeye erişemeyen kişiler için bu amacı açıkça belirtmeniz gerekir (ör. bir düğmenin amacını belirtmek için yalnızca resim kullanan bir düğme).

Yalnızca resim düğmesini tanımlamak için aria etiketi kullanma.

aria-etiketli-takmali

aria-labelledby, DOM'daki başka bir öğenin kimliğini bir öğenin etiketi olarak belirtmemizi sağlar.

Bir radyo grubunu tanımlamak için aria-labellebi kullanma.

Bu, bazı önemli farklılıklar dışında label öğesini kullanmaya çok benzer.

  1. aria-labelledby sadece etiketlenebilir öğelerde değil tüm öğelerde kullanılabilir.
  2. label öğesi etiketlediği şeye işaret ederken, aria-labelledby söz konusu olduğunda ilişki tersine çevrilir. Etiketlenen şey, o öğeyi etiketleyen şeyi ifade eder.
  3. Etiketlenebilir bir öğeyle yalnızca bir etiket öğesi ilişkilendirilebilir ancak aria-labelledby, birden fazla öğeden etiket oluşturmak için IDREF'lerin listesini alabilir. Etiket, IDREF'lerin verildiği sırayla birleştirilir.
  4. Gizli olan ve aksi durumda erişilebilirlik ağacında yer almayacak öğelere başvurmak için aria-labelledby öğesini kullanabilirsiniz. Örneğin, etiketlemek istediğiniz bir öğenin yanına gizli span ekleyebilir ve buna aria-labelledby ile başvuruda bulunabilirsiniz.
  5. Ancak ARIA yalnızca erişilebilirlik ağacını etkilediğinden aria-labelledby, label öğesi kullanarak elde ettiğiniz alışık olduğunuz etiket tıklama davranışını sunmaz.

Önemli bir nokta da aria-labelledby, bir öğeye ilişkin tüm diğer ad kaynaklarını geçersiz kılar. Dolayısıyla, örneğin, bir öğede hem aria-labelledby hem de aria-label veya aria-labelledby ve yerel HTML label varsa aria-labelledby etiketi her zaman öncelikli olur.

İlişkiler

aria-labelledby, bir ilişki özelliğine örnek olarak verilebilir. İlişki özelliği, DOM ilişkilerinden bağımsız olarak sayfadaki öğeler arasında anlamsal bir ilişki oluşturur. aria-labelledby durumunda bu ilişki, "bu öğe, söz konusu öğe tarafından etiketlenir" olur.

ARIA spesifikasyonunda sekiz ilişki özelliği listelenir. Bunlardan altısı (aria-activedescendant, aria-controls, aria-describedby, aria-labelledby ve aria-owns), sayfadaki öğeler arasında yeni bir bağlantı oluşturmak için bir veya daha fazla öğeye referans verir. İki durum arasındaki fark, bağlantının ne anlama geldiği ve kullanıcılara nasıl sunulduğudur.

arya-sahipler

aria-owns, en çok kullanılan ARIA ilişkilerinden biridir. Bu özellik, yardımcı teknolojiye, DOM'da ayrı olan bir öğenin, geçerli öğenin alt öğesi olarak ele alınması gerektiğini veya mevcut alt öğeleri farklı bir sıraya sokarak yeniden düzenlemesini bildirmemizi sağlar. Örneğin, bir pop-up alt menü görsel olarak üst menüsünün yakınında konumlandırılmışsa ancak görsel sunumu etkileyeceği için üst menüsünün DOM alt öğesi olamayacaksa bu alt menüyü ekran okuyucuya üst menünün alt öğesi olarak sunmak için aria-owns kullanabilirsiniz.

Menü ve alt menü arasında ilişki kurmak için aria-own'ları kullanma.

arya-aktif alt öğesi

aria-activedescendant da buna benzer bir rol oynar. Bir sayfadaki etkin öğenin odağı olan öğe gibi, bir öğenin etkin alt öğesini ayarlamak da yardımcı teknolojiye, üst öğesinin gerçekten odaklandığı bir öğenin kullanıcıya odaklanılan öğe olarak sunulması gerektiğini söylememize olanak tanır. Örneğin, bir liste kutusunda sayfa odağını liste kutusu kapsayıcısında bırakmak, ancak aria-activedescendant özelliğinin şu anda seçili olan liste öğesine güncel kalmasını isteyebilirsiniz. Böylece, halihazırda seçili olan öğe yardımcı teknolojiye, odaklanılan öğe gibi görünür.

Liste kutusunda bir ilişki oluşturmak için aria-activedescendant kullanma.

arya-açıklayan

aria-describedby, aria-labelledby ile aynı şekilde erişilebilir bir açıklama sunar. aria-labelledby gibi aria-describedby, DOM'den gizlenmiş veya yardımcı teknoloji kullanıcılarından gizlenmiş olsun, başka şekilde görünür olmayan öğelere başvuruda bulunabilir. Bu, yalnızca yardımcı teknoloji kullanıcıları veya tüm kullanıcılar için geçerli olması fark etmeksizin, bir kullanıcının ihtiyaç duyabileceği açıklayıcı ek metinler olduğunda faydalı bir tekniktir.

Yaygın bir örnek olarak şifre giriş alanına, minimum şifre gereksinimlerini açıklayan açıklayıcı bir metin eşlik eder. Etiketten farklı olarak bu açıklama kullanıcıya sunulabilir veya hiç sunulmayabilir; kullanıcı açıklamaya erişip erişmeme seçeneğine sahip olabilir, açıklama diğer tüm bilgilerden sonra gelebilir veya başka bir şey tarafından önceden kaldırılabilir. Örneğin, kullanıcı bilgi girişi yapıyorsa girişi tekrar yankılanır ve öğenin açıklamasını kesintiye uğratabilir. Bu nedenle, açıklama tamamlayıcı ama önemli olmayan bilgileri iletmenin harika bir yoludur. Öğenin rolü gibi daha kritik bilgilerin önüne geçmez.

Şifre alanıyla ilişki kurmak için aria-describedby'yi kullanma.

aria pozisyonlu ve aria setsize

Geriye kalan ilişki özellikleri biraz farklıdır ve birlikte çalışır. aria-posinset ("kümedeki konum") ve aria-setsize ("kümenin boyutu"), liste gibi bir kümedeki kardeş öğeler arasındaki ilişkiyi tanımlamayla ilgilidir.

Bir grubun boyutu, DOM'da bulunan öğelere göre belirlenemediğinde (ör. DOM'de büyük bir listenin tamamının aynı anda olmasını önlemek için geç oluşturma kullanıldığında) aria-setsize, gerçek grup boyutunu ve aria-posinset, öğenin gruptaki konumunu belirtebilir. Örneğin, 1.000 öğe içerebilen bir kümede, belirli bir öğenin DOM'de ilk sırada görünmesine rağmen 857 aria-posinset değerine sahip olduğunu söyleyebilir ve daha sonra, kullanıcının tam listeyi isteğe bağlı olarak keşfedebilmesini sağlamak için dinamik HTML teknikleri kullanabilirsiniz.

Bir listede ilişki oluşturmak için aria-posinset ve aria-setsize kullanma.