こんにちは、ヌーラボのウェブサイト課でマークアップとフロントエンドを担当している東尾です。
ウェブサイト課は、日々のアクセシビリティ向上の取り組みを発信するために、三ヶ月に一度アクセシビリティレポートを発行しています。
今回はその第6弾として、2025年1月〜3月の三ヶ月間に行った改善内容をご紹介します！
過去のアクセシビリティレポートは以下のリンクからご覧ください。
目次
2025年1月〜3月のウェブサイトのアクセシビリティの向上
[Backlogサイト] 料金ページリニューアルによるアクセシビリティの向上
1月20日にBacklogサイトの料金ページをリニューアルしました！
Backlogサイト料金ページ、ファーストビューのスクリーンショット
リニューアルに伴い、以下の対応を行いました。
プラン切り替えボタンをセマンティックに実装
支援技術にも選択中の状態がわかるよう、<button>要素から<input type="radio">要素に変更しました。
以前は、音声読み上げソフトを使用しているユーザーにプランの選択状態が伝わらない問題がありましたが、現在は正しく読み上げられるよう改善され、どちらのプランが選択されているかが分かるようになりました。
プラン切り替えボタンの比較
また、ハイコントラストモードでも選択中の状態が分かるように実装しました。
その結果、ハイコントラストモードを使用しているユーザーも、現在の選択状態を正確に把握できるようになり、視認性が向上しました。
プラン切り替えボタン、ハイコントラストモード時の比較
WCAG2.2では達成基準1.3.1 情報及び関係性、1.4.3 コントラストに該当する項目です。
参考記事：
比較表のtableをセマンティックに実装
<caption> 要素を使用してテーブルにタイトルを設定し、表の内容が分かりやすくなるようにしました。<tr>、<td>、<th>の正しい使用、結合したデータセルには headers 属性を付与するなど、適切なマークアップを意識して実装しました。
ただし、デバイスによっては結合セルが意図通りに読み上げられないなどの問題があります。ここに関しては引き続き、よりアクセシブルなデザインと実装を探求したいと考えています。
また、モバイル表示では <summary> 要素と <details> 要素を使ったアコーディオン形式で表示しています。
VoiceOverで”表メニュー”を開いる様子
WCAG2.2では達成基準1.3.1 情報及び関係性に該当する項目です。
参考記事：
見た目とソースの順番が異なっていた箇所（料金カード）を修正
以前は、料金カードの表示順がモバイルとPCで異なっていましたが、今回のリニューアルでどちらも同じ順番で表示されるように改善しました。見た目と実際の構造（ソース）のずれがなくなったことで、キーボードで操作する方にもわかりやすくなり、迷いにくくなっています。
WCAG2.2では達成基準1.3.2 意味のあるシーケンスに該当する項目です。
アンカーリンクのスムーススクロール実装を更新
アンカーリンクでの移動時にフォーカスが遷移先に移動しない問題を修正し、支援技術やキーボード操作でも目的の場所にアクセスできるよう改善しました。
WCAG2.2では達成基準 2.4.3 フォーカス順序 に該当する項目です。
[ヌーラボサイト] フォーカストラップの実装
過去のセキュリティに関する補足規約ページでは、モーダルダイアログが表示されます。
キーボード操作時にフォーカスがダイアログの背後に移動してしまわないよう、フォーカストラップを実装しました。これにより、キーボードを使用するユーザーが操作中に意図せずモーダルの外へフォーカスが移動してしまうのを防ぐことができます。
過去のセキュリティに関する補足規約ページ訪問時のキャプチャ。
WCAG2.2では達成基準2.4.3 フォーカス順序、2.1.1: キーボード に該当する項目です。
今後のウェブサイト課のアクセシビリティへの取り組み
社内でWCAGの読み合わせ会を継続しています！
ウェブサイト課に加え、アクセシビリティに関心のあるメンバーが集まり、週に1回ペースで読み合わせを行っています。チームの垣根を越えて気になった点を共有・議論することで、アクセシビリティへの理解が着実に深まっています。
ヌーラボのウェブサイト課は、ミッションステートメントに「すべての人に等しい情報を」が含まれており、誰もが快適に情報にアクセスできるよう、今後もアクセシビリティの向上に力を注いでいきます。
これからもウェブサイト課のアクセシビリティの改善と取り組みにご期待ください！
