[Solved] Accessibility Issue: aria-hidden Alert on Kendo Tooltip Icons

1 Answer 80 Views

Accessibility ToolTip

Trena asked on 26 Jan 2026, 05:02 PM

Screenshot-of-the-code-causing-the-error.png

Screenshot-of-Participant-Grid-Aria-Hidden-Alerts.png

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.

1 Answer, 1 is accepted

answered on 29 Jan 2026, 02:54 PM

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

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.

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();
}
```
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

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.

Trena

commented on 23 Feb 2026, 04:23 PM

Hi Nikolay,

The JavaScript workaround did not resolve the issue. I will consider submitting a feature request.

Thanks for your assistance.

Best regards,

Trena

commented on 12 Mar 2026, 06:51 PM

Edit-Resource-Need-Focusable-element.png

Edit-Resource-Need-Element-is-hidden.png

Hi Nikolay,

I am getting the same alerts on different components. I didn't know whether I should start another question. With that said, here are the alerts I am receiving:

Element is hidden from screen reader using [aria-hidden = true]
Focusable element is not in keyboard tab order; should it be tabbable?

The first alert refers to the SVG element positioned at the conclusion of each selected field, and the second alert references the 'X' image at the end of the combobox component.

I assess that both elements should be both tabbable and focusable.

I have attempted to resolve both issues without success in identifying a viable solution. Is there a recognized method or solution to address these two alerts?

Snapshots of each alert are attached for reference.

Thanks,

Trena

Nikolay

commented on 17 Mar 2026, 02:42 PM

Hi Trena,

Kendo UI for ASP.NET MVC sets accessibility attributes automatically, and these may be reset after component updates. By default, icons like the SVG and 'X' clear button are not intended to be focusable unless they are interactive. The X button in question is not accessible as there is a keyboard combination for deleting items from the input. You can examien the available keyboard keys for navigating the below demo:

https://demos.telerik.com/aspnet-mvc/multiselect/keyboard-navigation

Making these elements tabbable and focusable is only recommended if they provide meaningful interaction (e.g., clicking the 'X' clears the ComboBox). If so, they should not have aria-hidden="true" and should have a tabindex attribute.

Regards,

Nikolay