Dynamic window content not being read by screenreader

6 posts, 0 answers
  1. Becky
    Becky avatar
    6 posts
    Member since:
    May 2012

    Posted 15 Oct 2019 Link to this post

    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

     

  2. Ianko
    Admin
    Ianko avatar
    1941 posts

    Posted 16 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Becky
    Becky avatar
    6 posts
    Member since:
    May 2012

    Posted 17 Oct 2019 in reply to Ianko Link to this post

    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.

  4. Ianko
    Admin
    Ianko avatar
    1941 posts

    Posted 18 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Becky
    Becky avatar
    6 posts
    Member since:
    May 2012

    Posted 21 Oct 2019 in reply to Ianko Link to this post

    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

  6. Ianko
    Admin
    Ianko avatar
    1941 posts

    Posted 23 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top