Vaadin网格可访问性-聚合物

Question

有什么方法可以使我的Vaadin-Grid可供屏幕阅读器用户访问，甚至可以通过制表键访问？ 我在想，只有每一行都需要标签，而不是每一行的每个单元格。 我在每一行上都有一个复选框，因此也需要考虑。

任何帮助将不胜感激，请记住，这仍在进行中，因此我将尝试添加ARIA标签和其他内容。

这是带有实际代码的JSBin

我的vaadin-grid html

<vaadin-grid aria-label="Server properties list" id="material" items="[[uksproperties]]">
    <vaadin-grid-selection-column width="66px" flex="0" select-all="{{selectAll}}">
        <template class="header">
            <paper-checkbox checked="{{selectAll}}"></paper-checkbox>
        </template>
        <template>
            <paper-checkbox checked="{{selected}}"></paper-checkbox>
        </template>
     </vaadin-grid-selection-column>
     <vaadin-grid-column>
         <template class="header">
            <div class="horizontal layout cell">
                <label for="keyFilter" class="keyText cell flex">Key</label>
                <vaadin-grid-filter class="cell" id="keyFilterVaadin" path="key" value="[[_filterKey]]">
                    <paper-input aria-describedby="keyDescription" no-float-label class="keyFilter" id="keyFilter" slot="filter" placeholder="Filter search" value="{{_filterKey::input}}"  focus-target on-input="clearAppear" >
                        <iron-icon suffix icon="clear" class="clearIcon" on-click="clearField" clear-item-id="keyFilter"></iron-icon>
                    </paper-input>
                    <span id="keyDescription" style="display:none" class="description">Input text to filter to properties list by "Key" search</span>
                </vaadin-grid-filter>
            </div>
        </template>
        <template class="cell"><div class="blue">[[item.key]]</div></template>
    </vaadin-grid-column>
    <vaadin-grid-column>
       <template class="header">
          <div class="cell">
            value
          <div>
        </template>
        <template class="cell">[[item.value]]</template>
    </vaadin-grid-column>
    <vaadin-grid-column>
        <template class="header">
            <div class="horizontal layout">
               <div class="cell last flex ">
                    Server
                </div>
                <paper-button slot="filter" class="export" on-click="empty">
                    <iron-icon icon="launch"></iron-icon>
                        Export
                </paper-button>
            </div>
        </template>
        <template class="cell last">[[item.server]]</template>
     </vaadin-grid-column>
 </vaadin-grid>

Answer 1

屏幕阅读器有什么具体问题？

vaadin-grid应该是开箱即用的。 支持键盘导航，您可以使用箭头键导航行。 只需单击一行/单元格，然后开始使用箭头键即可获取焦点轮廓。 您也可以使用Tab键对网格进行聚焦-页眉，正文和页脚可以分别聚焦，而不是每一行都可以聚焦。

如果将可聚焦元素放置在单元格中（输入，按钮，复选框等），则需要按Enter键以访问这些元素，如WAI-ARIA数据网格最佳做法中所指定。