Improve table caption accessibility

[tellthemachines]

What problem does this address?

Table block originally implemented captions as figcaption elements, due to limitations with RichText output discussed here: #15554

These limitations no longer apply, so nothing prevents us from using an actual table caption element instead. This makes tables more accessible for screen readers, as the caption content will be announced at the start of the table.

What is your proposed solution?

Change the table block markup to use caption as first element within the table element, instead of the current figcaption.

Consider adding a default content to the caption, such as we have on Navigation block name: Table 1, Table 2, etc..

[rianrietveld]

@tellthemachines thanks so much! One nice discussion and result at the WordCamp Europe contributor day :-)

[Soean]

I can start working on it. So we want this?

Old:

<figure class="wp-block-table">
    <table>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
    <figcaption>Test</figcaption>
</figure>

New:

<table class="wp-block-table">
    <caption>Test</caption>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </tbody>
</table>

[rianrietveld]

@Soean, yes please.

[julezrulez]

Will caption be optional? Sometimes content writers choose for a heading (h2...h6) just before a table for reasons. What you don't want is double texts (or texts that are read out twice by a screenreader).

[Soean]

Yes, the caption will be optional

[talldan]

Table block originally implemented captions as figcaption elements, due to limitations with RichText output discussed here: #15554

RichText limitations weren't the only problems, there were a couple of additional bugs:

• The tab order for a RichText <caption> is incorrect because table caption elements are before the table in the DOM, but the block editor shows it visually after the table.
• When tested, Voiceover didn't announce RichText caption content correctly when navigating into a table.

It's definitely worth re-testing those two things as there may have been changes in Gutenberg and VO that mean they are no longer issues.