2017-11-29 6 views
0

アクセシビリティをテストするためにaxを使用しています。テーブルのセルが空の場合空の表のセルに対するアクセシビリティ

アックスは、次の問題を与えている:

すべて番目の要素と役割= columnheaderの/行ヘッダを持つ要素なければならない私たちがこれを行う場合、それは

を記述するデータセル空の表のセル:

<td><span style={{ visibility: 'hidden' }}>empty</span> 

問題はなくなりますが、これは少しハッキリです。誰もがこれに最適な修正を知っていますか?これは問題解決しないことを知っておく価値

<td><span style={{ visibility: 'hidden' }}>&nbsp;</span> 

我々が反応環境で作業しているが故にインクルードは、スタイルマークアップを反応します。

+1

通常、HTMLにバリデーションを渡すことを許可するための "ハッキー"これはユーザーエクスペリエンスの低下を犠牲にしていることが多いため)、実際に最初のソリューションが優れている可能性があります。しかし、 "空"ではなく、 "該当しない"や "利用できない"(いずれかの場合)のような、より記述的なものを使用します。これは、データが意図的に存在しないかどうかを示さない空のセルだけでなく、スクリーンリーダーを使用する人にとってより有用な可能性があります。 – delinear

+1

私はアックスによる警告がちょっとばかだと思います。その最も純粋な形式では、テーブルはデータベース内のテーブルの表現であり、フィールドは空にすることができます。つまり、データベースレコード内のフィールドの空の値が完全に有効なので、なぜ​​要素が確実でないかを確認するためにトリックが必要ですか? –

答えて

2

WCAGにはこのような制限はありません。

データセルは空白にすることができます。 td要素はcellロールとthis role does not require an accessible nameロールを持ちます。

axe unit testsによれば、このエラーは、thに空でない空きがない場合にのみ表示されます。tdtdに置き換えるか、アクセシブルな名前を追加する(例:aria-label="No value"属性を使用)

関連する問題