Accessibility for kendo dialog

[sam]

Hi,

I am trying to make my web application accessible using screen reader(NVDA).

I am using a kendo dialog and the screen reader on pressing the H key says no header found when there is already a title for the dialog.
I have tried to add the header tag as well as the role='heading' attribute with no success

Example: https://dojo.telerik.com/ILESolAY 

Can you please let me know if this is possible with kendo dialog, if yes can you please provide an example of the same.

Thanks in advance

[Ivan Danchev]

Hi Sam,

Actually the Dialog does not have a heading, it has a title. The concept of heading as described here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role

The Dialog however is not supposed to display a structure of elements in a hierarchy in which the title would be at the top level, with further sub-headings under it. In the Dialog the title is separate from its content. The title doesn't have a role="heading", nor an aria-level attribute (e.g. aria-level="1"), which normally indicates the hierarchy of headings, as demonstrated in the linked article.

We follow the WAI ARIA specification, which does not require dialogs to have a heading.

Regards,
Ivan Danchev
Progress Telerik

[Akash]

Hey Ivan, As an accessibility advocate, I believe:

Without a heading, screen readers will announce the title attribute of the dialog as the accessible name for the dialog. In this case, the accessible name would be "Software Update." However, without a heading, the structure and hierarchy of the content within the dialog may be unclear to the user.

Adding a heading element within the dialog is recommended to provide additional context and structure for the content. For example, you could add a heading element with the text "Software Update" as follows:

 

https://demos.telerik.com/kendo-ui/dialog/index

[Ivan Danchev]

Akash,

Consider logging this potential accessibility improvement in our Feedback Portal: https://feedback.telerik.com/kendo-jquery-ui

The team will evaluate it. If the community is interested in such a change in the Dialog's title and it gets approved for implementation, it will be added in a future release.

[Nagarjuna]

Hi  Ivan,

I am also in need of this feature to be available. So I have submitted a request here. Please check. Thanks for your help!

Accessibility screen readers are not reading Header content in the Dialog window (telerik.com)

 

 

[Georgi Denchev]

Hi, Nagarjuna,

I've approved the Feature Request as it does seem logical. The more upvotes that it gets, the higher it will move up in our list of priorities.

At this time, you could use jQuery to manually replace the header with an <h> element that can be announced by a screen reader.

Best Regards,

Georgi

[Nagarjuna]

Hi Georgi,

Thanks for letting me know. But I am unable to replace the header with <h> element using jquery. Do you have sample code where I can set this? I have tried setting in jquery document ready event but its not able to access since dialog is not opened yet. It would be great if you could provide sample code to set this. Thanks in advance.

Thanks

[Nagarjuna]

Hi Georgi, Please never mind. I have fixed it using jquery. Thanks.