Datatable: add accessibility to table header

Hello,

For accessibility purpose (WCAG2.1 rule 1.3.1), the HTML tables should have a not empty th tags to make the column headers visible for screen reader.

PrimeFaces generates nicely the th but there is an exception. If a column contains only technical stuff (s.t. icons), its headerText could be empty. In that case, the following code is generated by <p:column> with PrimeFaces 7.0 :

<th id="myForm:table:j_idt102" class="ui-state-default" role="columnheader" scope="col">
        <span class="ui-column-title"></span>
</th>

As said previously, the th can’t be empty. So when the headerText/f:facet header is blank, is it possible for PrimeFaces to generate a td instead of the th (only for that column) ?

Please note that this solution is also the one suggested by WAVE :

If the table cell is a header, provide text within the cell that describes the column or row. If the cell is not a header or must remain empty (such as the top-left cell in a data table), make the cell a td rather than a th.

An alternative solution exists : the developer can provide an accessibility-only title to the column such that <span class="hidden">Action icons column</span>. Personally I think that the choice between both solutions should be let to the developer because the second one is not always adapted.

[Rawi01]

I had a similar problem last week. According to our accessibility test we should use td instead of th for our “Toggle filters” button that toggles out filter row. This row should also use td for all cells.

I created a custom renderer that supports rendering a single column and a full row as td. I can provide a pull request as soon as I have some time to refactor my stuff.

[melloware]

Looking at the code this is a much more difficult change than hoped.