キーボードユーザーがアクセス可能な並べ替え可能なテーブル

Question

私は<thead>の2つの行を並べ替え可能です。私のマークアップは現在次のようになっています：

<tr> 
    <th class="table-head__cell table-head__cell-sortable"> 
     <span class="table-head__text">Date</span> 
     <i class="icon fa fa-angle-down" aria-hidden="true"></i> 
    </th> 
    <th class="table-head__cell align-right table-head__cell-sortable"> 
     <span class="table-head__text">Value</span> 
     <i class="icon fa fa-angle-down" aria-hidden="true"></i> 
    </th> 
</tr> 

ソート可能な列にはキーボードでアクセスできます。 .table-head__cellにtabindex="0"とaria-role="button"を追加する方がよいかどうか自問します。または<th>要素のコンテンツの周りに<button>をラップします。

アリアの役割よりも正しいセマンティック要素を使用する必要があることを知っていますが、<th>のボタンを追加するのはちょっと変わっています。

誰かがこれに何か考えてもらいたいですか？

Answer 1

要素には、ARIA roleを1つだけ与えることができます。したがって、headingロールとbuttonロールの両方を指定することは不可能です。

あなたが書く場合：

<th role="button"> 

th要素はもはや見出しできなくなりますし、ボタンになります。

button要素をthの内側に置く解決策は残りの解決策です。