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

How do I make a screenreader automatically read cell contents?

我正在尝试使用 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>

知道了(感谢@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>