Erişilebilirlik: sr okunur veya arya etiketli

Question

From MDN: Aşağıdaki örnekte

, bir düğme ortasında bir X ile, tipik bir "yakın" düğmesi gibi görünmek üzere tasarlandı. Düğmenin amacının diyaloğu kapatmak olduğunu belirten bir şey olmadığı için, aria-label özelliği etiketi herhangi bir yardımcı teknolojiye sağlamak için kullanılır.

.sr okunur

Bu yüzden ben de yazabilirim tahmin ile ekran okuyucuları hariç tüm cihazlara unsurunu Hide: Bootstrap Belgeler göre

<button aria-label="Close" onclick="myDialog.close()">X</button> 

<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button> 

Bir Önyükleme pro ject, hangisini tercih edeceğimi nasıl seçebilirim?

Answer 1

MDN örneğinde, bir ekran okuyucu sadece aria-label düğmesindeki metni geçersiz kıldığından "yakın" kelimesini kullanacaktır. Bu, Bootstrap olmadan kodu yeniden kullansanız bile çalışır.

Örneğinizde, ekran okuyucularından "x" i saklayacak hiçbir şey yapmadığınız için bir ekran okuyucu "close x" ifadesini kullanacaktır. Bir sınıfla birlikte saklamak için bir metin düğümü de ekliyorsunuz.

Örneği MDN'den kullanırdım.