簡易チェックリスト付きで解説 デザインシステムで担保するアクセシビリティ品質とは 

簡易チェックリスト付きで解説 デザインシステムで担保するアクセシビリティ品質とは 
  • X
  • Facebook
  • note
  • hatena
  • Pocket

 株式会社SmartHRで、SmartHRのプロダクトを誰もが使えるようにすることをミッションとしたデザイン組織「プログレッシブデザイングループ」、通称「プログレ」が、今まで培ってきた知見をもとに、デザインを活用したアクセシビリティ向上の取り組みを解説します。第2回は「デザインシステムで担保するアクセシビリティ品質」についてです。

 前回の記事「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 ACCESSIBILITYサイトに掲載されたアクセシビリティ方針のページの画面キャプチャ。アクセシビリティ方針は次のとおり。SmartHRのプロダクトはアクセシビリティ方針のもと、「JIS X 8341-3:2016 高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」、に加えて「Web Content Accessibility Guidelines 2.1」に対応すること、またさまざまな特性を持つユーザーが実際に利用できることを目標としています。対象範囲は、SmartHR UI (非推奨コンポーネントを除く)とSmartHR 製品 (***.smarthr.jp で提供するすべてのサービス)。

 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が求めている品質について理解し品質をチェックできるよう、ウェブアクセシビリティ簡易チェックリストを作成しました。

※この続きは、会員の方のみお読みいただけます(登録無料)。