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キーでグリッドをフォーカスすることもできます。ヘッダー、本文、フッターはそれぞれの行ではなく個別にフォーカス可能です。

セル内に入力可能な要素（入力、ボタン、チェックボックスなど）を配置する場合は、データグリッドのベストプラクティスWAI-ARIAで指定されているように、Enterキーを押す必要があります。