こんにちは、freeeのアクセシビリティー・ガイドラインおじさんの中根です。
先日受けた職場の健康診断の結果に基づいて出された「健康年齢」なるものが、1年前と比べると10歳くらい上がっていてあっけにとられています。これではおじさんではなくおじいさんです……。
さて、こちらでは久しぶりのfreeeアクセシビリティー・ガイドラインの更新のお知らせです。
今確認してみたら、前回こちらでお知らせしたのが去年の9月のリリース時だったのですが、その後もそれなりに更新していました。今回以外の更新情報も合わせてご確認ください。
今回なぜ久しぶりに更新のお知らせをしようと思ったかというと、今回のリリースでは、コントラスト比関連のガイドラインで、細かいですが基準の変更を伴う変更があったので、詳しく説明する必要があるだろうと考えたためです。
コントラスト比関連ガイドライン、変更のポイント
まず、今回の変更のポイントをまとめると、次の3点です。
- 「大きな文字」のサイズの基準を修正
- モバイル・アプリケーション向けに別のガイドラインを追加
- [SHOULD]の要件の削除
以下、少し詳しく説明します。
大きな文字
WCAG 2.1では、テキストのコントラスト比について、文字のサイズが18pt以上、または太字で14pt以上の場合、他の場合よりも低いコントラスト要件が定められています。 この18ptと14ptという値は、欧文のテキストの場合です。
日本語のテキストの場合については、ウェブアクセシビリティ基盤委員会(WAIC)が22ptと18ptという値を示しています。
freeeアクセシビリティー・ガイドラインでは、freeeのプロダクトの表示には基本的に日本語が用いられるため、この22ptと18ptという値を基準としています。
これらの値、すなわち22ptと18ptについて、ピクセル換算の値もガイドラインでは示しているのですが、なぜかこの値が、上述のWAICの資料で示されているものと異なった値になっていました。そこで、ガイドラインの記述をWAICの資料の記述に合わせる変更をしました。
具体的には、これまでは「30px（22pt）以上」、「22px（18pt）以上で太字」となっていました。 これを、「29px（22pt）以上」、「24px（18pt）以上で太字」に変更しました。
これまでの基準に基づいて、22pxまたは23pxで太字のテキストに、「大きな文字」のコントラスト要件を適用してデザインされたものがあった場合、WCAG 2.1の基準は満たさないことになってしまうため、WCAG 2.1との互換性を維持する上でも修正が必要だと判断しました。
モバイル向けのコントラスト比要件の追加
これまでは、モバイル・アプリケーションとWebで同じコントラスト比の要件を定めてきました。 今回これを改めて、前述の「大きな文字」のサイズについて、モバイルではWCAG 2.1で示されている値、すなわち18pt以上、14pt以上の太字とすることにしました。
モバイルではWebに比べて表示文字サイズの変更方法が多くのユーザーに認知されていると推測できることや、Human Interface GuidelinesやMaterial Designでもこの値が示されていることから、このように変更することが現実的だろうという判断をしました。
参考：
[SHOULD]の要件の削除
コントラスト比の値の基準について、freeeアクセシビリティー・ガイドラインでは、WCAG 2.1のレベルAAのものを[MUST]（レベルA相当）として扱っています。それに伴って、WCAG 2.1のレベルAAAの基準を[SHOULD]（レベルAA相当）の基準として記載してきました。
しかし、次の理由からこの[SHOULD]の要件を削除することにしました。
まず、freeeアクセシビリティー・ガイドラインは、WCAG 2.1のレベルAA相当のコンテンツ実現に必要なものを示すことを当初から目指しています。ですから、レベルAAAの基準を示すことは必ずしも必要ではありません。
そして、[SHOULD]として示されている基準を達成することを日常的に目指すのは、あまり現実的ではないのが実際です。freeeのブランドサイトで提示されている色のうち、[SHOULD]の要件を満たすような色の組み合わせは非常に少なく、プロダクトデザインにおいてこの[SHOULD]要件が意識できる状態にはなっていないのが現実です。
また[MUST]となっているガイドラインの中に[SHOULD]として数値が示されている状態であるのもわかりづらく、複雑な記載によって理解しづらくなることにも繋がっていました。
このようなことから、この要件を削除する判断に至りました。
コントラスト比以外の変更：NVDA関連解説動画の追加
ここまで述べてきたコントラスト比関連の変更は、見た目には地味なものですが、ガイドラインやチェックリストを用いた開発を進めていく上では、場合によっては影響があるものです。 一方、ガイドラインやチェックリストの活用という意味では影響はないものの、コンテンツとしてはそれなりに大きな変更となったのが、NVDAに関する解説動画の追加です。
ここ数ヶ月にわたって、株式会社シュアルタの西本 卓也さんにご協力いただいて製作した動画を、ガイドラインの関連するセクションからリンクしました。
NVDAを用いたチェックの実施方法では、NVDAの初期設定や基本的な使い方などを解説する動画を掲載しています。 また、NVDAを用いて実施できるチェックについては、当該チェックの箇所に具体的なチェックの実施方法を解説する動画を掲載しています。
これらの動画は、YouTubeのプレイリストにもまとめてあります。
全22本という、数字だけ見ると大作ですが、各動画はだいたい5分以内のものですので、必要な時に必要な動画を見てご活用いただければと思います。
また、これらの動画の中で使ったサンプルのコンテンツも公開していますので、こちらもご活用ください：
引き続きご意見などお待ちしています
今回の変更についても、それ以外の部分についても、ご意見やお気付きの点など、GitHubリポジトリーのIssuesやPull Requestsでお知らせください。
