前回の記事「SmartHRはなぜアクセシビリティ向上に力を入れるのか」では、SmartHRがアクセシビリティの向上に取り組む背景や理由、取り組みの始まりについて紹介しました。
おもな取り組みとしてお伝えした共通UIライブラリの「SmartHR UI」は、SmartHRのデザインシステムのなかでも中心的な存在でした。今回はそんなSmartHR UI以外のデザインシステムにおけるアクセシビリティの取り組みを紹介します。
SmartHR Design Systemとは
SmartHR Design Systemはサービスに関わるすべての人がSmartHRらしい表現をするための基準や素材をまとめたものです。プロダクトに限らず、営業資料やマーケティング用のウェブサイトなども対象です。素材にはSmartHR UIやデザイントークンがあり、基準にはデザイン原則、デザインパターンなどが用意されています。
SmartHRのプロダクト開発では、多くのUIや機能にデザインシステムを利用して開発を行っています。そのためデザインシステムが提供する素材や基準がアクセシビリティを高めるものであれば、自然とプロダクトもアクセシブルになっていきます。
前回の記事では、素材となるSmartHR UIでアクセシビリティを向上させるための事例を紹介しましたが、本記事ではアクセシビリティを高めるための基準をお伝えします。
品質の基準となるウェブアクセシビリティ方針
アクセシビリティをプロダクトの「品質」と捉えたときに、開発者の意思決定を助けるためにはどこまでの品質が求められるのか、という基準を示す必要があります。
求められるアクセシビリティの品質が明確であれば、いくつかUIのアイデアがあったときに、求められる基準を満たしていないものは選択しない、という意思決定ができます。しかし明確な基準がないと、アクセシビリティ向上を目指したときに優先順位がつけられず、何から手を付ければ良いかを判断することもできません。
そのため、SmartHRではプロダクトにおけるアクセシビリティ品質の基準としてウェブアクセシビリティ方針を定めています。（現在のアクセシビリティ方針は、SmartHRのアクセシビリティサイトに掲載しています）
SmartHRのアクセシビリティ方針は、日本産業規格のJIS X 8341-3:2016とW3Cが公開しているWeb Content Accessibility Guidelines（WCAG）2.1が設けている基準のひとつであるシングルAに、いくつか追加の項目を付与したものを目標としました。
独自の品質基準を作るのではなく外部の品質基準を採用したのは、WCAGがアクセシビリティの品質基準としてスタンダードなものだからです。さまざまな障害特性や、支援技術、利用シーンについて考慮されていることに加え、WCAG 2.0とJIS X 8341-3:2016が一致規格となっています。日本産業規格に準拠していることを示せれば、体外的にプロダクトの品質が伝わりやすく、製品の価値向上に貢献しやすいと考えました。また、いちから独自の品質基準をつくるのはコストがかかりすぎるという理由もありました。
ただしWCAGは、アクセシビリティの専門的な知識がない開発者にとって「製品開発時の意思決定を支援するツール」としては扱いづらい点もあります。実際にWCAGを読んだことがある方であればお分かりいただけると思いますが、WCAGは特定の技術に依存しないように書かれているため、抽象的で理解しづらく、また達成基準に適合しているか否かの判断も非常に難しいです。
そこで、よりわかりやすく簡単にWCAGのシングルAが求めている品質について理解し品質をチェックできるよう、ウェブアクセシビリティ簡易チェックリストを作成しました。
