スキップ リンクを使用して WordPress サイトをよりアクセスしやすくする方法
公開: 2023-02-26アクセシビリティ シリーズの紹介では、さまざまな Web コンテンツ アクセシビリティ ガイドライン (WCAG) の基礎について説明しました。 重要なガイドラインのいくつかを確認し、サイトをよりアクセスしやすくする方法を示して、次のステップに進みましょう。 より一般的にスキップ リンクとして知られているバイパス ブロックから始めましょう。
スキップリンクとは？
スキップ リンクは、タブ キーまたはスクリーン リーダーを介して:focusに移動するまでサイトに表示されない特別なリンクです。 その目的は、代替技術のユーザー (キーボードやスクリーン リーダーを使用するユーザー) がコンテンツのブロックをスキップできるようにすることです。 標準からまっすぐ：
「複数の Web ページで繰り返されるコンテンツのブロックをバイパスするメカニズムが利用可能です。」 – WCAG 標準 2.4.1 – バイパス ブロック
2.4.1 は A レベルの標準です。 これは、セクション 508 の対象であり、法律で義務付けられていることを意味します。 スキップリンクが必要です。
コンテンツ スキップ リンクの最も一般的なブロックが適用されるのは何だと思いますか? あなたが「メニュー」を推測したなら、あなたは正しいでしょう. メニューは、サイトのほぼすべてのページに表示されます。 目の見えるユーザーやマウスを使用するユーザーは、そこにあると期待されるサイト要素の 1 つであるため、右にスクロールする傾向があります。 しかし、スキップ リンクが必要なブロックはナビゲーション メニューだけではありません。
スキップ リンクで見過ごされがちな領域は、左側のサイドバー (または、アラビア語のような右から左へ記述する言語のサイトの右側のサイドバー) です。 意味的な順序で分類される傾向があるため、ユーザーはコンテンツに直接アクセスするために、定期的に繰り返されるサイドバーをスキップする方法が必要になります。
ホームページの外に表示されるおすすめの投稿ブロックについても同じことが言えます。 一部のサイト デザインでは、おすすめの投稿セクションやスライダーを内部ページに移動します。 これらのセクションの内容が変更されない限り (つまり、カテゴリ ページやアーカイブ ページなど)、スキップ リンクを配置する必要があります。
スキップリンクを追加するにはどうすればよいですか?
スキップ リンクとは何かがわかったところで、今度はそれらをサイトに追加します。 この問題を解決するには、いくつかの方法があります。 簡単な方法 (およびコーダー以外の場合は唯一の方法) は、プラグインをインストールすることです。 難しいのは、それらを自分でテーマにコーディングすることです。
プラグインの使用
リンクをスキップする場合に推奨するプラグインの 1 つ: Joe Dolson による WP Accessibility。 基本的なスキップ リンクの追加など、いくつかのアクセシビリティの問題が解決されます。
自分でコーディングする
もう 1 つのオプションは、スキップ リンクを自分でコーディングすることです。 コード自体はかなり単純で、基本的な HTML と CSS の知識があれば十分ですが、この方法を試す前に、WordPress のテーマとテンプレートがどのように機能するかを理解する必要があります。 この時点から、参照されているファイルを見つける方法とそれらを編集する方法を知っていることを前提としています。
最初に実際のスキップ リンクを作成することから始めます。 これにより、テンプレート ファイルに簡単にコピー アンド ペーストできます。 HTML の知識を思い出すと、アンカー タグを書き出す必要があります。 ここでの書式設定は読みやすくするためのものであることに注意してください。
&amp;lt;a href=”[don't fill this in yet]” class=”skip-link”&amp;gt; Skip to Main Content &amp;lt;/a&amp;gt; href属性は意図的に空白のままにしています。 これは、スキップ リンクのリンク先を定義する必要があるためです。 この例では、 <main>要素をターゲットとして使用します。 ID がないと要素に直接リンクできないため、 <main>要素に ID があることを確認する必要があります。 <main>要素はおそらくheader.phpにありますが、常にではありません。 要素を見つけたら、ID があることを確認する必要があります。 そうでない場合は、次のように追加します。
&amp;lt;main id=”main-content”&amp;gt; [a bunch more code below]ID の具体的な値は重要ではありませんが、覚えておく必要があります。 次に、スキップ リンク コードを ID 値で更新します。
&amp;lt;a href=”#main-content” class=”skip-link”&amp;gt; Skip to Main Content &amp;lt;/a&amp;gt; スキップ リンクが作成されたので、 header.phpファイル、またはテーマの開始<body>タグが配置されている場所に戻ります。 <body>タグは、キーボードとスクリーン リーダーのユーザーが:focusに入る絶対的な最初のものである必要があるため、スキップ リンクの必須の配置です。
<body>タグの直後、完成した HTML を過ぎます。 以下は、複数のスキップ リンクを使用したより詳細な例を示しています。 サイトに複数のリンクを追加する場合は、ID が正しく適用されていることを確認してください。
&amp;lt;body&amp;gt; &amp;lt;a href=”#left-sidebar” class=”skip-link”&amp;gt;Skip to Sidebar&amp;lt;/a&amp;gt; &amp;lt;a href=”#featured-posts-block” class=”skip-link”&amp;gt;Skip to Featured Posts&amp;lt;/a&amp;gt; &amp;lt;a href=”#main-content” class=”skip-link”&amp;gt;Skip to Main Content&amp;lt;/a&amp;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 を数行追加しただけです。 非技術的なアプローチのために、プラグインをインストールしました。 どちらの方法も非常に時間がかかりますが、スキップ リンクは WCAG 2.0 (最新の WCAG 標準) の A レベル標準であるため、注意が必要です。法律により、サイトにそれらを掲載することが義務付けられています。自分を危険にさらさないでください。 今すぐスキップ リンクを追加してください。