Tüm özel kontrollerin uygun bir role öğesine ve özelliklerini ve durumunu sağlayan gerekli ARIA özelliklerine sahip olduğundan emin olun.
Örneğin, özel bir onay kutusunun durumunu doğru bir şekilde iletmek için role="checkbox" ve aria-checked="true|false" simgelerine ihtiyacı vardır.
ARIA'nın özel kontrollerde eksik anlamları nasıl sağlayabileceğine dair genel bir bakış için ARIA'ya giriş bölümüne bakın.
Manuel olarak test etme
Tüm özel etkileşimli kontrollerin uygun ARIA rollerine sahip olup olmadığını kontrol etmek için Chrome Geliştirici Araçları erişilebilirlik bölmesini veya bir ekran okuyucuyu kullanarak sayfayı test edin. JAWS ve NVDA, Windows için en popüler ekran okuyuculardan ikisidir. VoiceOver, MacOS'te yerleşik olarak bulunan ekran okuyucudur.
CSS kullanarak <div> ve <button> öğelerine aynı görsel özellikleri iletecek şekilde stil vermek mümkündür ancak ekran okuyucu kullanılırken iki deneyim çok farklıdır.
<div>, genel bir gruplandırma öğesidir. Bu nedenle, ekran okuyucu yalnızca <div> öğesinin metin içeriğini bildirir.
<button> bir "düğme" olarak duyurulur. Bu düğme, kullanıcıya etkileşimde bulunabileceği bir şey olduğuna dair çok daha güçlü bir sinyal verir.
Ayrıca bkz. Semantik ve ekran okuyucular.
Nasıl düzeltilir?
Bu sorunun en basit ve genellikle en iyi çözümü, özel etkileşimli denetimlerden tamamen kaçınmaktır.
Örneğin, düğme gibi çalışan bir <div> öğesini gerçek bir <button> ile değiştirin.
<div> öğesini kullanmaya devam etmeniz gerekiyorsa role="button" ve aria-pressed="false" öğelerini <div> öğesine ekleyin.
Artık ekran okuyucular <div> rolünü ve etkileşimli durumunu duyuracak.
Bu neden önemli?
Yardımcı teknoloji kullanıcılarının içeriğinizle nasıl bir deneyim yaşadığını tam olarak anlamanın tek yolu, söz konusu içeriği bir ekran okuyucu kullanarak kendiniz kontrol etmektir. Ekran okuyucu kullanmak, içeriğinizin nasıl etiketlendiğini ve teknolojide gezinmeye yardımcı olacak herhangi bir engel olup olmadığını net bir şekilde anlamanızı sağlar. Anlamsal işaretlemenin yardımcı teknoloji tarafından nasıl yorumlandığına aşina değilseniz bilgilerinizi tazelemek için Semantike Giriş bölümünü inceleyebilirsiniz.
Erişilebilirlik İncelemesi Nasıl Yapılır? başlıklı makaleyi de inceleyin.
Kaynaklar
Özel kontrollerde ARIA rolleri var denetimi için kaynak kodu