私は既存のWebアプリケーションを使用してWCAG AAに準拠させるよう取り組んでいます。スクリーンリーダー：<table>で複数のラジオボタングループを作成するにはどうすればよいですか？
アプリの一部には、「選択肢マトリックス」の表示が含まれます。一連の質問が表形式で表示されます。ここでは簡単な例を示します。
<table>
<thead>
<tr>
<th>Question</th>
<th>True</th>
<th>False</th>
</tr>
</thead>
<tbody>
<tr>
<td>google.com is hosted on the internet</td>
<td><input name="q1" type="radio" aria-label="google.com is hosted on the internet: True"></td>
<td><input name="q1" type="radio" aria-label="google.com is hosted on the internet: False"></td>
</tr>
<tr>
<td>January is the third day of the week</td>
<td><input name="q2" type="radio" aria-label="January is the third day of the week: True"></td>
<td><input name="q2" type="radio" aria-label="January is the third day of the week: False"></td>
</tr>
</tbody>
</table>は今 - 私たちはこのスニペットに対してaXe Chrome Extensionを実行した場合、それは文句：
同じ名前の属性値を持つラジオ入力は、グループの一部でなければなりません
WCAG 1.3.1を満たすために、ラジオボタンをまとめてグループ化する必要があるようです。これは理にかなっており、価値があるようです。 「Q1」 2）要素を含むフィールドセットまたはARIAを有さないARIA-labelledbyのと同じ要素を参照しない名前の
1）全ての要素：
AXはそれを行うための2つの方法を提案しグループ
しかし、どちらの解決策も私の問題を解決するものではありません。
最初の解決策は無意味なようです - なぜ複数のラジオボタンに同じアリアラベルを付けるのですか？スクリーンリーダーのユーザーは、それらが同じであればどのようにして選択しますか？
私はradiobuttonsにrole = "group"またはrole = "radiogroup"を適用する方法を検討しています。
axサイトにa good example of using role="radiogroup"があります。私は要素に= "radiogroupのを" の役割を追加するとき
しかし...は、JSX-a11yは警告を与える：
インタラクティブ要素は、非対話型の役割
それを割り当てるべきではありません役割を与えることで、現在上書きされている暗黙的な役割があるため、問題が発生する可能性が高いと思われます。
これが原因で発生する可能性のあることはわかりませんが、一時停止になります。
また、私はこれを使用することはできません。
<table><div role="radiogroup"><tr>
をHTMLのルールを壊すことなく。
この警告メッセージを解決するには、ARIA、HTML5、または使いやすさのルールを破る必要があるようです。
または、これをaからsのグループに変更します。しかし、は、このユースケースで意味的に適切な、私にとってはと思われます。
さまざまなスクリーンリーダーでうまく機能するソリューションはありますか？現在のところ、勝者は、単にrole = "group"を付けて警告を無視するだけですが、まだスクリーンリーダーを十分にテストしていません。