アクセシビリティと標準への準拠を目的とする多くの (ほとんどの?) サイトは、ナビゲーションに順序なしリストを使用しています。これはサイトのアクセシビリティを高めますか、それともスタイリングに便利な要素を提供するだけですか?
私はそれらを気にしません。私は順序付けられていないリストをこのように使用しています。ただ、アクセシビリティを測定するためにページからスタイリングを削除すると、それが単なるリンクである可能性があることに気づきました。これはどこから来たのですか?
アクセシビリティと標準への準拠を目的とする多くの (ほとんどの?) サイトは、ナビゲーションに順序なしリストを使用しています。これはサイトのアクセシビリティを高めますか、それともスタイリングに便利な要素を提供するだけですか?
私はそれらを気にしません。私は順序付けられていないリストをこのように使用しています。ただ、アクセシビリティを測定するためにページからスタイリングを削除すると、それが単なるリンクである可能性があることに気づきました。これはどこから来たのですか?
他の投稿者が指摘しているように、意味的には <ul> は通常は単なるリンクのリストであるため、メニューに最適です。しかし、メニューにリストを使用することで私が本当に気に入っているのは、リストが提供する意味論的および視覚的なサブレベルのネスト ロジックです。例えば:
<ul id="mainMenu">
<li>Home</li>
<li>Something</li>
<li>Something Else</li>
<li>Current section
<ul>
<li>A Subsection</li>
<li>Another subsection</li>
<li>More!
<ul>
<li>We go deeper</li>
<li>Who knows where it ends</li>
</ul>
</li>
<li>Back up one step</li>
</ul>
</li>
<li>And another step</li>
<li>All done!</li>
</ul>
それをブラウザに入れてスモークすると、各レベルが右にインデントされているだけでなく、異なるスタイルの箇条書きでレンダリングされていることに気付くでしょう。そして、それは CSS を追加しなくても同じです。それらのリストが大好きです!
サイトのナビゲーションに最適なマークアップは、ナビゲーションが何であるかを最もよく表す HTML タグです。これは、ゴムが HTML セマンティクスの道と出会う場所です。
あなたのナビゲーションは、論理的な順序がないリストですか? もしそうなら、それ<UL>
は良い選択でしょう。あなたのナビゲーションは、手順を必要とするウィザードのようなものですか、それともアルファベット順または数字順ですか? もしそうなら<OL>
、より良い選択かもしれません。
あなたが言及したように、ナビゲーションをプレーンなリンクとしてレンダリングしても、意味的な意味はありません。あなたのナビゲーションは読むべき文であることを示唆しています。リストにリンクを提供することで、ハイパーテキストでリンクされたこの一連の単語をどのように解釈するかについてのヒントを提供します。
スタイルが削除されると、箇条書きによってナビゲーション セクションがより明確になります。<div>
また、ナビゲーションにとを使用している場合<span>
、スタイルを削除すると、リンクが隣り合って表示されます。
ナビゲーションは基本的にリンクのリストなので、リストとしてマークアップするのが正しいように思えます。
HTMLは(まだ)ナビゲーションリスト要素をサポートしていないため、少なくとも部分的にはseoにも関係していると思います。
UL (または OL) を使用すると、特にナビゲーション セクションがネストされている場合に、ナビゲーションにセマンティック グループが与えられ、このリンクのグループにはある種の論理的な一貫性と階層があることがわかります。これは、少なくとも私が読んだ理論の 1 つです。
もう 1 つの利点は、Jeremy が述べたように、スタイルがオフになっている場合、すぐに使えるレンダリングが理にかなっているということです。
これは文書構造のために行われていると思います。UL または div タグを使用しました。私は常にULでより多くの成功を収めてきました.
よろしく、
フランク