こんにちは、ヌーラボのウェブサイト課の松永です。
ウェブサイト課は、日々のアクセシビリティ向上の取り組みを発信するために、3ヶ月に一度アクセシビリティレポートを発行しています。
今回はその第7弾として、2025年4月〜6月の3ヶ月間に行った改善内容をご紹介します！
過去のアクセシビリティレポートは以下のリンクからご覧ください。
目次
2025年4月〜6月のウェブサイトのアクセシビリティ向上の取り組み
Cacooサイト・ブログにおけるヘッダーの改善
CacooサイトとCacooブログでヘッダーを更新し、以下の点でアクセシビリティ向上に取り組みました。
フォーカストラップの追加
モバイルメニューが開いている状態で、フォーカスがメニュー内に適切にトラップされるよう実装しました。これにより、キーボード操作時においてメニュー外に意図せずフォーカスが移動してしまうことを防ぐことができます。
スクロール制御の改善
ヘッダーにある項目のドロップダウンメニューを開いているときに、背景のコンテンツにoverflow: hiddenが適用されるように修正しました。これにより、メニューが開いている間は背景のスクロールが無効になり、ユーザーの操作体験が向上します。
ヘッダーのドロップダウンメニューを開いている状態
WCAG2.2では達成基準 2.1.2: キーボードトラップなし、達成基準 2.4.3: フォーカス順序に該当する項目です。
チームワークマネジメント診断コンテンツの実装
2025年6月20日に、チームワークマネジメント特集サイトを公開しました。そのページ内のチームワークマネジメント診断コンテンツにおいて、より多くのユーザーが快適に利用できるように実装しました。
キーボード操作への対応
診断コンテンツのすべての機能をキーボードのみで操作できるように実装しました。マウスを使用しないユーザーでも、TabキーやEnterキーを使って診断を進めることができます。
適切なフォーカス管理
診断の質問が次に遷移する際に、フォーカスが外れることなく維持されるよう実装を改善しました。これにより、キーボード操作時やスクリーンリーダー利用時に、迷うことなく診断を続けることができます。
スクリーンリーダー対応の強化
プログレスバーや各選択項目などでは特にマシンリーダブルな実装を心がけ、スクリーンリーダーが診断コンテンツの内容を正確に読み上げられるようにしました。
キーボード操作時でもどの選択肢を選んでいるかが判別しやすくなっている
WCAG2.2では達成基準 1.3.1: 情報及び関係性、達成基準 2.1.1: キーボード、達成基準 2.4.3: フォーカス順序に該当する項目です。
アクセシビリティを考慮したカード型リンクの実装
上に同じくチームワークマネジメント特集サイトにおいて、カード型リンクを以下の観点で実装しました。
行動喚起のために「記事を読む」などの文言を含めたい要望と、正しいリンクテキストを設定するアクセシビリティの要求も満たす必要がありました。
そのため、記事のタイトルとボタンを一つの<a>要素内に配置し、リンクエリアをカード全体に広げる対応をしました。
この実装により、ユーザーに具体的な行動を提示しながら、キーボード操作時でもカード全体がクリック可能であることが分かりやすくなります。スクリーンリーダー利用時にもメリットがあり、カードの中にあるすべての要素を <a>要素内に含める場合と比べて、リンクの目的が明確になります。
記事のタイトルと「記事を読む」のテキストだけがa要素としてマークアップされている
要素の擬似要素を利用してリンクエリアをカード全体に広げている
WCAG2.2では達成基準 1.3.1: 情報及び関係性、達成基準 2.4.4: リンクの目的 (コンテキスト内)に該当する項目です。
今後のウェブサイト課のアクセシビリティへの取り組み
ヌーラボ社内では、WCAGの読み合わせ会を継続しています！先日ようやくレベルAをひと通り読み終えました。レベルAの中には達成しないと利用者に重大な影響を与えてしまう「非干渉」の項目も含まれており、優先的に読み合わせできたのはよかったと思います。引き続きレベルAAの読み合わせ会を実施するとともに、それをウェブサイト・サービスに落とし込むことも忘れずにやっていきたいです。
今回改善できた箇所はそれほど多くないと思いますが、ヌーラボのウェブサイト課のミッションステートメントにある「すべての人に等しい情報を」を忘れずに、少しずつでもアップデートしていくつもりです。
これからもウェブサイト課のアクセシビリティの改善と取り組みにご期待ください！
