Last Updated: 07 Nov 2019 14:19 by ADMIN
Created on: 07 Nov 2019 14:19
Category: Grid
Type: Feature Request
Control the Aria-Label of Grid Column headers

The column headings read by JAWS are not great. I see that the rendered table headings have an aria-label attributes, but the text of these labels appears to match the DataField attribute of the grid column. Unfortunately, the DataField is often not the same as the human readable text displayed on the column header. This provides an inconsistent and sometimes confusing experience for screen reader users.

For example, if my data field is named something like full_name_with_title, but my column heading is actually "Full Name," the user will hear fullunderlinenameunderlinewithunderlinetitle, but we'd like them to hear "Full Name". All those underlines are confusing.

It would be much better if Telerik used the HeaderText attribute of the column instead of the DataField attribute. This would ensure that the presentational text and not the internal column names were read to the user.

A temporary workaround can be using the following OnGridCreated handler:

function OnGridCreated(sender, args) {
    if (sender.get_enableAriaSupport()) {
        sender.get_masterTableView().get_columns().forEach(function (col) {
            var header = col.get_element();
            var headerText = (header.textContent || header.innerText).replace(/^\s+|\s+$/g, '');
            header.setAttribute("aria-label", headerText);