I'm trying to test the accessibility of the grid detailTemplate on https://demos.telerik.com/kendo-ui/grid/detailtemplate , namely keyboard navigation.
Honestly, I don't even know where I am. I know when I'm focused on the button "Edit in theme builder" (it's barely visible, but visible), and when I press tab, document.activeElement points to the first table header ("Last Name"), but it's not visible at all. Then I keep getting lost.
I have tested it with all sass-based themes and the less-based Material theme.
Hello Anna,
Widgets, such as the Grid, require additional configuration to enable them to successfully pass the WCAG or Section 508 validation.
The demo page where keyboard support of the Kendo UI grid widget is demonstrated is https://demos.telerik.com/kendo-ui/grid/keyboard-navigation. Setting navigatable: true provides quick access to available grid features without the need to interact with the mouse. Furthermore, applications that must cover accessibility standards for people with disabilities can directly benefit from it.
Also to serve users with low vision or other visual disabilities, which require a high contrast ratio between foreground and background elements we recommend using Kendo UI theme called High Contrast.
More information on the matter could be found at Accessibility section in the documentation especially:
https://docs.telerik.com/kendo-ui/accessibility/keyboard-support
https://docs.telerik.com/kendo-ui/accessibility/high-contrast-theme
Please try the Keyboard Navigation demo page with High Contrast theme, for WCAG compliance.
Regards,
Denitsa
Progress Telerik