3

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.

buttons we're trying to make accessible

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)...

Community
  • 1
  • 1
ngoue
  • 1,045
  • 1
  • 12
  • 25
  • What browser/OS, what version of NVDA, and what is the URL of the page so we can test? Also, `left` needs units (like `px`), though moving things off-screen that way is bad for RTL translations. – aardrian Jun 02 '17 at 20:59
  • @aardrian just updated the question – ngoue Jun 19 '17 at 17:09

0 Answers0