We’re currently trying to make our web Application compliant with the WCAG standards, and right now it fails a few of the requirements.
we're getting "The CSS outline or border style on this element makes it difficult or impossible to see the dotted link focus outline." accessibility issue.
After a lot of troubleshooting, we discovered that this problem is caused by a CSS file that comes from Kendo, a third-party tool we use. Unfortunately, we can't change that CSS file. We also tried to override the styling with our own, but the problem still persists.
all.scss , this is the file containing the css coming by importing this module, @progress/kendo-theme-bootstrap/dist/all.scss
Kindly refer to attached file for more clarity.
(p.s. we're using sortsite standard for accessibility)
1 Answer, 1 is accepted
Hello, karuna,
Thank you for reaching out to us.
The main swatch of the Bootstrap theme is not designed to be accessible, but you can use the Ocean Blue A11y Accessibility Swatch (or and reuse its styles) that is created especially to WCAG Level AA requirements:
You can test it here:
https://stackblitz.com/edit/react-q4z2ok?file=app%2Fmain.jsx
Regards,
Vessy
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!