Is ember light table accessibility compliant?

[vanya-sen]

Hey, I was successfully able to integrate ember light table in my project, but it generates separate tables for each thead, tbody and tfoot I am getting this accessibility error : description:"Ensure that each table header in a data table refers to data cells" help:"All th element and elements with role=columnheader/rowheader must data cells which it describes"

[alexander-alvarez]

hey @vanya-sen honestly. I'm not sure... as we haven't had people focus on it. Are you familiar enough with accessibility to detail requirements you're looking for and we can work towards achieving that goal (if possible given our current DOM structure)? Maybe even lend a hand where we are lacking?

[vanya-sen]

The Accessibility criteria requires that the thead, tbody and tfoot should be part of a single table so that each table header in a data table refers to data cells that way each header cell that is used is actually a header of something. Reference: (https://www.w3.org/WAI/tutorials/tables/), (https://dequeuniversity.com/rules/axe/2.1/th-has-data-cells?application=axeAPI)

I have downloaded your code and included in my project and tried customizing it by putting the contents of template/light-table.hbs inside a 'table' tag and removed individual 'table' tags from lt-body.hbs, lt-foot.hbs, lt-head.hbs, and the accessibility error got resolved, but row expansion and fixed header stopped working, out of which I got expansion to work and looking into fixed header issue.

I'll try to create a pull request with these changes over this weekend or next. But it would be really great if we can handle fixed header/footer functionality using css and jquery rather than having the three parts(thead, tbody and tfoot) as separate tables.

[alexander-alvarez]

But it would be really great if we can handle fixed header/footer functionality using css and jquery rather than having the three parts(thead, tbody and tfoot) as separate tables.

This is how fixed header/footer column functionality is normally done, and how I know to do it (even when using jquery, you would make this DOM structure). If you have an example of a table that has an accessible DOM structure and also fixed headers etc, it would be great to look into their internals to see how we can improve this codebase.

[buschtoens]

If you take a look a the the permitted content and permitted parents of table elements, it becomes apparent, why we have to generate this ... weird markup.

As @alexander-alvarez already pointed out, we have to do this to enable fixed headers and footers. And it's probably only gonna get worse with #284 and #434. I'm genuinely sorry, but I don't see a way, we could change the markup.

Do you think there might be away to signal relationship of these fragmented tables with aria or data attributes or maybe something similar?

I've also have been toying with the idea of a Fastboot enabled SEO-friendly mode. That wouldn't really solve your accessibility problems, but it would offer a way to at least generate static accessibility compliant markup.

[bgentry]

One well-scoped accessibility improvement might be to use column and row scopes: http://a11yproject.com/posts/accessible-data-tables/

<table>
    <caption>Monthly Budget</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Amount Earned</th>
            <th scope="col">Amount Spent</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">January</th>
            <td>$2500</td>
            <td>$1500</td>
        </tr>
    </tbody>
</table>

Though I'm not sure that screen readers would use this info correctly since there are multiple independent table elements here. Maybe it'd be an improvement though?

[vanya-sen]

Hey guys, Sorry I am writing this late, actually I have tweaked some of yours code to match our requirements of a single table element comprising all the three (header, body and footer) component, and was able to make the header fix using some CSS hack. I am creating a PR for you guys to review

[vanya-sen]

Hi @offirgolan, have you got the chance to review the PR I raised for this https://github.com/offirgolan/ember-light-table/pull/490

[buschtoens]

Offir isn't actively maintaining this addon ATM. But Alex and I do our best to further improve this amazing project. Unfortunately we can't always devote that much time as we would like to. I'll try to take a close look at your PR in the coming days. Ideally, you would rebase it on the current master and especially try to make sure it works well with occlusion rendering and maybe fastboot.

Thank you so much for your continued interest in ELT and this important issue. :heart: