番号なしリストとアクセシビリティ

StackOverflow https://stackoverflow.com/questions/310376

質問

アクセシビリティと標準への準拠を目的とする多くの（ほとんどの？）サイトは、ナビゲーションに順序付けられていないリストを使用します。これにより、サイトはよりアクセスしやすくなりますか、それともスタイリングに役立つ要素を提供するだけですか？

私はそれらを気にせず、このように順序付けられていないリストを使用しています。アクセシビリティを測定しようとしてページからスタイリングを削除すると、プレーンリンクにもなり得ることがわかります。これはどこから来たのですか？

役に立ちましたか？

解決

サイトのナビゲーションに最適なマークアップは、ナビゲーションが何であるかを最もよく表すHTMLタグです。これは、ゴムがHTMLセマンティクスの道に出会う場所です。

ナビゲーションは、論理的な順序を持たないリストですか？その場合、<UL>が適切な選択になります。ナビゲーションは、手順を必要とするウィザードのようなものですか、それともアルファベット順または数値順ですか？その場合は、<OL>の方が適している可能性があります。

ナビゲーションをプレーンリンクとしてレンダリングしても、セマンティックな意味はありません。ナビゲーションは読むべき文章であることを示唆しています。リストでリンクを提供することにより、この一連のハイパーテキストリンクされた単語をどのように解釈するかについてのヒントを提供します。

他のヒント

他のポスターが意味的に指摘しているように、<！> lt; ul <！> gt; sは通常、単なるリンクのリストであるため、メニューに最適です。しかし、メニューにリストを使用することで本当に気に入っているのは、それらが提供するセマンティックで視覚的なサブレベルのネストロジックです。例：

<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を追加しなくてもです。これらのリストが大好きです！

スタイルが削除されると、箇条書きによりナビゲーションセクションがより明確になります。また、ナビゲーションに<div> sおよび<span> sを使用する場合、スタイルを削除すると、リンクが互いに横になります。

ナビゲーションは基本的にリンクのリストなので、リストとしてマークアップするのは正しいように思えます。

htmlは（まだ）あらゆる種類のナビゲーションリスト要素をサポートしていないので、少なくとも部分的にはseoも関係していると思います。

UL（またはOL）を使用すると、特にネストされたnavセクションがある場合、ナビゲーションにセマンティックグループが与えられ、このリンクのグループには何らかの論理的一貫性と階層があります。読んだ

もう1つの利点は、Jeremyが述べたように、スタイルがオフになっているとき、そのままのレンダリングが意味をなすことです。

これはドキュメント構造のために行われたと思います。 ULまたはdivタグを使用しました。しかし、私は常にULでより多くの成功を見つけました。

よろしく、
フランク

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top