2.4.1 ブロックスキップの達成基準

🟦なんのこと？

「2.4.1 ブロックスキップの達成基準」がおわかりになる人は、Webアクセシビリティを勉強されている人、もしくは苦労している人と思われます。
「2.4.1 ブロックスキップの達成基準」は、JIS X 8341-3:2016 のチェック項目の1つです。2024年4月1日の障害者差別解消法の改正により、ウェブサイトは、JIS X 8341-3:2016 に準拠して欲しいとのことで、私の周辺でもざわついています。詳しいことは下のサイトをご覧ください。

達成基準 2.4.1: ブロックスキップを理解する

ウェブアクセシビリティとは？ 分かりやすくゼロから解説！ | 政府広報オンライン

🟦対応状況

現在の当オフィスにサイトでは「2.4.1 ブロックスキップの達成基準」が NG の状態です。今後改めて対応する予定です。
但し、クライアントさまのサイトでは、可能な限り対応する必要があるため、その方法を備忘録も兼ねて以下に記載します。

🟦対応方法の概要

ページの最上部に「本文へ」のテキストでページ内リンクを設ける方法です。但し、そのまま設置しただけでは、常に表示されるため、視覚が不自由ではない人にとっては邪魔になります。だからといって、スクリーンリーダーに対応させるために単純に非表示にしただけでは、キーボードだけで操作される肢体が不自由な人への配慮がなくなります。
本方法は、「本文へ」のページ内リンクを通常は画面の外に設置し、フォーカスされたときに画面内に表示させる方法になります。HTML、SCSS、jQuery のソースを下に載せています。