0

有什么方法可以让Vaadin-Grid屏幕阅读器用户访问我的内容，甚至可以简单地通过选项卡访问？我在想只有每一行需要标签，而不是每行的每个单元格。我在每一行也有一个复选框，所以这也需要考虑。

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

这是一个带有实际代码的 JSBin

我的vaadin-gridhtml

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

1 回答 1

0

您在使用屏幕阅读器时遇到什么具体问题？

vaadin-grid 应该是开箱即用的。支持键盘导航，您可以使用箭头键导航行。只需单击一行/单元格并开始使用箭头键即可获得焦点轮廓。您还可以使用 Tab 键聚焦网格 - 页眉、正文和页脚可单独聚焦，而不是每一行。

如果您将可聚焦元素放置在单元格内（输入、按钮、复选框等），则需要按 Enter 键才能访问这些元素，如 WAI-ARIA 数据网格最佳实践中所述。

于 2017-08-25T09:04:38.893 回答