Etkileşimli öğeler, amaçlarını ve durumlarını belirtir

Bağlantılar ve düğmeler gibi etkileşimli öğeler, durumlarını belirtmeli ve etkileşimli olmayan öğelerden ayırt edilebilir olmalıdır. Etkileşimli öğelerin amaçlarını ve durumlarını belirttiğini kontrol etmek için hem görsel hem de ekran okuyucu testi kullanın.

Manuel olarak test etme

Etkileşimli öğeleri görsel olarak ve ekran okuyucularla test etmelisiniz.

Görsel odağı test etme

Görsel odağı manuel olarak test etmek için sayfanızda TAB tuşuna basın.

  • Her etkileşimli öğeye TAB alabiliyor musunuz?
  • Etkileşimli bir öğeye geldiğinizde, kullanıcıların bu öğeyle etkileşimde bulunabileceğine dair görsel bir ipucu var mı?
  • Seçtiğiniz her bir etkileşimli öğenin görünümü değişiyor mu?

Her etkileşimli öğenin odak göstergelerine stil uygulamanın birçok yolu vardır. Bunun bir yolu :focus sözde sınıfına stil uygulamaktır. Bu stil, odaklamak için kullanılan giriş cihazından veya yöntemden bağımsız olarak öğe her odaklanıldığında uygulanır.

Odağın stilini belirleme hakkında daha fazla bilgi edinin.

Ekran okuyucularla test etme

Sayfanızda gezinmek için ekran okuyucu kullanın ve ekran okuyucunun her etkileşimli kontrolün adını, rolünü ve mevcut etkileşimli durumunu duyurduğunu kontrol edin. Bir öğenin rolü ve durumu net değilse uygun ARIA rollerini eklemeniz gerekebilir.

Özel denetimlerin ARIA rolleri vardır başlıklı makalede daha fazla bilgi edinin.

Etkileşimli öğelerin nasıl etiketlendiğine de dikkat etmek önemlidir. Ekran okuyucu ve diğer yardımcı teknolojileri kullananlar, öğenin bağlamını anlamak için etiketlerden yararlanır. Belirsiz etiketler yaygındır ve içerikte gezinirken faydalı değildir. Etiketleri ve metin alternatiflerini nasıl iyileştireceğinizi öğrenin.

Bu neden önemli?

Bir kontrolün ne işe yaradığı konusunda görsel ipuçları sağlamak, kullanıcıların sitenizi çalışmasına ve gezinmesine yardımcı olabilir. Bu ipuçlarına satın alma işlemleri denir. Uygun ücretler, kullanıcıların sitenizi çok çeşitli cihazlarda kullanmasına olanak tanır.

Kaynaklar

Etkileşimli öğeler amacını ve durumunu belirtir denetimi için kaynak kod