こんにちは!ヌーラボのウェブサイト課でフロントエンドエンジニアをしている松永です。前回のアクセシビリティレポート#1から、3ヶ月ほどが経過しました。この3ヶ月間のうちに全社総会のGeneral Meetingが行われ、お祭り騒ぎのなかでもアクセシビリティ関連の改善を少しずつ積み重ねてきました。下記に2024年3月期、第4四半期(2024年1〜3月)の改善を共有したいと思います!
目次
2024年1〜3月のウェブサイト課 アクセシビリティ改善
「こちら」リンク表示の修正
NulabサイトとCacooサイトに残っていた「こちら」のリンク表示に対し、応急処置としてaria-labelを追加し、音声でリンク先の内容がわかるよう変更しました
ヘッダーのスクリーンリーダー対応
サービスサイトのヘッダーにはドロップダウンメニューやハンバーガーメニューがあります。Typetalkサイト、Cacooブログ、Typetalkブログにおいて、これまではスクリーンリーダーでわからなかった開閉状態をわかるように改善しています
フォーカスインジケータの表示
CacooブログとTypetalkブログにおいて、CSSのoutlineプロパティが非表示に設定されているところを表示されるようにしました
ナビゲーションが複数あるときに識別できるように修正
NulabサイトのHTMLのnav要素が複数あるページで、それらが何のナビゲーションなのかがスクリーンリーダーで識別しやすいようにしました
モーダルダイアログをアクセシブルに
Backlogサイトにおいて、HTMLのdiv要素で作られておりキーボード操作などが十分にできなかったモーダルダイアログの箇所があり、dialog要素を利用することで問題を解消しました
WAI-ARIAに関するエラーを解消
NulabサイトとTypetalkサイトにおいて、カルーセルを利用している箇所のWAI-ARIAに関するエラーを解消しました。また、Nulabのグローバルサイトのページネーションなどで、不要なWAI-ARIAが設定されている箇所を修正しました
高さがpxで固定されているところをremに変更
ブラウザのフォントサイズを200%に変更するとき、高さがpxで固定されていることでレイアウト崩れが発生する箇所がNulabサイトにあり、remを使うことでレイアウトが崩れないよう修正しました
これからも少しずつ改善していきます!
昨年のアクセシビリティカンファレンス福岡に参加してからウェブサイト課で始まった、アクセシビリティガイドラインの読み合わせは、現在でも継続することができています。また、2024年に入ってからは、ウェブサイト課だけでなくチームの垣根を越えて、アクセシビリティの情報をシェアするミーティングを月に一度実施することができています。これらの取り組みによって知識が増えたり関心が高まったりする実感があるので、これからも継続していきながら、プロダクト・ウェブサイトの改善に活かしていきたいと思います!
イベント情報
2024年5月16日(木曜日)に開催されるGlobal Accessibility Awareness Day Japan 2024ですが、ヌーラボの福岡本社でパブリックビューイングをします!居住地の都合で私はYouTubeでの視聴になりそうですが、近くにお住まいの方はぜひ一緒に「アクセシビリティを考える一日」にしましょう!