找到你要的答案

Q:How do I make a screenreader automatically read cell contents?

Q:如何使一个屏幕阅读器自动读取单元格的内容?

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>

我想使用CSS样式表来表示一个网格项目。我的屏幕(Nvidia)将自动读取可聚焦的div的内容,但如果div表格单元格显示。有没有办法使内容会自动被读取时标志?

<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>
answer1: 回答1:

Got it (thanks @bishop). I used role="grid", role="row" and role="gridcell" to make it a grid then used aria-readonly="true" to indicate that the grid is not editable.

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

得到它(感谢@主教)。我用角色=“网格”,“行”的角色作用= =“个”,使它成为一个网格然后用咏叹调只读=“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>
javascript  accessibility  screen-readers  nvda