こんにちは、ヌーラボのウェブサイト課でフロントエンドエンジニアをしている東尾です。2024年からヌーラボのウェブサイト課が中心となって取り組んでいるアクセシビリティの取り組みを共有します！
きっかけは昨年のアクセシビリティカンファレンス福岡に参加したチームメンバーたちからの共有です（当時はまだ私はヌーラバーではなかったため、参加していませんでした）。伊原力也さん・柴田宏仙さんの発表「ウェブアクセシビリティ社内教育のすゝめ 〜品質か、営業か〜」の中で、「どんな小さなことでもまずはアクセシビリティに関して取り組んでいることを発表していく」ことを推奨する趣旨のお話をされていたと聞いています。
サービスは約20年の歴史がありますが、ヌーラボではアクセシビリティに関する取り組みはまだ始めたばかりです。改善としては小さいもの、中には今や当たり前に対応しなければいけないものもあるかもしれません。しかし、ぜひアクセシビリティに取り組んでいる皆さんの励みになればと願いつつ、発表していきたいと思います。
それでは、2024年3月期、第3四半期（2023年10〜12月）のヌーラボの改善の軌跡です！
目次
2023年10〜12月のウェブサイト課 アクセシビリティ改善
Cacooサイトヘッダーのスクリーンリーダー対応
Cacooサイトのヘッダーには複数のドロップダウンメニュー・ハンバーガーメニューがあります。これまではわからなかった開閉状態を、WAI-ARIAを使用してスクリーンリーダーでもわかるように改善しています、
「こちら」表示の修正
サービスサイト内部に残る「こちら」の文字表示に対し、応急処置としてaria-labelを追加し、音声でリンク先の内容がわかるよう変更しました
ヌーラボサイトの改善
- フッター内の言語切替ボタンをキーボードで操作可能にしました
- フッターとヘッダー内のナビゲーションのホバー時にアンダーラインを追加し、見やすくしました
- ブラウザの文字サイズ変更にウェブサイトの文字サイズも連動するようにしました
- ページの先頭に「本文へのスキップリンク」を追加しました
- 全てのリンクやボタン・フォームでフォーカスインジケーターを表示するようにしました
- お問い合わせ・求人ページなどにあるフォームにおいて、キーボードだけで操作を完結できるようにしました
ヌーラボブログページのキーボード操作・スクリーンリーダー対応
ブログのヘッダーがキーボード・スクリーンリーダーに対応しました
Markuplintの導入
今後のアクセシビリティ改善に備え、ヌーラボ英語サイトにMarkuplintを導入しました。
これからも改善を続けます！
全てを紹介しきれていませんが、直近3ヶ月間だけでも細かな改善を多数重ねてきました。
ヌーラボのウェブサイト課のミッションには「すべての人に等しい情報を」という文章があります。
すべての人に等しい情報を
多様な使い方を認識し、誰もが優れた体験を享受できるようなサービスを目指すために、アクセシビリティに注力します。
これからもこのチームミッションのもと、プロダクト・ウェブサイト両面の改善を進めていきます！
