web-dev-qa-db-ja.com

アクセシビリティ...テーブルまたはリスト

次のようなリンクのリストを作成しています。

  • リンクのタイトルとURL
  • リンクに関するコメント
  • リンクが投稿された日付

アクセシブルなベストプラクティスを使用してこれを実行したいが、サイトの応答性を維持したいので(モバイル/タブレット/デスクトップ)、テーブルの使用も避けたい-アクセス可能なテーブルとレスポンシブなテーブルは作成できるが、私はそうではないレスポンシブでアクセス可能なテーブルを作成できることを確認してください。

ここで答え がありますが、それは私を完全には助けません。 「あなたが自問すべき基本的な質問:行と列が必要ですか?ある種の相互参照や個々のアイテムのさまざまなプロパティでソート可能な種類が必要ですか?その場合は、テーブルを使用してください。それ以外の場合は、順序付けられていない(または順序付けされた)リストを使用してください。」

私の例では、ユーザーにデータを並べ替える機会を提供していません。相互参照については、これが当てはまるかどうかわかりませんが、それについてアドバイスさせていただきます。

4
user42827

私はあなたが自分で答えていると思います:行と列が必要なければ、テーブルは必要ありません。

テーブルは応答可能でアクセス可能ですが、この場合は不要です。多分あなたが使用できる最高のリストは、タイトルと定義(コメント)にタグを付けることができる 定義リスト です。

これは結果です(スタイルなし): jsfiddleのビュー

6
panna

実際には、アイテムの数とアイテムの違いに依存すると思います。 1〜10のリンクとそのタイトル、URL、コメントがある程度同じ長さになる場合は、リストとして表示できます。

しかし、私はそうは思わないので、おそらく読みやすくするためにテーブルを使用するべきです。事実は、ユーザーがリストを閲覧/スキャンして興味深いものを検索することであり、表によって目が楽になります。

以下は、あなたが話している種類のリストの例です。ユーザーがURLを検索しているとしましょう。

enter image description here

これはモックアップであることに注意してください。ニーステーブルを設計する方法はたくさんあります。

4
Gabin

アクセシビリティと言ったとき、単に読みやすくすることを意味しますか、それとも障害を持つ人々に対応するつもりですか?

見栄えがよく読みやすいようにすると、リストをテーブルのように見せたり、その逆を行ったりすることができます。もちろん、すべての行にさまざまな幅の列を配置することを計画している場合、テーブルはあまり良くありません。

けれどもあなたが障害に関してアクセシビリティについて話しているなら、私はあなたに記事を提案することができますか?それは少し古いです、私は言うべきですがそれでも有用です: http://snook.ca/archives/html_and_css/definition-lists-v-tables

2
Jennift