こんにちは！ヌーラボのウェブサイト課でマークアップとフロントエンドを担当している武石です。
3ヶ月ごとに配信しているウェブサイト課によるアクセシビリティレポートですが、今回は新しい期が始まり、4月〜6月の3ヶ月の間で行ったアクセシビリティの改善をお届けします。
過去のアクセシビリティレポート
目次
2024年4月〜6月アクセシビリティの改善
4月〜6月はリデザインプロジェクトと新規サイト制作という2つの大きいプロジェクトが並走していたため、細かい改善は前回より少なかったですが、モダンな開発環境へのアップデートとサイトの再設計により、一からアクセシビリティの実装を行うことが出来ました。
Developer Siteのリデザインによるアクセシビリティの向上
2024年6月18日にリデザインにより生まれ変わったDeveloper Siteでは以下の対応を行いました
- 正しいHTML構造でのマークアップによりスクリーンリーダーでの検索性・読みやすさを改善
- フォーカスインジケーターの表示によりキーボード操作時の現在位置がわかるように改善
- CSSにおいてpxの代わりにremを使用しブラウザのフォントサイズを200%に設定しても見た目が崩れないように改善
- aria-current属性を使用しスクリーンリーダーで現在位置を正確に把握できるよう改善
スキップリンクを設置したことで、必要な情報に迅速にアクセスできるため、キーボード操作によるユーザーエクスペリエンスの向上にも期待しています。
リデザインされたDeveloper Siteを是非ご覧ください。
JBUG Siteのリリースとアクセシビリティの確保
2024年6月24日に新たにJBUG Siteをリリースしました。
JBUG(Japan Backlog User Group)の理念や目的、活動内容を発信すると共に、より多くの利用者にとって使いやすいサイトとなるように以下の実装を行いました。
- 正しいHTML構造でのマークアップによりスクリーンリーダーでの検索性・読みやすさを改善
- フォーカスインジケーターの表示によりキーボード操作時の現在位置がわかるように改善
- CSSにおいてpxの代わりにremを使用しブラウザのフォントサイズを200%に設定しても見た目が崩れないように改善
JBUG Siteについての詳しい内容は下記ブログをチェックしてみてください！
Astroを利用したJBUGサイトの開発について #ヌーラボ真夏のブログリレー2024
Backlog Siteのハンバーガーメニューの読み上げを改善
ハンバーガーメニューのアクセシビリティをさらに向上させるために、メニューの開閉状態をスクリーンリーダーでユーザーにお知らせする改善を行いました。
ウェブサイト課のアクセシビリティへの取り組み
ウェブサイト課で掲げているミッションの中にある「すべての人に等しい情報を」という目標に少しでも近づくために、ウェブサイト課ではアクセシビリティに関するガイドラインの読み合わせ会を定期的に実施し、メンバー間での議論や共有も行っています。
こういった活動はメンバーのスキルアップにも繋がり、過去の自分と比較するとアクセシビリティに詳しくなってきていることが実感できています。
また、社内全体への意識向上を図るための、社内全体に向けたアクセシビリティの情報発信や共有会も開催しています。これにより、サービス全体のアクセシビリティ向上を目指し、誰もが快適に利用できるサービス作りに寄与できればと思います。
これからもウェブサイト課のアクセシビリティの改善と取り組みにご期待ください！
