2

レスポンシブウェブサイトがあります。ウェブサイトがモバイル幅に達すると、メニューが非表示になり、メニューアイコンをクリックしたときにのみ表示されます。このアイコンは、このブレークポイントに到達するまでHTML内で非表示になります。

質問：要素に付ける必要のある正しいラベルは何ですか？

aria-hidden="true"デスクトップブラウザに適したものを追加することを考えていましたが、モバイルでは非表示になりません。

<a href="#" id="menu-phone" data-menu="mobile" title="Show Menu">
    <span>Menu</span>
    <i class="icon"></i>
</a>
4

1 に答える 1

3

aria-hidden="true"次の理由で必要ありません：

  • デスクトップでは、リンクはすでにCSSで非表示になっています（display: noneまたはvisibility: hidden）
  • モバイルでは表示され、スクリーンリーダーやその他のATによって認識される必要があります

要素a > spanは（ビューポートの外で）視覚的に隠されており、iモバイルではアイコンのみが表示されていると思いますか？次に、「メニューを表示」というテキストを含めることができますが、ARIAであるか@title必要であるかにかかわらず、他の属性はありません。
「メニュー」が表示されている場合は、はい、リンクタイトルa[title="Show Menu"]はより明示的なリンクに適しています。

注意：ARIAロールランドマークを使用している場合（および使用する必要がある場合）は、[role="navigation"]デスクトップに表示されるナビゲーションと、モバイルでのナビゲーションの唯一の表示部分であるこのリンクの両方のコンテナーに追加する必要があります。そうしないと、ユーザーは、ナビゲーションがどこにあるのか、またそれを再度表示するための特別なリンク/ボタンがあるという手がかりがない、目に見えないものにジャンプします。
スキップリンクについても同じです。ナビゲーションとこのリンク/ボタンの両方の前に配置された要素を指している必要があります。

于 2013-03-27T19:58:53.577 に答える