Otomatik Tamamlama Bileşenlerinde Erişilebilirlik

WAI-ARIA birleşik kutu deseni, otomatik tamamlama bileşenleri için belirli bir rol ve özellik kümesi tanımlar. Birleşik kutu, bir liste kutusu açılır penceresiyle eşleştirilmiş bir giriş öğesidir. Bu desen, ekran okuyucuların görsel kullanıcı arayüzünü göremeyen kullanıcılara etkileşim davranışını, kullanılabilir seçenekleri ve geçerli seçimi doğru biçimde duyurmasını sağlar.

Girişi, role="combobox" özelliğine sahip bir div ile sarın. Bu, yardımcı teknolojilere giriş alanıyla ilişkili bir açılır liste bulunduğunu bildirir. Öneri listesinin o anda görünür mü yoksa gizli mi olduğunu ekran okuyuculara bildirmek için bu sarmalayıcıda aria-expanded={isOpen} özelliğini ayarlayın.

Giriş öğesinin kendisi şu özelliklere sahip olmalıdır: aria-autocomplete="list" (açılır pencere bir öneri listesi içerir), aria-haspopup="listbox" (tıklamak veya yazmak bir liste kutusu açar), aria-expanded={isOpen} ve açılır liste öğesinin id değerini gösteren aria-controls="suggestion-list-id".

Girişteki aria-activedescendant, o anda vurgulanan seçeneğin id değerini gösterir. selectedIndex değeri 0 olduğunda aria-activedescendant="option-0" ayarını yapın. Ekran okuyucular, gerçek odağı giriş alanından taşımadan hangi öğenin etkin olduğunu duyurmak için bunu kullanır. Hiçbir öğe seçilmediğinde, özelliği kaldırın veya boş bir dize olarak ayarlayın.

Açılır liste kapsayıcı öğesinde role="listbox" bulunmalı ve girişin aria-controls değeriyle eşleşen benzersiz bir id kullanılmalıdır. Bu rol, erişilebilirlik ağacına bu öğenin seçilebilir seçeneklerden oluşan bir liste olduğunu bildirir. Liste kutusu, girişteki aria-activedescendant aracılığıyla dolaylı olarak odak alır.

Her öneri öğesinde role="option" ve option-0, option-1 gibi benzersiz bir id bulunmalıdır. O anda vurgulanan öğeyi belirtmek için aria-selected={index === selectedIndex} ekleyin. Kullanıcı ok tuşlarıyla gezinirken ekran okuyucular hem seçeneğin içeriğini hem de seçili olup olmadığını duyurur.

Kullanıcı ArrowDown tuşuna bastığında ve aria-activedescendant değeri option-1 olarak güncellendiğinde, VoiceOver "React kancaları, 5 öğeden 2.si" gibi bir duyuru yapar. Ekran okuyucu, ARIA işaretlemesinden seçeneğin metnini ve listedeki konumunu otomatik olarak okur. Klavye ile gezinme için ek canlı bölgelere gerek yoktur.

macOS üzerinde VoiceOver ile (açıp kapatmak için Cmd+F5 tuşlarına basın) ve Windows üzerinde NVDA ile (ücretsiz olarak indirilebilir) deneme yapın. Giriş alanına gidip yazmaya başlayın. Ekran okuyucunun birleşik kutu rolünü, bulunan sonuç sayısını ve ok tuşlarıyla ilerlerken her seçeneği duyurduğunu doğrulayın. Davranışı WAI-ARIA Yazım Uygulamaları Kılavuzu örnekleriyle karşılaştırın.

Öneriler eşzamansız olarak yüklendiğinde, aria-live="polite" ve aria-atomic="true" özelliklerine sahip, görsel olarak gizlenmiş bir div ekleyin. Yükleme tamamlandığında metin içeriğini "5 sonuç bulundu" veya "Sonuç bulunamadı" olarak güncelleyin. Ekran okuyucu, mevcut konuşma tamamlandıktan sonra bu mesajı duyurarak kullanıcıları sözlerini kesmeden bilgilendirir.

w3.org/WAI/ARIA/apg adresindeki WAI-ARIA Yazım Uygulamaları Kılavuzu (APG), çalışan kod örnekleri ve ayrıntılı klavye etkileşimi belirtimleri içeren özel bir birleşik kutu deseni sayfasına sahiptir. Tam erişilebilirlik kurallarına uyduğunuzdan emin olmak için otomatik tamamlama, iletişim kutuları veya sekmeler gibi etkileşimli bileşenleri uygularken her zaman APG'ye başvurun.

Görünür bir etiket öğesi yoksa giriş alanına bir aria-label sağlayın: aria-label="Search suggestions". Etiketler için yalnızca placeholder özelliğine güvenmeyin; yer tutucular kullanıcı yazmaya başladığında kaybolur ve tüm ekran okuyucular tarafından tutarlı biçimde duyurulmaz. htmlFor içeren görünür bir label öğesi her zaman en iyi seçenektir.

Otomatik tamamlama girişindeki aria-activedescendant özelliğinin amacı nedir?

Sarmalayıcıda role="combobox", giriş alanında aria-autocomplete="list", ayrıca giriş alanı ile öneri listesini ilişkilendirmek için aria-expanded, aria-controls ve aria-activedescendant kullanın. Her seçenekte role="option", benzersiz bir id ve aria-selected bulunmalıdır. Eşzamansız sonuç sayılarını duyurmak için bir aria-live bölgesi ekleyin.