スキップリンクを使用してWordPressサイトをよりアクセスしやすくする方法
公開: 2017-07-06アクセシビリティシリーズの紹介では、さまざまなWebコンテンツアクセシビリティガイドライン（WCAG）の基礎について話しました。 次に、いくつかの重要なガイドラインを確認し、サイトをよりアクセスしやすくする方法を示して、次のステップに進みます。 バイパスブロック、より一般的にはスキップリンクとして知られているものから始めましょう。
スキップリンクとは何ですか？
スキップリンクは、タブキーまたはスクリーンリーダーを介して:focusに入るまで、サイトに表示されない特別なリンクです。 彼らの目的は、代替技術のユーザー（キーボードとスクリーンリーダーを使用している人々）にコンテンツのブロックをスキップする機能を提供することです。 標準から直接：
「複数のWebページで繰り返されるコンテンツのブロックをバイパスするメカニズムが利用可能です。」 –WCAG標準2.4.1–バイパスブロック
2.4.1はAレベルの標準です。 これは、第508条の対象であり、法律で義務付けられていることを意味します。 スキップリンクが必要です。
コンテンツスキップリンクの最も一般的なブロックが適用されるものを推測できますか？ あなたが「メニュー」を推測したなら、あなたは正しいでしょう。 メニューは、サイトのほぼすべてのページに表示されます。 視力のあるユーザーとマウスユーザーは、そこにあると期待しているサイト要素の1つであるため、右にスクロールする傾向があります。 ただし、スキップリンクが必要なブロックはナビゲーションメニューだけではありません。
スキップリンクでよく見落とされる領域は、左側のサイドバー（またはアラビア語などの右から左への言語のサイトの右側のサイドバー）です。 セマンティックな順序に分類される傾向があるため、ユーザーはコンテンツに直接アクセスするために、定期的に繰り返されるサイドバーをスキップする方法が必要になります。
ホームページの外に表示される注目の投稿ブロックについても同じことが言えます。 一部のサイトデザインでは、注目の投稿セクションまたはスライダーを内部ページに引き継いでいます。 これらのセクションの内容、つまりカテゴリまたはアーカイブページが変更されていない限り、スキップリンクを配置する必要があります。
アクセシビリティの概要：パート1
アクセシビリティとは、耳にする言葉ですが、完全には理解できない場合があります。 これは、単語自体が少し混乱する可能性があるためです。 ルートワードであるアクセスは、コンセプトが好きなものに結びついているように見せます...
スキップリンクをどのように追加しますか？
スキップリンクとは何かがわかったので、次はそれらをサイトに追加します。 この問題を解決するには、いくつかの方法があります。 簡単な方法（そしてあなたにとって非コーダーにとっては唯一の方法）は、プラグインをインストールすることです。 難しい方法は、それらを自分でテーマにコーディングすることです。
プラグインを使用する
リンクをスキップする場合に推奨するプラグインは2つあります。JoeDolsonによるWPAccessibilityとRianRietveldによるGenesisAccessibleです。 どちらのプラグインも、基本的なスキップリンクの追加など、いくつかのアクセシビリティの問題を解決します。 GenesisAccessibleは特にGenesisFrameworkを使用して構築されたサイト向けであることに注意してください。 Genesisサイトがない場合は、WPアクセシビリティを使用してください。
自分でコーディングする
他のオプションは、スキップリンクを自分でコーディングすることです。 コード自体はかなり単純で、HTMLとCSSの基本的な知識が必要なだけですが、この方法を試す前に、WordPressのテーマとテンプレートがどのように機能するかを理解する必要があります。 この時点から、参照されているファイルを見つける方法とそれらを編集する方法を知っていると仮定します。
まず、実際のスキップリンクを作成することから始めます。 これにより、テンプレートファイルに簡単にコピーして貼り付けることができます。 HTMLの知識を思い出して、アンカータグを書き出す必要があります。 ここでのフォーマットは読みやすくするためのものであることに注意してください。
<a href=”[don’t fill this in yet]” class=”skip-link”> Skip to Main Content </a>
意図的にhref属性を空白のままにしました。 これは、スキップリンクがリンクする場所を定義する必要があるためです。 この例では、ターゲットとして<main>要素を使用します。 IDのない要素に直接リンクすることはできないため、 <main>要素にIDがあることを確認する必要があります。 <main>要素はheader.phpにある可能性がありますが、常にそうとは限りません。 要素を見つけたら、その要素にIDがあることを確認する必要があります。 そうでない場合は、次のように追加します。
&lt;main id=”main-content”&gt; [a bunch more code below]
IDの特定の値は重要ではありませんが、覚えておく必要があります。 次に、スキップリンクコードをID値で更新します。
&lt;a href=”#main-content” class=”skip-link”&gt; Skip to Main Content &lt;/a&gt;
スキップリンクが作成されたので、 header.phpファイル、またはテーマの開始<body>タグが配置されている場所に戻ります。 <body>タグは、スキップリンクに不可欠な配置です。これは、キーボードおよびスクリーンリーダーのユーザーにとって:focusに最初に登場する絶対的なものである必要があるためです。
<body>タグの直後、完成したHTMLを過ぎます。 以下に、複数のスキップリンクを使用したより詳細な例を示します。 サイトに複数のリンクを追加する場合は、IDが正しく適用されていることを確認してください。
&lt;body&gt; &lt;a href=”#left-sidebar” class=”skip-link”&gt;Skip to Sidebar&lt;/a&gt; &lt;a href=”#featured-posts-block” class=”skip-link”&gt;Skip to Featured Posts&lt;/a&gt; &lt;a href=”#main-content” class=”skip-link”&gt;Skip to Main Content&lt;/a&gt; [Header navigation goes here]
これで、コードにスキップリンクがありますが、まだ完了していません。 ここでページをロードすると、上部にスキップリンクが表示されます。 CSSを追加します。 以下の例を使用すると、スキップリンクのスタイル設定は非常に簡単です。
.skip-link
{
position: absolute;
top: 0;
z-index: 9999;
right: 100%;
padding: 5px;
padding: 0.5rem;
font-size: 20px;
font-size: 2rem;
color: #000;
background: #FFF;
}
.admin-bar .skip-link
{
top: 32px;
}
.skip-link:focus
{
right: auto;
}
表示されないのは、 display: none 。 これを使用すると、スクリーンリーダーがリンクを完全にスキップし、目的を完全に無効にします。 非表示は、 right: 100%を使用してテキストを画面外に配置し、右にシフトすることによって行われますright: auto on :focus 。
CSSを適用すると、すべての設定が完了します。 スキップリンクは配置されていますが、非表示になっています。 キーボードユーザーまたはスクリーンリーダーがinitiates :focusでページを読み込むと、スキップリンクを使用して、目的のコンテンツに直接移動できます。
まとめ
スキップリンクは、多くの作業のように見えますが、実際にはそうではないアクセシビリティ機能の完璧な例です。 コード側で行ったのは、HTMLとCSSを数行追加することだけでした。 非技術的なアプローチのために、プラグインをインストールしました。 どちらの方法もそれほど長くはかかりません。スキップリンクはWCAG2.0（最新のWCAG標準）のAレベルの標準であるため、注意することが重要です。 あなたはあなたのサイトにそれらを持っていることを法律で義務付けられています。 自分を危険にさらさないでください。 今日スキップリンクを追加してください！