Last Updated: 11 Nov 2019 13:58 by ADMIN
Created on: 05 Nov 2019 15:37
Category: Notification
Type: Bug Report
[WCAG][Accessibility] Notifications are not WCAG compliant

I'm testing https://demos.telerik.com/kendo-ui/notification/index with the NVDA screen reader.

1. Notifications are not announced by the screen reader, violating success Criterion 4.1.3.

2. Notifications are not accessible by keyboard.

3. The "close" button is not semantically a button.

4. The "close" button is not focusable by keyboard.

5. Auto-hiding notifications violate the 2.2 guideline (enough time). I can give my user an option to see notifications for a longer time, say 100 seconds instead of 10, but unable to close them by keyboard, they can end up with an overflow of messages.

6. The color contrasts are insufficient (4.26 for the red ones, only 2.73 for the green ones).

Notifications are listed on https://docs.telerik.com/kendo-ui/accessibility/section-508-wcag as AA-level compliant, and while I understand they're one of the hardest component to make accessible due to their asynchronous nature, the current implementation is closer to a bad practices example than a correct solution.

1 comment
Veselin Tsvetanov
Posted on: 11 Nov 2019 13:58

Hello Anna,

Thank you for your input.

I will address each of the six points below:

1. You are correct. Currently, upon open, the Kendo Notification is not announced by screen readers. It actually lacks the role="alert", which will force the readers to announce its content upon open. 

2. Notifications are currently not focusable out-of-the-box. That is also something we should improve the widget. With the current state of the Notification, you could define a template for the widget which would hold a focusable element (tabindex="0"). This way you will be able to navigate to that element.

3. I am afraid that is also correct. The close button available in the Notification element is a simple span. It has no role set. Moreover, it has no text content or aria-label attribute set. As a result, even if focused, the screen reader would not announce anything.

4. Similarly to the entire Notification itself, the close button could not be focused.

5. The Notification focusing issue discussed above affects this scenario. In addition to focusing the Notification, the user should be allowed to manually close it by hitting a certain key.

6. The contrast issue should not be present when using the Kendo High Contrast theme.

Having all that said, I should agree that the Notification widget does not feature an accessible widget. Having that said, I have added the following issue to our backlog.

As a small token of gratitude for the reported, I have updated your Telerik points.

Veselin Tsvetanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.