こんにちは！SmartHRでアクセシビリティエンジニアをしているhassyです。
アクセシビリティエンジニアとして、開発チームと協力しながらプロダクトのアクセシビリティ向上に取り組み、誰もが使いやすい製品づくりを目指しています。ひとりでも多くのユーザーが快適に使えるよう、日々改善を進めています！ SmartHRでのアクセシビリティエンジニアの仕事については、「SmartHRアクセシビリティ月報 2024年8月号」と「SmartHRアクセシビリティ月報 2024年11月号」で詳しく紹介しておりますので、ぜひご覧ください。
SmartHR UIの2024年後期のミッションとして、「SmartHR UI を利用することでプロダクトのアクセシビリティ品質を向上させる」ことを目指しました。これにより、開発チームはアクセシビリティ基準を達成するためのコストを抑えながら、開発スピードを維持して高品質なプロダクトを提供できるよう取り組みました。
改善の取り組み
最初に、アクセシビリティスペシャリストの masuP9 さんと協力し、2024年9月時点の全58コンポーネントをチェックしました。その結果、5つのコンポーネントに改善が必要な点を発見しました。
そこで、これら問題のあった5つのコンポーネントを改善し、SmartHRのアクセシビリティ簡易チェックリスト（SmartHRのウェブアクセシビリティ方針に基づく目指すべき品質ポイントを整理したもの）に完全準拠させました。
以降では、問題のコンポーネントの改善内容を順に紹介していきます。具体的な実装対応は、OSSリポジトリのPull Requestでご確認いただけますので、ぜひご覧ください！
- Switchのコントラスト比の改善
- FormControl内のInputFileのアクセシブルネームの改善
- Textareaの最大文字数エラーの改善
- ModelessDialogのフォーカス順序の改善
- Table(ThCheckbox)の操作性の改善
Switchのコントラスト比の改善
アクセシビリティ簡易チェックのNG項目
問題点
未選択時のつまみ部分のコントラスト比が1.87:1で、アクセシビリティ基準（非テキストは最低3:1）を満たしていませんでした。 これにより、弱視・ロービジョンユーザーがつまみ部分を視認しづらく操作しにくい状況でした。
改善内容
つまみ部分のコントラスト比を5.16:1まで引き上げることで、視認性を大幅に改善しました 。これにより、弱視・ロービジョンユーザーも操作しやすくなりました。 今後、Switchやその他のフォームコントロールコンポーネントについても、非テキスト部分やボーダーのコントラスト比が基準を満たすよう検討を進めていきます。
関連リンク
対応Pull Request
FormControl内のInputFileのアクセシブルネームの改善
アクセシビリティ簡易チェックのNG項目
問題点
FormControlコンポーネントと併用する際、可視ラベルがアクセシブルネームに反映されていませんでした。 その結果、スクリーンリーダーで読み上げる際にラベルの文脈が欠落し、何のファイルが選択されるのかが分かりにくい状況でした。
改善内容
可視ラベルとボタン（InputFileのUI）のラベルの両方をaria-labelledby属性でアクセシブルネームに含めました。
その結果、スクリーンリーダーで InputFile を読み上げる際に可視ラベルも含まれるようになり、どのファイルを選択するのかが明確になり、混乱せずに操作しやすくなりました。
関連リンク
対応Pull Request
Textareaの最大文字数エラーの改善
アクセシビリティ簡易チェックのNG項目
問題点
最大文字数エラーが「色（赤色）」や「マイナス記号」だけで表現されていました。
そのため、以下の問題が発生していました。
- 色だけのエラー表示だと、色覚特性のあるユーザーには認識しづらい
- マイナス記号のみでは直感的に理解しにくく、混乱を招く可能性がある
- スクリーンリーダーユーザーには、エラー状況や入力可能な文字数が適切に伝わらない
改善内容
エラーメッセージを改善し、色以外の手段（テキスト）でも情報を伝達し、すべてのユーザーが状況を理解しやすくなりました。
また、スクリーンリーダーユーザーも入力中に状況を把握しやすくするために、ライブリージョンを利用し、入力中に入力可能な文字数をリアルタイムで通知するように改善しました。最大文字数を超えた場合、aria-invalid="true" を適用し、スクリーンリーダーユーザーにも適切にフィードバックを提供します。
関連リンク
対応Pull Request
ModelessDialogのフォーカス順序の改善
アクセシビリティ簡易チェックのNG項目
問題点
ModelessDialogを閉じると、最後にフォーカスがあった要素に戻らず、ページ内の最初のフォーカス可能な要素に移動してしまっていました。 その結果、キーボードユーザーやスクリーンリーダーユーザーにとって直感的でなく、操作中に混乱を招く可能性がありました。
改善内容
ダイアログを閉じた際に、最後にフォーカスがあった要素に戻るように修正しました。 これにより、以下の改善ができました。
- ユーザーが混乱せず、すぐに次の操作に移れて操作しやすくなりました
- 余計なTab移動を防ぐことで、キーボードユーザーの負担が軽減されました
- スクリーンリーダーユーザーの文脈を保てました（どこを操作していたか分かりやすい）
関連リンク
対応Pull Request
Table(ThCheckbox)の操作性の改善
アクセシビリティ簡易チェックのNG項目
問題点
Tableコンポーネントのヘッダーセル内のチェックボックスに可視ラベルがなく、操作の意図がわかりにくい状況でした。 チェックボックスのマシンリーダブルなラベルは存在していましたが、可視ラベルが不足していたため、視覚的に操作を理解しづらい問題がありました。
改善内容
以下の対応を行い、操作の意図がわかりやすくなるよう改善しました。
- テキストラベルを表示するスペースがないため、マウスポインターをホバー、またはフォーカスした際に「すべての行を選択」のツールチップを表示しました
- ThCheckboxコンポーネントは
<th>タグでレンダリングされますが、内包するコンテンツが「すべての行を選択」となるため、カラム名が誤解を招く可能性がありました。この問題を解消するため、<th>に aria-label を付与し、カラム名を「選択」に変更しました
関連リンク
対応Pull Request
おわりに
今回は、SmartHR UIのコンポーネントをアクセシビリティ簡易チェックリストに準拠させる取り組みを進め、プロダクトのアクセシビリティ品質を向上した取り組みを紹介しました。
これからも、誰もが使いやすいUIを目指し、SmartHR UIの改善を続けます！ 次のステップとして、WCAG A・AA準拠を目指し、コンポーネントの改修や支援技術のユーザビリティ向上に取り組んでいきます！
We Are Hiring!
SmartHRアクセシビリティ本部では、一緒にプロダクトのアクセシビリティを改善し、誰もが使いやすいプロダクトを作る仲間を募集しています！
興味を持った方は、ぜひ以下のリンクからご応募ください！
