-
-
Notifications
You must be signed in to change notification settings - Fork 132
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is ember light table accessibility compliant? #406
Comments
hey @vanya-sen honestly. I'm not sure... as we haven't had people focus on it. |
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. 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. |
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. |
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 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. |
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 |
Hey guys, |
Hi @offirgolan, have you got the chance to review the PR I raised for this #490 |
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 Thank you so much for your continued interest in ELT and this important issue. ❤️ |
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"
The text was updated successfully, but these errors were encountered: