Erişilebilir öğe açıklamaları oluşturmak için ARIA etiketlerini kullanma
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).
aria-etiketli-takmali
aria-labelledby
, DOM'daki başka bir öğenin kimliğini bir öğenin etiketi olarak belirtmemizi sağlar.
Bu, bazı önemli farklılıklar dışında label
öğesini kullanmaya çok benzer.
aria-labelledby
sadece etiketlenebilir öğelerde değil tüm öğelerde kullanılabilir.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.- 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. - 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 gizlispan
ekleyebilir ve bunaaria-labelledby
ile başvuruda bulunabilirsiniz. - 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.
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.
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.
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.