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數據網格最佳實踐中所述。