Tüm özel kontrollerin uygun bir role ve özelliklerini ve durumlarını belirten gerekli ARIA özelliklerine sahip olup olmadığını kontrol edin.
Örneğin, özel onay kutusunun durumunu doğru şekilde iletmesi için role="checkbox" ve aria-checked="true|false" öğelerine ihtiyacı vardır.
Özel kontroller için eksik semantikleri ne zaman en iyi şekilde sağlayacağınızı anlamak üzere ARIA ve HTML'yi nasıl kullanacağınızı öğrenin.
Test etme
Tüm özel etkileşimli denetimlerin uygun ARIA rollerine sahip olup olmadığını kontrol etmek için sayfayı Chrome Geliştirici Araçları erişilebilirlik bölmesini veya bir ekran okuyucuyu kullanarak test edin.
JAWS ve NVDA, Windows için en popüler ekran okuyuculardan ikisidir. VoiceOver, macOS'te yerleşik olarak bulunan ekran okuyucudur.
CSS ile <div> ve <button> öğelerine aynı görsel olanakları sunacak şekilde stil uygulayabilirsiniz. Ancak ekran okuyucu kullanıldığında deneyim çok farklıdır. <div> yalnızca genel bir gruplandırma öğesidir. Bu nedenle, ekran okuyucular yalnızca <div> öğesinin metin içeriğini duyurur.
<button>, "düğme" olarak duyurulur. Bu, kullanıcıya etkileşimde bulunabileceği bir öğe olduğuna dair çok daha güçlü bir sinyaldir.
Anlam ve ekran okuyucular konusuna da bakın.
Nasıl düzeltilir?
Bu sorunun en iyi çözümü, özel etkileşimli denetimlerin birlikte kullanılmamasıdır. Örneğin, düğme gibi görünen <div> değerini gerçek bir <button> ile değiştirin.
<button>Learn more</button>
<div> kullanmanız gerekiyorsa role="button" ve aria-pressed="false" ekleyin.
<div role="button" aria-pressed="false">Learn more</div>
Artık ekran okuyucular, <div> öğesinin rolünü ve etkileşimli durumunu duyuruyor.
Bu neden önemli?
Daha önce yardımcı teknolojiler kullanmadıysanız içeriğinizin yardımcı teknoloji kullanıcıları için nasıl performans gösterdiğini bilmiyor olabilirsiniz. İdeal olarak, yardımcı teknolojileri düzenli olarak kullanan kullanıcılarla konuşabilir ve web sitenizin veya web uygulamanızın performansı hakkında geri bildirim paylaşabilirsiniz.
Yardımcı teknoloji kullanıcılarının içeriğinizi nasıl deneyimlediğini anlamanın bir diğer yolu da yardımcı teknolojiyle test etmek. Ekran okuyucu kullanmak, içeriğinizin nasıl etiketlendiğini ve gezinme konusunda herhangi bir engel olup olmadığını daha net anlamanıza yardımcı olur.
Kaynaklar
Özel kontrollerde ARIA rolleri var denetiminin kaynak koduna bakabilirsiniz.