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

Question

我正在尝试使用 CSS table 来表示项目网格。我的屏幕阅读器 (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" 表示网格不可编辑。

<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>