web-dev-qa-db-ja.com

入力のテーブルのすべての行にラベルを付ける必要がありますか？

各セルが入力フィールドのみで構成され、列ヘッダーがフィールドの目的を定義するテーブルを使用して、入力のグリッドを作成する頻度を見つけました。 PHPStormは、ラベルが関連付けられていない個々のフィールドについてこの設定で不満を言っており、ラベルの提供が本当に必要かどうか疑問に思っています。

例として、私が最近作成したテーブルを示します。

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

ユーザーはデータ入力を完了するのに必要なだけ行を追加でき、各行は各列の単純な入力で構成されます。すべての入力にラベルを付けて視覚的にテーブルを乱雑にしたくないのですが、アクセシビリティのために各入力に何かを追加する必要がありますか、それとも警告を無視してラベルを付けないままにしてもいいですか？

これらにラベルを付ける必要がある場合、このようなシンプルなデザインを維持しながら、ラベルを付けるための最良の方法は何ですか？何が良い個性的なラベルを作るでしょうか？ 「2列目調整」？

tablesinput-fieldslabels
4
kicken

おそらくそれを表としてマークアップし、アクセシビリティに関するWCAGガイドラインに従う必要があります。

Yoursはテキスト入力を備えたテーブルです。 例2 に示すように、aria-labelledby属性を使用できます。

また、各行にラベルを付ける必要がある場合があります（行の先頭に<th>タグを付けてから、aria-labelledbyに追加します（例：aria-labelledby="adj row1"））。スクリーンリーダーで聞いて、意味があるかどうかを確認してください。

<table>
  <caption>Ledger</caption>
  <tr>
    <th scope="col" id="adj">Adjustment</th>
    <th scope="col" id="debit">Debit</th>
    <th scope="col" id="credit">Credit</th>
  </tr>
  <tr>
    <td><input aria-labelledby="adj"/></td>
    <td><input aria-labelledby="debit"/></td>
    <td><input aria-labelledby="credit"/></td>
  </tr>

</table>
5
Jonny

need入力テーブルのすべての行にラベルを付けますか？番号。

Should入力のテーブルのすべての行にラベルを付けますか？

あなたのユーザーは誰ですか？彼らはデータ入力者ですか、それとも祖父母ですか？彼らはどれくらいの頻度でそれをしますか？彼らはそれを行うのにどれくらい速く必要ですか（または強く推奨されていますか）？

それはユーザーのコンテキストに帰着します。

この製品を毎日使用している人々と取引している場合、彼らはどの列がどのデータポイントを表すかを知るためにしています。特にユーザーが視覚的にデータをスキャンしている場合は、ラベルが実際に邪魔になる場合があります。

これは基本的にスプレッドシートですか？そうであれば、ユーザーはそれを理解していれば、スプレッドシートのように動作することを期待します。どのフィールドエントリにもラベルがありません。

システムに必ずしも慣れていない人、データのスキャンで問題が発生している人、またはアプリケーションをたまにしか使用しない人に対応している場合は、ラベルの追加を検討し始めています。

2
Evil Closet Monkey

他の2つの答えには同意しません。

すべてのinputsには独自のラベルを付ける必要があります。ラベルはユーザーに表示される必要はありませんが、スクリーンリーダーのユーザーには不可欠です。

もう1つ考えるべきことは、各行の目的を伝えることです。スクリーンリーダーを使用していて、テーブルをタブで移動した場合、迷子になるのは非常に簡単で、すべてが同じように聞こえます。

fieldset要素はlegendと共に使用でき、これにより各legendの前にlabelのコンテンツが通知されます。次に、表形式データの意味を伝えることを目的とする実際のtableを使用する代わりに、fieldset要素のセットを含むフォームを使用して、それらを表のようにスタイル設定できます。

1
James Fenwick

常にラベルが必要であると言う人々とは対照的に、W3C（WCAGを作成した組織）は、非表示のラベルがないデータテーブルの例を作成しました。

https://w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html#

そのページから：

...行と列のヘッダーは、ナビゲーション中にスクリーンリーダーによってアナウンスされます。また、スクリーンリーダーのリーディングモードまたはブラウジングモードを使用しているときにもナビゲートできます。

これは、NVDAスクリーンリーダーでの私の限られた経験に準拠しています。

したがって、スクリーンリーダーのユーザーは、視力のあるユーザーと同じくらい迷うべきではありません。どちらもテーブルヘッダーに同等にアクセスできます。

0
tylertrotter