2025年1月27日に開催された合同勉強会「ユーザーファーストを実現するフロントエンドの最前線」では、アクセシビリティを中心にしたフロントエンド開発の取り組みが各社から発表されました。 本記事では、クラウドサイン フロントエンジニアの林さんが発表された「ユーザーファーストなドロップダウンメニューの実装」の内容をお届けします。
TL;DR
今回のセッションで強調されたのは、「誰でも使えること」が「ユーザーファースト」の真髄であるということでした。特に、以下の点がメインメッセージとして挙げられました。
- HTML標準の要素にないUI（例：ドロップダウンメニュー）をアクセシブルに実装する必要性
- アクセシビリティを向上させることで、すべてのユーザーにとって使いやすいプロダクトが作れる
特定のユーザー層だけでなく、あらゆる状況下のユーザーに対応することで、真に「ユーザーファースト」な開発が可能になります。
アクセシビリティチームの活動
弁護士ドットコムのクラウドサインでは、アクセシビリティをプロダクトに定着させるための取り組みが行われています。具体的には以下の活動が紹介されました。
イベント開催レポートブログ creators.bengo4.com
視覚障害を持つユーザーによるアクセシビリティチェック 実際のユーザー視点での検証を行い、改善ポイントを見つけるプロセスを設けています。
実際のユーザーの声を聞く 「リンクを慎重にフォーカスしないと操作ミスが起きる」など、現場からのフィードバックを開発に反映。
アクセシビリティはユーザーファーストに対する1つのアプローチとなっていることがわかります。
カスタムコンポーネントとアクセシビリティ
次に、アクセシビリティを考慮したカスタムコンポーネントの実装がテーマになりました。林さんは「HTML標準の要素にないUI」について以下の具体例を挙げ、課題と解決策を紹介しました。
主な課題
- ドロップダウンメニューはキーボード操作のみに対応していない
- 支援技術での知覚・操作が困難
解決策
- 操作可能な要素でのマークアップ
<button>要素で操作可能な箇所を明示<ul>や<li>でリスト構造を表現
- 意味合いや状態を補足するWAI-ARIA
aria-haspopupでポップアップの存在を明示aria-expandedで開閉状態を示す
- 操作に必要な挙動のJavaScirpt
- キーボードでの操作性向上
- メニューアイテムのフォーカス移動を適切に管理
発表時間の都合で具体的なコード詳細は割愛されておりましたが、ここにブログに記載されていると紹介されました。
まとめ
最後に林さんは、以下の結論でセッションを締めくくりました。
- カスタムコンポーネントは意識しないとアクセシブルにならない
- 適切なマークアップ、WAI-ARIA、挙動の実装を通じてアクセシビリティを向上させるべき
- 「誰でも使えるプロダクト」を目指すことが、ユーザーファーストにつながる
今回のセッションを通して、アクセシビリティの重要性を再認識するとともに、具体的な実装手法を学ぶことができました。フロントエンドエンジニアにとって、非常に有益な内容だったと感じます。
