NVDA screen reader ignores Bootstrap `sr
We have a web application that we're working on making more accessible and we have discovered that when using the NVDA screen reader it ignores all text that we have marked with Bootstrap 3's sr-only css class.
According to WebAIM, modern screen readers should recognize and read the text. However, I can only get NVDA to recognize the text if I can visibly see the text. As soon as I adjust the CSS (clip, overflow, etc.) and it becomes visible, NVDA will start to pick it up.
So short of me displaying the text with left: -10000px , the screen reader won't recognize it. I'm wondering if there's something I'm missing, before I start moving all of my text off the screen.
Thanks in advance!
UPDATE
We're testing on both Chrome (v58.0.3029.110) and Firefox (v52.0.2) using NVDA 2017.1. You can try it yourself on our live website. Our main focus is on the Next/Previous/Home/Expand Screen buttons located at the top of the reading section in the middle of the page.
After some additional testing, we're noticing that NVDA reads the text on Chrome and Firefox when tabbing, but not when the mouse interacts with the buttons. We just tried Microsoft Edge as well and that seems to be working flawlessly (go figure)...
链接地址: http://www.djcxy.com/p/50488.html