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
1 Answer, 1 is accepted
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
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
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
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.