Vaadin网格辅助功能 - 聚合物

Question

有没有什么方法可以让我的屏幕阅读器用户可以访问我的Vaadin-Grid？我在想，只有每行需要被选中而不是每行的每个单元格。我在每一行也有一个复选框，所以这也需要考虑。

任何帮助将不胜感激，并请记裸这仍然是一项正在进行的工作，所以我将努力为我去添加ARIA标签和事情。

Here is a JSBin with the actual code

我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数据网格最佳实践中所述。