コンテンツへのスキップに深く潜ります-CSSチュートリアル-php.cn

コンテンツへのスキップに深く潜ります

多くのコンピューターユーザーは、マウスを使用してWebページを閲覧していますが、多くの人はキーボード操作に依存しています。理論的には、キーボードを使用してWebページを閲覧することは問題ありません -タブキーを押してフォーカスされた要素間を移動し、 Enterキーを押してアクティブ化すると、簡単で簡単です！ただし、多くの（ほとんどではないにしても）サイトには上部にリンクメニューがあり、ターゲットコンテンツに到達するには複数のキープレスが必要になる場合があります。たとえば、スイスの最大のニュースサイトの1つである20分のホームページには、見出しを読むために40近くのキープレスが必要になる場合があります。これは、最高のユーザーエクスペリエンスではありません。

したがって、キーボードユーザーが退屈して去る代わりにウェブサイトを実際に使用できるようにするには、メインコンテンツにまっすぐにジャンプしやすくするために、舞台裏でいくつかの作業を行う必要があります。 Web全体に散らばっているさまざまなトリックを見つけることができます（CSS-Tricksを含む）が、ほとんどのトリックは無視しており、古いコードまたは非推奨コードを使用することをお勧めします。したがって、この記事では、コンテンツをスキップして、2021年のフレンドリーな方法ですべてをカバーします。

2種類のキーボードユーザー

人々は、さまざまなタイプのキーボードまたはナビゲーションに同等のスイッチギアを使用していますが、コーディングの観点からは、2つのユーザーセットを考慮する必要があります。

キーボードを使用して、PCのNVDAやジョーなどの画面リーダー、またはMacのナレーションなどのスクリーンリーダーと組み合わせて画面コンテンツを読み取るユーザー。これらのデバイスは通常、視覚障害が深刻な人によって使用されます。
他のすべてのキーボードユーザー。

スキップコンテンツテクノロジーは、マウスユーザーを妨げることなく、両方のユーザーグループのニーズを同時に満たす必要があります。 2つの補完的な手法を使用して、ランドマークとスキップリンクという最良の結果を得ます。

基本的な例をご覧ください

スタイルマジックと呼ばれるサンプルWebサイトを作成して、カバーしようとしているテクノロジーを説明しました。マウスユーザーにとっては優れた作業条件から始めますが、キーボードを使用するユーザーにとっては少し手間がかかります。 CodePenの基本的なWebサイトと各テクノロジーのバージョンを見つけることができます。CodePenでキーボードナビゲーションをテストするのは少し難しいので、スタンドアロンバージョンもここで見つけることができます。

TABキーを使用してこの例をナビゲートしてみてください。（スタンドアロンページで簡単です。タブキーはリンク間を移動します。シフトタブキーは後方に移動します。）悪くはありませんが、メニュー項目があまりないという理由だけです。

時間があり、Windowsシステムを使用している場合は、NVDAスクリーンリーダーの無料コピーをダウンロードして、すべての例を試して、使用方法についてはWebAimの概要を参照することもお勧めします。ほとんどのMacユーザーはすでにVoiceOverスクリーンリーダーにアクセスしており、WebAimはそれを使用する方法について素晴らしい紹介をしています。

ランドマークを追加します

スクリーンリーディングソフトウェアができることの1つは、Webページにあるランドマークのリストを表示することです。ランドマークはページ上の重要な領域を表し、ユーザーはリストを呼び出して、ランドマークの1つに直接ジャンプできます。

完全なキーボードでNVDAを使用している場合は、 INS F7を押して「要素リスト」を表示し、 Alt Dを押してランドマークを表示します。（Web Project Rotorを使用してVoiceOverの同様のリストを見つけることができます。）ただし、サンプルサイトでこれを行うと、役に立たない空のリストのみが表示されます。

最初にこの問題を解決しましょう。

ランドマークを追加するのは非常に簡単です。HTML5を使用している場合、HTML5セマンティック要素に直接リンクされているため、それを実現せずにWebサイトで使用している可能性があります。<h1></h1>到着<h6></h6>、<main></main> 、等）。

以下は、サイトタイトルセクションの生成に使用されるHTMLの前後の変更の例です。

<div>
  <div>
    <div><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">スタイルの魔法</a></div>
    <div>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">家</a>

      </div>
  </div>
</div>

ログイン後にコピー

なる

<header>
 <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">スタイルの魔法</a><nav aria-label="Main menu"><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">家</a>

    </nav></header>

ログイン後にコピー

使用されるクラスは同じままであるため、CSSに変更を加える必要はありません。

サンプルサイトで行う必要がある変更の完全なリストは次のとおりです。

タイトルはページの上部に示されています<div>今、それはです<code><header></header>要素。
ブランドインクルーシブ<div>今、それはです<code><header></header>要素。
2つのメニュー<div>されています<code><nav></nav>要素の交換。
2つの新しいもの<nav></nav>要素は、それらを説明するaria-label属性を取得しました。ページの上部にあるメニューは「メインメニュー」で、ページの下部にあるメニューは「ユーティリティメニュー」です。
ページのメインコンテンツが含まれています今、それはです<main></main>要素。
ページの下部にあるフッターを表します<div>今、それはです<code><footer></footer>要素。 CodePenで完全に更新されたHTMLを表示できます。 NVDAのランドマークリストトリックをもう一度試してみましょう（ INS F7 、次にAlt D-これは自分でテストできるスタンドアロンページへのリンクです）：素晴らしい！これで、バナーランドマークがあります（マップへ<header></header>要素）、メインメニュー<nav></nav>aria-label ）、メインコンテンツ（マップ）の要素と表示<main></main>）およびコンテンツ情報（へのマップ<footer></footer>）。このダイアログでは、TABキーとカーソルキーを使用してメインランドマークを選択し、ページのコンテンツに直接ジャンプすることができます。または、ページを閲覧中にDキーを押して、あるランドマーク文字から次の文字に直接ジャンプできます。 JAWSスクリーンリーダーのユーザーにとっては簡単です。ブラウジング中にQキーを押すだけで、メインランドマークに直接ジャンプします。追加の利点として、セマンティック要素を使用すると、検索エンジンがコンテンツをよりよく理解し、インデックスを付けます。これは、ウェブサイトをよりアクセスしやすくするための素晴らしいプラスです。スキップリンクを追加しますこの瞬間、「仕事は終わった」と思ってそこに座っていることを願っています。まあ、私は常に考慮すべき「しかし」があるのではないかと心配しています。 2011年に、GoogleはCtrl Fを使用してWebページでの検索に関する調査を実施し、驚くべき90％の人々がそれが存在することを知らなかったか、使用したことがないことを発見しました。ランドマークに関しては、スクリーンリーダーを使用するユーザーはほぼ同じように振る舞います。たとえ非常に便利であっても、この機能はまったく使用していません。したがって、ユーザーのグループとスクリーンリーダーを使用しないすべてのキーボードユーザーの両方を支援するために、当社のWebサイトにスキップリンクを追加します。優れたリンクスキップの基本的な要件は次のとおりです。必要に応じて、スクリーンリーダーユーザーを含むすべてのキーボードユーザーに表示される必要があります。キーボードユーザーに、その役割を説明するのに十分な情報を提供する必要があります。可能な限り幅広い現在のブラウザで実行する必要があります。マウスユーザーの閲覧を妨害しないでください。ステップ1：キーボードフォーカスの外観を改善しますまず、ウェブサイト全体でキーボードフォーカスの可視性を向上させます。ワードプロセッサでテキストを編集するとき、キーボードのフォーカスはカーソル位置に相当するものと考えることができます。 TABキーを使用してナビゲートすると、キーボードフォーカスがリンク（またはフォームコントロール）間を移動します。最新のWebブラウザは、キーボードのフォーカスがどこにあるかを示すのにかなり良い仕事をしていますが、それでも助けから利益を得ることができます。フォーカスリングをスタイリングするための多くの創造的な方法がありますが、私たちの目標は何よりも際立っていることです。スタイル設定に:focusプソイドクラスを使用することができます（そして、同じスタイルを:hoverも適用する方が良いです。サンプルサイトで行ったCodepen、ライブサイト）。これは少なくともできることですが、通常はさらに一歩進んで、ページ全体に:focusてリンク色を逆にします。以下のCSSは次のとおりです:focus状態（私たちが提供したコードのコピー:hover ）： A：フォーカス{ /*ページ全体の一般的なルール* / Border-bottom-color：https：//www.php.cn/link/93ac0c0dd620dc7b88e5fe05c70e15b1295e6; } .menu-right a：フォーカス、 .BrandingA：フォーカス{ /*タイトルとフッターのリンクの色を逆にします*/ 背景色：白。色：https：//www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6; } ログイン後にコピーステップ2：HTMLとCSSを追加します最後の変更は、スキップされたリンク自体をHTMLおよびCSSに追加することです。トリガー（リンク）とターゲット（ランドマーク）の2つの部分で構成されています。これは私がトリガーにお勧めするHTMLです、それはページの先頭にあります<header></header>要素内： <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target" class="text-assistive display-at-top-on-focus">メインコンテンツにスキップします。</a> ログイン後にコピーこれはターゲットのHTMLであり、直接配置されます<main></main>コンテンツの開始前： <a id="skip-link-target" class="text-assistive" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target">メインコンテンツの開始。</a> <main></main> ログイン後にコピー HTMLの仕組みは次のとおりです。スキップリンクコンタクタは、標準ページフラグメント（href = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target"）を使用します。<a></a> ）ID属性。リンクに従うと、キーボードのフォーカスがトリガーからターゲットに移動します。アンカーにリンクします（<a></a> ）直接的ではない要素<main></main>要素がID属性を追加する理由は2つあります。まず、キーボードのフォーカスが正しく移動できないという問題を回避します（これは、一部のブラウザでは問題である可能性があります。 2つのリンクのテキストは、ユーザーに何が起こっているかを明確に説明するために説明的です。機能的なスキップリンクがありますが、問題があります。誰もがそれを見ることができます。 CSSを使用してデフォルトで非表示にします。これにより、マウスユーザーが妨げられないようになり、キーボードのフォーカスを受信したときにのみ表示されます。これを行うには多くの方法がありますが、ほとんどの方法は行う必要がありますが、避けるべき間違った方法がいくつかあります。 clip-pathを使用してリンクを見えないようにするか、 transform: translateまたはposition: absolute画面外に配置します。表示：表示：なし、 visibility: hidden display: none hidden属性、またはスキップされたリンクの幅または高さをゼロに設定します。これにより、スキップリンクは、1つまたは両方のタイプのキーボードユーザーに対して利用できなくなります。控除されているため、 clipを使用してはいけません。これらの2つのリンクを非表示にすることをお勧めするコードは次のとおりです。 clip-pathとそのプレフィックスを使用する-webkit-バージョンは、執筆時点でユーザーの96.84％をカバーできます。これは（私の意見では）ほとんどのWebサイトやユースケースでは問題ありません。ユースケースがそれを必要とする場合、他にも多くのテクノロジーが利用可能です。 .text-assistive { -webkit-clip-path：ポリゴン（0、0、0、0、0 0）; クリップパス：ポリゴン（0、0、0、0、0 0）; ボックスサイズ：ボーダーボックス; 位置：絶対; マージン：0; パディング：0; } ログイン後にコピーフォーカスを取得したときにリンクを表示するには、このCSSのバージョン、色、サイズを使用してブランドに合わせて使用することをお勧めします。 .text-assistive.display-at-top-on-focus { 上：0; 左：0; 幅：100％; } .text-assistive.display-at-top-on-focus：focus { -webkit-clip-path：なし; クリップパス：なし; Z-Index：999; 高さ：80px; Line-Height：80px; 背景：白。 Font-Size：1.2Rem; テキスト装置：なし; 色：https：//www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6; テキストアライグ：センター; } https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target：focus { 背景：https：//www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b084367; 色：白; } ログイン後にコピーこれにより、ページの上部にあるトリガーとターゲットの非常に目に見えるディスプレイが提供されます。この場合、ユーザーはページのロード後にキーボードのフォーカスを直接確認することを期待しています。リンクをたどると、色も変更されて、何かが起こったという明確なフィードバックを提供します。 CodePenでコードを自分で変更し（以下に示すように）、スタンドアロンページでNVDAでテストできます。さらなる改善スキップリンクは、メインメニューのクリスマスだけではありません。ページにリンクの長いリストが含まれている場合はいつでも便利です。実際、このCodepenは、 transform: translateY()を使用して、ページコンテンツでスキップリンクを使用する良い方法を示しています。古いブラウザをサポートする必要がある「ラッキー」なポジションにいる場合は、このヒントを次に示します（ここでは独立したページ）。チェックしましょう！最後に、スキップリンクがキーボードユーザーの2つのカテゴリでどのように機能するかについての短いビデオデモンストレーションを紹介します。 NVDAスクリーンリーダーを使用する場合のスキップリンクの実行方法は次のとおりです。（ビデオを埋め込む必要があります）スクリーンリーダーを必要とせずにキーボードを使用して再び閲覧するときに起こることは次のとおりです：（ここにビデオを埋め込む必要があります） 2021年にスキップリンクにアクセスするために、現代のアプローチを見ました。より良いCSSプラクティスに合わせて更新し、キーボードユーザーのUIを改善し、スクリーンリーダーを使用してユーザーのエクスペリエンスを改善するように、過去の例からいくつかのアイデアを借りました（更新されたHTMLアプローチのおかげです）。