javascript - How do I make a screenreader automatically read cell contents?

Question

I'm trying to use a CSS table to represent a grid of items. My screenreader (NVDA) will automatically read the contents of a focusable div, but not if the div is display: table-cell. Is there a way to make the contents be automatically be read upon tabbing?

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