[Solved] DropdownList, virtualization and screen reader issue

1 Answer 20 Views

Accessibility DropDownList

1 Answer, 1 is accepted

answered on 19 Mar 2026, 12:07 PM

Hello Miljana,

Thank you for sharing your setup and describing the accessibility issue with screen readers in combination with backend pagination and virtualization.

I tested a similar example that implements remote data virtualization with NVDA, but the records are announced correctly:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/dropdowns-virtualization-with-remote-data

Could you please check it out and let us know how it differs from your setup? To provide a more targeted solution, could you please clarify which exact versions of Kendo UI for Angular and Angular you are using, and whether you are using any custom templates for dropdown items, or the default rendering?

Looking forward to your reply.

Regards,

Martin Bechev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Miljana

commented on 23 Mar 2026, 04:13 PM

Thank you for response, Martin. Since our backend implementation requires page/pageSize instead of skip/take and have large amount of data, we decided to leave out virtualization altogether and implement scroll event on dropdown options to load more on scroll. Would be nice to have some event like this out of box, just like kendo-listview has scrollBottom event.

Martin Bechev

commented on 26 Mar 2026, 09:07 AM

Hi Miljana,

The loadMore or scrollBottom events, were introduced as a backup option for improving the performance (mainly bacuse of the lack of virtualziation for those components).

Generally all our components that support virtualization work on skip/take mechanism. You can convert the skip/take to page/pageSize, but it would just mean wrapping every pageChange emission with arithmetic to derive page from skip.

Something like:

const page = Math.floor(state.skip / state.take) + 1;
const pageSize = state.take;