Grid Accessibility Issue

[Trena]

Hi,

My job is using the ANDI Accessibility Tool to test for accessibility and Section 508 compliance.

The tool keeps telling me that the, "Grid Element has no accessible name."  I have tried all of the suggestions listed in your online Grid Accessibility document.  However, I'm still getting the same message.

I also used the ANDI tool on your accessibility grid example and I received the same message.

Can someone assist me with this issue?

ANDI is a free Chrome Extension: https://chromewebstore.google.com/detail/unofficial-andi/fehcidpnbiemiekbbgligjlgjbhjchon.

I am including the results from my application and from your online demo grid.

Thanks,

Trena

[Anton Mironov]

Hello Trena,

Thank you for sharing your findings with the ANDI Accessibility Tool and noting that the "Grid Element has no accessible name" message appears both in your application and in the official demo.

About the Issue and Current Accessibility Support:

• The Grid is designed with accessibility in mind and aims to meet WCAG and Section 508 standards. However, the ANDI tool specifically checks for an accessible name on the main grid container, which may not be present by default in all scenarios.
• This behavior can occur on the official demo as well, and it is not related to a misconfiguration on your end. Instead, it reflects how the grid's container is rendered out-of-the-box.

How to Add an Accessible Name:

• You can resolve this by explicitly setting an accessible name using ARIA attributes or a title on the grid’s container. For example, when initializing the grid, use:

@(Html.Kendo().Grid<MyModel>()
      .Name("AccessibleGrid")
      .HtmlAttributes(new { aria_label = "Data Grid", title = "Data Grid" })
      // Other grid configuration...
)

• This will add the necessary attributes to the grid container, making it recognizable to accessibility tools like ANDI.

Framework-Level Considerations:

• If the accessible name is still not recognized, it may be due to how the grid structure is generated by the framework. While the grid supports accessibility, some automated tools may require additional attributes that are not rendered by default.
• In such cases, manually adding ARIA attributes as shown above is the recommended approach.

Next Steps and Additional Information:

• After applying these changes, inspect the generated HTML to confirm that the attributes are present on the main grid container (typically a <div> with a class such as k-grid).
• For further details, you can review the accessibility documentation:
• https://docs.telerik.com/aspnet-mvc/accessibility/accessibility-compliance

If you encounter other accessibility tool findings or have specific requirements, please share the HTML output or describe the scenario, and I will provide more targeted guidance.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Trena]

Hi Anton,

Thanks so much.  I appreciate your assistance. I added the HTML attributes however, I am still receiving the same message. 

I am attaching an image of the HTML code.

Thanks,

Trena

[Anton Mironov]

Hello Trena,

Thank you for the kind words and the additional details and image provided.

The Grid is compliant with the Web Content Accessibility Guidelines (WCAG) 2.2 AA standards and Section 508 requirements, follows the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) best practices for implementing the keyboard navigation for its component role, provides options for managing its focus, and is tested against the most popular screen readers.

Can you please double-check if the configurations in your Grid are set as per the instructions in the following article:

• https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/accessibility/overview

Feel free to add all the attributes recommended in the article above, and let me know if this achieves the desired result.

 

Best Regards,
Anton Mironov
Progress Telerik