Dynamic window content not being read by screenreader

[Becky]

I am having some problems with the Kendo Window and getting the content of the window being read by a screen reader (testing on NVDA).

The contents of the window is from a partial view and the window is created via jquery. The code is:

<div id="TopNavKendoWindow" style='display:none'></div>

 

$("#TopNavKendoWindow").kendoWindow();
var testWindow = $("#TopNavKendoWindow").data("kendoWindow");
testWindow.setOptions({
  content: {url:'@Url.Action("ReportIssue", "Support", new { area = "Hub" })'},
  title: 'Window Title Here',
  height: '300px',
  width: '300px'
});
testWindow.center().refresh().open();

 

When testing with a screenreader, the reader will read out the title of the window but not the content of it. 

If I change the div to have the content in it and not pass through the 'content' to setOptions, then the screenreader will readout the title and the content successfully.

<div id="TopNavKendoWindow" style='display:none'>this is a test</div>

 

$("#TopNavKendoWindow").kendoWindow();
var testWindow = $("#TopNavKendoWindow").data("kendoWindow");
testWindow.setOptions({
   title: 'Window Title Here',
   height: '300px',
   width: '300px'
});
testWindow.center().refresh().open();

 

Is anyone able to help me so that I can use the content url of setOptions and get the screenreader to read out the dynamic content?

Thanks

 

[Ianko]

Hello Becky,

I tested with this demo here and everything seems to be read fine by the NVDA reader. https://demos.telerik.com/kendo-ui/window/ajax. 

Regards,
Ianko
Progress Telerik

[Becky]

Hi Ianko,

This demo is not the same as my example. The window is already showing on the page as the page loads.

In my example the window has not been loaded and the window opens and the content loaded as a user clicks on the button. Therefore when the page initially loads all there is on the page is an empty div, then when the user clicks a button the div gets converted to a kendo window and the content is retrieved from my controller and then displayed in the window.

If you have an example of this then that would be great, however when I searched through your demos before initially posting the question I couldn't find any.

[Ianko]

Hi Becky,

I created an example based on the situation described, but I am still unable to reproduce the described problem. I am attaching the project here so that you can check it out. 

Regards,
Ianko
Progress Telerik

[Becky]

Hi Ianko,

Thanks for the sample project. I ran this up and the NVDA read out the content perfectly. However, this wasn't exactly the same as my sample, so I changed it so that the window only showed when you click the 'refresh' button and it passed in a viewmodel instead of just a string. 

With these changes I was able to replicate my original issue where it reads out the title only. However, on the second time of pressing the button (or on a browser refresh) it does read out the content. If you either clear your browser cache (or run the project again) then the issue re-occurs.

I have attached the project so you can take a look.

Many thanks

Becky

[Ianko]

Hi Becky,

I updated the project with the code you sent. On my end I am still unable to see any problems. I am doing the following steps:

1. Run the project;
2. Using keyboard's Tab key to navigate to the Button (NVDA: "Refresh button");
3. Pressing Enter to open the Kendo Window (NVDA: "Window Title Here     New GUID and so on")

Note that using the mouse cursor might lead to different behavior as NVDA will read the element that is hovered on changing the cursor position. 

Regards,
Ianko
Progress Telerik