Hello all,
When working on the migration of Livetable of the page index to Live Data (LD), I noticed that Livetable supports an undocumented (doc now updated) description option (see how it’s used in the documents macro).
When set, the description leads to the creation of a caption element with class sr-only and the provided description in its contents.
For instance:
<caption class="sr-only">
This table lists documents found on this wiki based on passed criteria. The columns can be sorted and some can be filtered.
</caption>
I couldn’t find design documentation on this feature but I assume the intent was to provide additional help to screen readers on, as the text is hidden (but can be search user the browser’s find in page feature).
Option 1 - No support on LD
The feature is rarely used in XS, the simplest option is to simply not support it. Assuming the content surrounding the LD is enough to use and understand the LD.
Option 2 - Support of the description for screen readers only
Note: in this case we need to find an option more generic than caption as LD support several layouts, and only the Table one is based on a caption.
In this case, I suggest to use the aria-describedby attribute on the root of the layout (see Caption & Summary | Web Accessibility Initiative (WAI) | W3C), pointing to an hidden div containing the description.
Option 3 - Support of the description for sighted users
In this case, I suggest we let each layout use the html structure that can support best the descriptions base on its semantics.
For instance, if the layout is based on a table, a caption can be relevant. But, for the grid layout, wrapping the whole content in a figure with a caption could be relevant (I won’t go further in the details for now, before we picked an option).
I’m +1 for option 3, +0 for option 2, -0 for option 1.
WDYT?
The user experience for screen reader users might be slightly better with caption elements, but IMO it’s a marginal improvement.