1

メニューを説明するタイトルが付いたメニュー項目リンクのリストがあります。このメニューは左にフロートするので、マークアップを減らすために、タイトル部分をulフロートしやすいようにしました。

例えば

<ul>
    <li class="heading">My Title</li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
</ul>

タイトルを分けるために何か特別なことをする必要がありますか? ワイアリア追加？検索エンジンが混乱する可能性はありますか?

それ自体では意味的に正しいとは思えません。

4

2 に答える 2

6

ワーキング ドラフトUsing WAI-ARIA in HTMLliによると、要素にはさまざまな役割がありますが、headingその中には含まれていません。いいえ、ARIA 属性を使用してリスト項目を見出しとして宣言しないでください。

そのため、@JamesDonnelly で提案されているように、リストの前に見出しを別の見出し要素にする方が適切ですが、全体的な構造に従って見出しのレベルを選択する必要があります。

(検索エンジンはおそらく気にしないでしょう。)

(これは実際にはセマンティクスではなく、構造に関するものです。セマンティクスは意味に関するものであり、要素を見出しとして宣言することは、その意味を説明するのではなく、単に構造との関係またはその役割を説明するだけです。)

于 2013-03-27T17:50:36.817 に答える
3

タイトルをリストとは別にした方が意味的に正しいと思います（リンクとタイトルのリストではなく、リンクのリストです）。ただし、これが検索エンジンにどのように影響するかはわかりません。しかし、これによりスタイリングが難しくなることはありません。

<div>
    <h4>My Title</h4>
    <ul>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
    </ul>
</div>

それらをインラインで表示したい場合は、次のように簡単にできます。

div h4, div ul, div ul li { display:inline-block; }
div ul { list-style-type:none; padding:0; }

JSFiddle の例。

于 2013-03-27T16:19:19.053 に答える