如何让屏幕阅读器自动读取单元格内容？

Question

我正在尝试使用CSS表来表示项目网格。我的屏幕阅读器（NVDA）将自动读取可聚焦div的内容，但如果div为display: table-cell则不会。有没有办法让标签上的内容自动被阅读？

<div style="display: block" tabindex="0">Apple (for comparison)</div><br>
<div style="display: table">
    <div style="display: table-row">
        <div style="display: table-cell" tabindex="0">Banana</div>
        <div style="display: table-cell" tabindex="0">Celery</div>
        <!-- Screenreader won't say banana or celery upon tabbing -->
    </div>
</div>

Answer 1

得到它（感谢@bishop）。我使用role="grid"，role="row"和role="gridcell"将其设为网格，然后使用aria-readonly="true"表示网格不可编辑。

＆＃13;

＆＃13;

<div style="display: block" tabindex="0">Apple (for comparison)</div><br>
<div role="grid" aria-readonly="true" style="display: table">
    <div role="row" style="display: table-row">
        <div role="gridcell" style="display: table-cell" tabindex="0">Banana</div>
        <div role="gridcell" style="display: table-cell" tabindex="0">Celery</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;