HTML リストは退屈です。 彼らはしません do そのため、それらがどれほど広く使用されているにもかかわらず、私たちはそれらについてあまり考えていません. また、マーカーの削除、順序の反転、カスタム カウンターの作成など、カスタマイズのために常に行ってきたのと同じことを引き続き行うことができます。
ただし、リストを使用する際に知っておくべきいくつかの「新しい」事項 (危険性を含む) があります。 危険はほとんどマイナーですが、あなたが思っているよりもはるかに一般的です. それらに加えて、リストでできるいくつかの新しいこと、さらには古い解決策にアプローチする新しい方法について説明します。
明確にするために、これらは私たちが話している HTML 要素です。
- 順序付きリスト
- 順不同リスト
- 説明リスト
- インタラクティブなリスト
順序付きリスト、順序なしリスト、および対話型リストには、リスト アイテム (
) は、扱っているリストの種類に応じて表示されます。 順序付きリスト (
) は、リスト項目の横に数字を表示します。 順序なしリスト (
) およびメニュー要素 (
) は、リスト項目の横に箇条書きを表示します。 これらを「リストマーカー」と呼び、 彼らはスタイリングすることさえできます ：：マーカー 疑似要素。 説明リストには説明用語 (
) および説明の詳細 (
） の代わりに
リストマーカーはありません。 それらはメタデータと用語集を表示するために使用されるはずですが、実際に見たことがないとは言えません。
簡単なことから始めましょう — 正しく (少なくとも私の意見では) リストのスタイルをリセットする方法です。 その後、とらえどころのない問題に光を当てる前に、アクセシビリティの問題をいくつか見ていきます。
驚くかもしれませんが、要素もリストの一種です。
リスト スタイルのリセット
ブラウザーは独自のユーザー エージェント スタイルを自動的に適用して、すぐに使用できるリストの視覚的構造を支援します。 それは素晴らしいことです！ しかし、スタイリングに関する意見のない白紙の状態から始めたい場合は、まずそれらのスタイルをリセットする必要があります。
たとえば、リスト アイテムの横にあるマーカーを簡単に削除できます。 ここに新しいものはありません:
/* Zap all list markers! */
ol, ul, menu {
list-style: none;
}しかし、最新の CSS には、特定のリスト インスタンスをターゲットにするのに役立つ新しい方法があります。 すべてのリストからマーカーをクリアしたいとしましょう。 記事などの長いコンテンツ. 新しい CSS 疑似クラス関数の力を組み合わせると、 :where() および :not()、これらのインスタンスを分離し、それらの場合にマーカーを許可できます。
/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) {
list-style: none;
}なぜ使用 :where() :is()? の特異性 :where() は常にゼロですが、 :is() セレクターのリストで最も具体的な要素の特異性を取ります。 だから、使用して :where() オーバーライドする方法としてはそれほど強力ではなく、それ自体を簡単にオーバーライドできます。
UA スタイルは、リスト項目のコンテンツをそのマーカーから離すためにパディングも適用します。 繰り返しますが、これは箱から出してすぐに使用できる非常に優れたアフォーダンスですが、上記のようにリスト マーカーを既に削除している場合は、そのパディングも削除することをお勧めします。 これは別のケースです :where():
:where(ol, ul, menu) {
padding-left: 0; /* or padding-inline-start */
}これで、マーカーのないリスト項目が空間に浮いているように見えなくなります。 しかし、私たちは赤ちゃんをお風呂の水で放り出し、以前に分離したものを含むすべての例で詰め物を取り除きました。
. そのため、マーカー付きのリストは、コンテンツ ボックスの端からぶら下がっています。
UA スタイルが余分に適用されることに注意してください。 40px
要素。
そのため、リスト マーカーがコンテナーの外側に「ぶら下がる」のを防ぐ必要があります。 私たちはそれを修正することができます list-style-position プロパティ：
そうではない…多分それは文体の好みに帰着しますか？
リストに関する新しいアクセシビリティの問題
残念ながら、リストに関して言えば、アクセシビリティに関する懸念がいくつかあります。 XNUMXつの懸念は、アプリケーションの結果です list-style: none; UA スタイルをリセットしたときと同じように。
ざっくり言うとサファリ しない でスタイル付けされた順序付きおよび順序なしリストを読み取ります list-style: none スクリーン リーダーでコンテンツをナビゲートするときのように、実際のリストとして。 つまり、マーカーを削除すると、リストの意味も削除されます。 の この修正のための修正 それを適用する ARIA list リスト上の役割と listitem リスト項目へのロール そのため、スクリーン リーダーはそれらを取得します。
- ...
- ...
- ...
- ...
- ...
- ...
奇妙なことに Safariはこれを機能と見なします バグではなく。 基本的に、ユーザーはスクリーン リーダーがあまりにも多くのリストをアナウンスしていると報告していました (開発者はリストを使いすぎる傾向があるため)。 role="list" スクリーン リーダーによってアナウンスされますが、実際にはそれほど奇妙ではありません。 スコットオハラ ています 詳細なランダウン それがどのように落ちたのか。
アクセシビリティに関する XNUMX つ目の懸念は、私たち自身が作ったものではありません (万歳!)。 だから、あなたは方法を知っています あなたはするはずです 加える aria-label 〜へ
見出しのない要素？ まあ、リストを説明するのに役立つ見出し要素を含まないリストで同じことをするのが理にかなっている場合があります。
Grocery list
あなたは絶対に しない いずれかの方法を使用する必要があります。 見出しや ARIA ラベルを使用することは、コンテキストを追加するだけであり、要件ではありません。必ずスクリーン リーダーを使用して Web サイトをテストし、状況に応じて最適なユーザー エクスペリエンスを提供することを行ってください。
多少関連するニュースで、Eric Bailey は次の点について優れた記事を書きました 彼が考える理由と方法 aria-label コードの匂いになる.
待つ、
リストもですか？
さて、あなたはおそらくすべてについて疑問に思っているでしょう
コード例に滑り込ませてきた要素。 実際には非常に簡単です。 メニューは、インタラクティブなアイテムを対象としていることを除いて、順序付けられていないリストです。 それらは、順不同のリストとしてアクセシビリティ ツリーに公開されます。
セマンティック Web の黎明期、メニューは
それらがコンテキストメニュー（または「ツールバー」として）用であると信じる前に スペックによると) それは、HTML 仕様の初期のバージョンが言ったことだからです。 (MDN には興味深い記事があります 関連する非推奨のものすべてについて
少しでも興味があれば。）
ただし、今日では、これはメニューを使用するセマンティックな方法です。
個人的には、いくつかの良いユースケースがあると思います
. 最後の例は、ソーシャル共有ボタンのリストがラベル付きでラップされていることを示しています
注目すべき点は、「記事を共有する」ラベルが、ボタンの機能を説明するのに役立つ大量のコンテキストに貢献することです。
メニューは絶対に必要ですか？ いいえ、そうですか HTML ランドマーク? 絶対にありません。 しかし、あなたがより少ない楽しみを持っているなら、彼らはそこにいます
s であり、コンポーネントが aria-label 追加のコンテキスト用。
他に何か？
はい、前述のものもあります
（説明リスト）要素、ただし、 MDN はそれらをリストと見なしていないようです 同じように — これは用語を含むグループのリストです — そして、それらが実際に使用されているのを見たとは言えません。 MDN によると、それらはメタデータ、用語集、およびその他の種類のキーと値のペアに使用されることになっています。 すべてのスクリーンリーダーが異なる方法でそれらを発表するという理由で、私はそれらを避けます.
しかし、物事を否定的に終わらせないようにしましょう。 リストを使ってできるとてもクールなことのリストを次に示します。
