Ekran okuyucusu tarafından okunacak bir div ayarlamasıyla ilgili sorun yaşıyorsanız

Question

Sorun: Yayılma düğmesinin odaklandığı bir yayılma etiketinin içine yerleştirilmiş bir divum var. > p etiketi, span, bu div okumuyor, sadece üzerinde atlar farklı ekran okuyucular ve farklı tarayıcılar, aynı sorunu çalıştı

<span role="button" tabindex = 0> 
    <div id= "nestedDiv" aria-hidden ="false" tabindex = 0> 
      <p tabindex =0> Read this text </p> 
    </div> 
</span> 

odağı aldığında - okuyucu içe içe geçmiş metni 'okundu' bir sonraki okunabilir öğeye.

Answer 1

Bunu NVDA + firefox'ta denedim ve yayına geçtiğimde "bu metni oku." Okur. Hangi tarayıcıda sorun yaşıyorsun?
<p id="foo"> gibi paragrafa bir kimlik ekleyebilir ve <span>'a aria-labelledby="foo" ekleyin.
Ancak:
Karl Brown yorumu% 100 doğrudur - semantik işaretlemeyi kullanmak en iyisidir. Açıklık bir şey mi yapıyor? Eğer öyleyse, bir düğme olmalı. Seni farklı bir sayfaya mi getiriyor? Eğer öyleyse, bir çapa olmalı.
Ayrıca, neden bu kadar çok tabindex? Bu öğenin dışına çıkmak için üç sekme gerekir; bu iyi değildir. Uygun semantik kullanırsanız, tabindex'e ihtiyacınız olmaz ve herhangi bir aria özniteliğine ihtiyaç duymazsınız.