Screen reader is not interpreting tab navgation?

Question

I have a pop-up window that I have enabled with tab stops via tabindex=0 . When I interact with the page without a screen reader, I can use the tab key to move between the window and form elements that it contains.

When I use my screen reader client (Window Eyes 8.4) to view my website, I cannot consistently tab into the window.

Are there any special cases with code structure that I should be considering that would cause the window to either lose focus or prevent the screen reader from interpreting the markup of the pop-up?

For reference - I'm in a ASP .NET MVC4 web app (page is HTML/CSS/JS) that is generating the pop-up with a Kendo UI [Kendo] Window.

Answer 1

03/17 Update - The pop-up is intermittently announced by the screen reader as a dialogue box but as soon as the pop-up loads, I can - occasionally - tab into the div and focus is not lost. I am not able to consistently reproduce this and only found this out after pressing the tab key rapidly after pressing the button to show the pop-up.

On the other hand (when not hitting the tab key rapidly), the focus consistently lands at the pop-up without focus outlines (screen reader announces "Foo dialogue box") but on first tab keypress, focus jumps back to the underlying page at the last actionable element before the footer. Pressing tab at this time will then move me into the footer UL element.

Answer 2

It is difficult to answer without a demo, but there are a couple of areas to investigate.

I did a page on the accessibility requirements for a content based pop-up , ie one that is not a form. That also includes code on how to manage the focus.

If the pop-up is essentially form based, you might want to try this one on dialogue boxes .

You'll see from those examples that adding tabindex to the container is only part of it, you should manage the focus as well, so that the focus is moved to the pop-up.

The sporadic nature of the issue might be because screen readers generally don't read things that are display:none , and tabbing to something that isn't there may not activate reliably.

If you can post an example I can update this answer.