Caption and summary for accessibility in table

[Setra_Art]

Hi PrimeNG team.

I'm currently working on the accessibility of my applications and one of the requirement is to have a caption and sometimes a summary on the tables.
As it is described in WCAG 2.1 standard, it should be added:
- with a caption tag inside table tag (for caption)
- with a summary attribute inside table tag (for summary)

Code: Select all

<table>
  <caption>Concerts</caption>
</table>

Code: Select all

<table summary="Column one has the location and size of accommodation, other columns show the type and number of properties available.">
</table>

source:
https://www.w3.org/WAI/tutorials/tables ... n-summary/
https://www.w3.org/WAI/WCAG21/Techniques/html/H39

I saw that you have those 2 attributes via ng-template

Code: Select all

<p-table [columns]="cols" [value]="cars">
    <ng-template pTemplate="caption">
        List of Cars
    </ng-template>
    <ng-template pTemplate="summary">
        There are {{cars?.length}} cars
    </ng-template>
</p-table>

But it is not encoded as mentioned previously and so, it's not read by screen readers. I imagine that it's beacause those 2 attributes are only for visual purposes?
Do you have any idea on how to encode this like in the WCAG standards for accessibility purposes?
Or do you plan to add new attributes (for example: aria-caption and aria-summary) to your datatables in the future?

For the caption problem I found a workaround putting a caption tag inside ng-template header and adding some css to visualy hide it:

Code: Select all

<p-table>
	<ng-template pTemplate="header">
                <caption>test caption</caption>
        </ng-template>
</p-table>

Code: Select all

table caption {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip-path: circle(1px);
}

But for summary, i can't find any workaround

Have a nice day