「コンテンツへのスキップ」リンクを作成する方法

スキップリンクは、ユーザーがページ間を移動するのに役立つ小さな内部ナビゲーションリンクです。頻繁に隠されているため、実際には表示されないかもしれません。これは、キーボードユーザーとスクリーンリーダーがページの上部からコンテンツにジャンプして、最初にページ上の他の要素を通過することなく、コンテンツにジャンプできるようにするためです。

実際、DevToolsを開くと、CSS-Tricksで1つを見つけることができます。

私の意見では、リンクをスキップすることを実装する最良の方法は、それを隠してから焦点を当てたときにそれを示すことです。したがって、HTMLにリンクがあるとします。

<a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">
  コンテンツにスキップします</a>

…絶対的な位置を与え、画面から遠ざけることができます。

 .skip-to-content-link {
  左：50％;
  位置：絶対;
  変換：翻訳（-100％）;
}

その後、焦点を合わせると、再表示して、プロセスで何らかの方法でスタイルを整えることができます。

 .skip-to-content-link {
  背景：＃e77e23;
  高さ：30px;
  左：50％;
  パディング：8px;
  位置：絶対;
  変換：翻訳（-100％）;
  遷移：0.3sの変換。
}

.skip-to-content-link：focus {
  変換：翻訳（0％）;
}

これにより、リンクがフォーカスが得られるまでリンクを隠し、フォーカスが表示されたときに表示されます。

さて、Miles Davisからのこの有名な引用から始めて、詳細に説明しましょう。

時間が主な要因ではなく、唯一の要因です。

雨の中でアイルランドでこれを書いていたとき、私が慣れていたネットワークを使用するときに多くのユーザーが直面する課題を考えました。私たちは、すべてのユーザーと彼らが自分のニーズをどのように満たすことができるかを考慮せずに、優れたユーザーエクスペリエンスを作成するために多くの努力を注いでいます。確かに、Frontend MastersでMarcy Suttonのコースを終える前に、リンクをスキップすることを聞いたことがありません。スキップリンクを使用する力とシンプルさについて学んで以来、私は認識を高めることを私の使命にすることにしました。

解決策は質問に対する答えであるため、キーボードユーザーとスクリーンリーダーがページのコンテンツをすばやく見つけるのに役立つソリューションは何ですか？要するに、解決策は時間です。ユーザーが最も関心のあるウェブサイトの部分に移動できるようになり、貴重な時間を節約できます。

例としてSky NewsのWebサイトをご覧ください。ユーザーがすべてのナビゲーションアイテムをスキップしてメインコンテンツに直接ジャンプできる「コンテンツへのスキップ」ボタンを提供します。

キーボードを使用して、ページの上部に移動してこのボタンを表示できます。これは、上記の実装に似ています。リンクは常にドキュメントにありますが、フォーカスを取得した場合にのみ表示されます。

これは、この記事で一緒に作成するスキップリンクのタイプです。

サンプルウェブサイト

スキップリンクを実証するために使用するサンプルWebサイトを作成しました。

このサイトには多くのナビゲーションリンクがありますが、時間を節約するには、「ホーム」と「ブログページ」の2ページしかありません。これは、物事がどのように機能するかについてのアイデアを提供するのに十分です。

問題を決定します

これが私たちが使用しているナビゲーションです：

合計8つのナビゲーションアイテムがあり、キーボードユーザーとスクリーンリーダーは、最初にこれらのアイテムを通過して、ナビゲーションの下のメインコンテンツに到達する必要があります。

これが問題です。ユーザーにとってナビゲーションは関係ないかもしれません。たぶん、ユーザーは記事への直接リンクを取得し、コンテンツにアクセスしたいだけです。

これは、スキップリンクを使用するのに最適なユースケースです。

リンクを作成します

「コンテンツへのスキップ」リンクを作成する方法はいくつかあります。私がやりたいことは、Sky Newsと同様の例です。つまり、リンクがフォーカスになるまで隠します。これは、たとえば、ページの上部またはその近くにリンクを配置できることを意味します。<header></header>要素の内側。

<a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">コンテンツにスキップします</a>

このリンクには.skip-linkクラスがあるので、スタイルを整えることができます。 href属性はhttps://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3を指します。これはページの下部に追加されます。<main></main>要素のID。これは、クリック時にリンクがジャンプする場所です。

<a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">コンテンツにスキップします</a>

<main></main>

スタイルなしでリンクをタイトルに入れただけなら、これが私たちが持っているものです。

これは見栄えが良くありませんが、機能は存在します。キーボードを使用してリンクに移動して、焦点を獲得したらEnterを押してください。

さあ、それを美しく見せる時が来ました。最初にポジショニングを修正し、スキップリンクがフォーカスを取得した場合にのみ表示する必要があります。

 .skip-link {
  背景：＃319795;
  色：#ffff;
  font-weight：700;
  左：50％;
  パディング：4px;
  位置：絶対;
  変換：翻訳（-100％）;
}

.skip-link：focus {
  変換：翻訳（0％）;
}

ここの魔法は、Skipリンクがフォーカスを取得するかどうかに基づいて、それを隠して表示するtransformプロパティにあります。 transformプロパティですばやく変換することで、少し良く見せてみましょう。

 .skip-link {
  /*以前と同じ*/
  遷移：0.3sの変換。
}

これは、ビューに変換され、少し良くなります。

あなたは今（うまくいけば）私が以下に持っているものを持っているべきです：

ご覧のとおり、リンクをスキップしてナビゲーションをバイパスし、に直接ジャンプします<main></main>要素。

複数のリンクを使用しても構いません！

現在、このリンクは1つの目的しか提供されていません。これは、コンテンツを当社のWebサイトにスキップすることです。しかし、私たちはそこで止まる必要はありません。

さらに一歩進んで、ウェブサイトフッターにジャンプする方法など、より多くのオプションを使用してスキップリンクを作成できます。ご想像のとおり、これは私たちがやったことと非常に似ています。

複数のスキップリンクを使用して、サンプルWebサイトのブログページを使いやすくしましょう。ブログは通常、Ajaxを使用し、ページの下部に到達すると、さらに多くの投稿がロードされます。これにより、ウェブサイトのフッターに到達することが困難になります。これが私たちが解決したい問題です。

そこで、すべての自動採用ビジネスをバイパスし、ユーザーをhttps://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf要素に直接ジャンプする2番目のリンクを追加しましょう。

<div>
  <a href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">コンテンツ</a>または<a href="https://www.php.cn/link/8248f16fa738b0bfe6013edf69d873bf">フッター</a>にスキップします
</div>

また、CSSを少し変更して、次:focus-within使用する必要があります。

 .skip-link {
  変換：翻訳（-100％）;
}

.skip-link：Focus-within {
  変換：翻訳（0％）;
}

これは.skip-link要素の何かがフォーカスを取得した場合、表示することを意味します。残念ながら、Internet ExplorerもOpera Mini Miniもfocus-withinをサポートしていませんが、非常に優れたカバレッジがあり、PolyFillを使用できます。

このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、ブラウザがこのバージョン以降でこの機能をサポートしていることを示しています。

最後にする必要があるのは、リンクに何かジャンプするものがあるように、フッター要素にIDがあることを確認することです。

<footer id="footer"></footer>

これが私たちにもたらすものです：

さらに一歩進めたい場合（これをお勧めします）、ユーザーが2つを区別できるように、各リンクのスタイルを異なる方法でスタイリングできます。この例の両方のリンクはピュアホワイトであり、単一の操作を実行する単一のボタンに非常に効果的ですが、両方のリンクが異なる場合にレンダリングされている場合、両方のリンクを処理していることがより明確になります。

結論までスキップします

あなたはあなたのウェブサイトでスキップリンクを使用していますか？または、そうでない場合、これはあなたにそれを使用するように説得しますか？リンクをスキップすることは、ウェブサイトのアクセシビリティに関しては優れた付加価値であることが明らかになります。すべてのアクセシビリティの問題を解決することは万能薬ではありませんが、いくつかのユースケースを解決し、より完全なユーザーエクスペリエンスを作成します。

このテクノロジーまたは類似のテクノロジーを使用するいくつかの有名なWebサイトは次のとおりです。

• アマゾン
• チェイスバンク
• Google（リンクではなく、アクセシビリティフィードバックを提供するリンク）
• ターゲット
• ニューヨークタイムズ
• Zillow

以上が「コンテンツへのスキップ」リンクを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。