tooltip in th header cells not accessible

leslies61801

Hi,

I need to add a tool tip to multiple th header cells that also support sorting. I am using a Datatables 1.10.7 with a foundation 6 tool tip and it works fine on hover. We have a requirement to make it accessible for keyboard navigation. The table header row cells are accessible via keyboard but only to read the heading text and provide support for sorting. The keyboard access can't get to the tooltip within the header row cell.

Here is a sample table:

<table id="myTable" class="display hover">
    <thead>
        <tr>
            <th role="columnheader" style="min-width: 5em;" id="fname">First Name <span data-tooltip aria-haspopup="true" class="has-tip top" data-click-open="false" data-disable-hover="false" tabindex="2" title="Employee first name"><img src="info.png" alt="help text"></span></th>
            <th role="columnheader" style="min-width: 6em;" id="lname">Last Name <span data-tooltip aria-haspopup="true" class="has-tip top" data-click-open="false" data-disable-hover="false" tabindex="2" title="Employee last name"><img src="info.png" alt="help text"></span></th>
            <th role="columnheader" style="min-width: 6em;" id="Actions" class="no-sort">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Fred</td>
            <td>Jones</td>
            <td><img src="edit.png" alt="Edit Employee"><img src="delete.png" alt="Delete Employee">
        </tr>
    </tbody>
</table>

Does anyone have suggestions on how to obtain keyboard access to the tooltip within the heading th cells that are sortable?

Please let me know if you need more information.

Thanks,

Leslie

allan

How would you make the title attribute keyboard accessible outside of DataTables?

I don't believe there is a way built into the browser. You'd need to use some custom Javascript that would display the title to the end user - but you'd run into accessibility issues communicating how to make it show to the end user.

Allan

leslies61801

Hi Allan,

By updating the tabIndex of the span you can make add the span into the tab order of the page. The parameters (outside the title content) of the spans in my example are taken directly from foundation 6's web docs. It works as a hover but because the datatable javascript make the whole cell into a button for sorting, the keyboard can not get within the text of the th cell to access the image used for the span and the tool tip.

WebAIM has some great documentation on tabindex and its proper uses at https://webaim.org/techniques/keyboard/tabindex .

allan

Hi,

I'm not clear on what span elements you are referring to. In this example the header cells are just th elements with text content. They have tabIndex="0" on them to make them fit in with the documents natural tab flow and also have ARIA attributes for accessibility.

I get the feeling I'm missing something

Allan

leslies61801

Hi Allan,

I apologize for not being more clear.

We wanted to add a tool tip or way for a keyboard user to go into the th cell to select an image button to activate a tool tip (help info). Since the whole th becomes a button for sorting, we can't do it. We have decided to use a different method to provide help info about what each column contains instead of using a tool tip.

You can close this item if you want.

Thank you for your responsiveness!

Leslie

allan

Ah I see - thanks for clarifying that! Yup - completely understood. The header rendering of DataTables is a weakness I will fix in future.

At the moment I think you would need to use $('#myTable thead th').removeAttr('tabindex') once the table has been initialised.

Allan

ayusharora44

Try this !!!

https://stackoverflow.com/questions/32318129/how-to-add-tooltip-to-table-header#answer-32318415