Accessibility Issue: aria-hidden Alert on Kendo Tooltip Icons

[Trena]

I am currently using the ANDI accessibility tool and have encountered an accessibility issue with the tooltip icons across my application.

The tool reports an "Aria-Hidden Alert" stating: "Element is focusable but has or is contained by [aria-hidden = true]."

I've noted that the HTML for these elements shows aria-hidden = true and focusable = false. I believe the focusable attribute should be set to true.

I have attempted to resolve this by directly removing aria-hidden = true and changing focusable to true. However, the Kendo code consistently seems to override my modifications, reverting them back.

I have included the following to help diagnose the issue:

• A snapshot of the error.

• The corresponding HTML snippet showing aria-hidden = true and focusable = false.

• A link explaining the nature of this accessibility alert (https://www.ssa.gov/accessibility/andi/help/alerts.html?ariahidden).

Could you please advise on how to successfully override the Kendo code to correct this aria-hidden alert?

 

Thank you.

 

 

[Nikolay]

Hi Trena,

The ANDI tool reports an "Aria-Hidden Alert" because elements with aria-hidden="true" should not be focusable. This means that setting focusable="true" on an element with aria-hidden="true" does not resolve the accessibility problem—in fact, it may worsen it.

The correct accessibility practice is: if an element is meant to be focusable and interactable, it should not have aria-hidden="true". Conversely, if it should be hidden from assistive technologies, it must not be focusable.

Kendo UI for ASP.NET MVC sets these attributes during rendering and will reset them after any re-render or widget refresh. Direct DOM changes are not persistent.

Recommended Approaches

1. JavaScript Workaround
   You can use JavaScript to remove aria-hidden="true" from tooltip icons after they are rendered, ensuring the element remains both visible and focusable for assistive technologies.
   Example:

   function updateTooltipIcons() {
       $(".k-tooltip-icon[aria-hidden='true']").removeAttr("aria-hidden");
   }
   
   $(document).ready(function() {
       updateTooltipIcons();
   
       // Reapply after tooltip events if needed
       $(document).on("mouseenter", ".k-tooltip-icon", function() {
           updateTooltipIcons();
       });
   });
   

   • You may need to call this function after each tooltip initialization or content update.

2. Component Event Hooks
   If you are initializing tooltips via the Kendo UI helpers, you can use component events (such as show or open) to run your attribute-updating code.
   Example:

   @(Html.Kendo().Tooltip()
       .For("#myButton")
       .Events(e => e.Show("onTooltipShow"))
   )
   

   function onTooltipShow(e) {
       updateTooltipIcons();
   }
   

3. Configuration Options
   Currently, there is no built-in configuration in Kendo UI for ASP.NET MVC to customize these accessibility attributes for tooltip icons. If your scenario requires a more robust solution, consider submitting a feature request:

   • http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback

Regards,
Nikolay
Progress Telerik