This is a migrated thread and some comments may be shown as answers.

Accessibility for kendo dialog

1 Answer 108 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
sam
Top achievements
Rank 1
Veteran
sam asked on 17 Nov 2020, 08:53 PM
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

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 19 Nov 2020, 07:47 PM

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/.

Akash
Top achievements
Rank 1
commented on 15 Mar 2023, 10:39 AM | edited

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
Telerik team
commented on 16 Mar 2023, 04:32 PM

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.

Tags
General Discussions
Asked by
sam
Top achievements
Rank 1
Veteran
Answers by
Ivan Danchev
Telerik team
Share this question
or