メインコンテンツまでスキップ

デザインシステムの未来はアクセシビリティ

ベージュのブログに黒い水平の棚のような線が引かれ、それぞれの「棚」に色とりどりの物体が並べられていますベージュのブログに黒い水平の棚のような線が引かれ、それぞれの「棚」に色とりどりの物体が並べられています

シリーズ第3回では、デザインシステムとアクセシビリティの専門家達が、インクルーシブシステムの重要性を語ります。これまで取り上げた、複雑化自動化についてもぜひお読みください。

デザインシステムの未来はアクセシビリティを共有

Andreas Samuelssonによるヒーローのイメージ。

2022年の時点で、障がい者がアクセス可能なインターネットは全体のわずか3%でした。デザインシステムは、時計の針を動かすための最良の解決策とされています。誰もが同じ部品キットを使い、同じルールに従っているのであれば、アクセシビリティの指針を織り込むのも簡単にできるはずと思いませんか。

社内デザインシステム構築の目的を示す棒グラフ社内デザインシステム構築の目的を示す棒グラフ
1. 社内デザインシステムを構築する目的

Material Designの『State of Design survey (デザインの現況の調査)』(2020年)より、社内デザインシステムを構築する目的の割合。

この悲願が、今まさに実現しようとしているのには理由があります。多くの企業が社内デザインシステムに投資するようになったことです。2020年1には22%増加、とMaterial Designの『State of Design survey(デザインの現況の調査)』で報告されており、その後3年経った現在ではさらに増加していると考えられます。この増加の主な要因の1つは、アクセシビリティへの取り組みを大規模に推進できるようになったことです。同調査では、回答者の47%2が自社のデザインシステムにアクセシビリティガイドラインが含まれていると回答しており、アクセシビリティが「Other」(その他)(8.4%)に分類されていた前年から大幅に増加しています。ツールが増え、Web Content Accessibility Guidelines (WCAG)のような基準が確立されたこともあり、常に法律遵守が求められる今、ついにその針を動かすことができるかもしれません。

デザインシステムの成果物を示す棒グラフ。アイコンライブラリ(84%)、UIキット(83%)、スタイルガイド(75%)。大半の回答者(74%)が、デザインシステムにはコンポーネントコードライブラリもあると回答しています。デザインシステムの成果物を示す棒グラフ。アイコンライブラリ(84%)、UIキット(83%)、スタイルガイド(75%)。大半の回答者(74%)が、デザインシステムにはコンポーネントコードライブラリもあると回答しています。
2. デザインシステムに含まれるもの

Material Designの『State of Design survey(デザインの実態調査)』(2020年)でも、企業のデザインシステムに含まれる具体的な成果物に関する回答の割合が示されています。

デザインシステムとアクセシビリティ: 完璧なペア

世界で10億人が障がいを抱えながら生活し、彼らの年間可処分所得が1兆2,000億ドルに上る中、アクセシビリティは企業にとって無視できないものになっています。Forrester社が「デジタルアクセシビリティのチャンス」と呼ぶように、すべての人が利用できる製品の重要性を、多くの企業が理解し始めています。アクセシブルな製品を作ることは、単なる義務ではなく、成長への道を開き、消費者との信頼を築くチャンスなのです。

「デザインシステムとアクセシビリティは完璧なペアと言えます」と語るのは、eBay社のシニアデザインリーダー、Anna Zaremba氏です。「入念にテストされた前景色や背景色から個々のコンポーネントに至るまで、アクセシビリティはデザインシステムのあらゆる部分に組み込むことができます」。一貫性、徹底した文書化、継続的なフィードバックを促進することで、デザインシステムは、製品のエコシステム全体にアクセシビリティのベストプラクティスを導入する基礎となります。また、システムレベルで行われた調整をすべてのインスタンスに広めることで、大規模な変更の適用も容易になります。

example of outlined ui with accessibility annotationsexample of outlined ui with accessibility annotations

アクセシビリティという責任を担うAI

人工知能(AI)の普及に伴い、多くのデザインシステムチームがこのテクノロジーに着目し、ユーザーのアクセシビリティを向上させようとしています。その結果、1行のコードでWebアクセシビリティの問題を検出して修正するという、新しいAI駆動型ツールが登場しました。たとえば、画像の自動記述、ラベルのないボタンへのラベル付け、見出しによる意味的構造の導入などです。

アクセシビリティオーバーレイ

アクセシビリティオーバーレイは、WebサイトやWebアプリのアクセシビリティの問題を解決するために書かれたJavaScriptです。オーバーレイコードは、ブラウザによってレンダリングされたWebサイトやWebアプリを変換します。

AIは、特定の面を自動化するには便利なツールと言えますが、他の使用例で見てきたように、人間の理解と判断を必要とする作業に関しては、不十分な場合がよくあります。多くの「プラグアンドプレイ」アクセシビリティウィジェットやオーバーレイは、アクセシビリティに悪影響を及ぼしそれらを使用した企業400社以上への訴訟につながりました。これらのケースの多くでは、明確なナビゲーション構造とセマンティックなコードを実装していれば、大惨事を起こすことなく、インクルーシブな製品を作ることができたはずです。

VoiceOver

VoiceOverは、AppleのmacOS、iOS、tvOS、watchOS、iPodオペレーティングシステムに組み込まれているスクリーンリーダーです。VoiceOverを使うことで、ユーザーは音声説明でMacintoshやiOSデバイスにアクセスできます。Macの場合はキーボードでのタイプを読み上げます。

ニューヨークの視覚障害者の図書館技術教育者であるChancey Fleet氏は、このテクノロジーを企業責任の一環として導入している例もいくつかあると言います。彼女によると、AppleのScreen Recognitionは、VoiceOverと連動し、このツール向けに最適化されていなかったアプリなど、ユーザーインターフェース内の要素のレイアウトを検出するために機能しているとのことです。「Appleは、開発者がよりアクセシブルなデザインを開発、実践することを強く望んでいます。Screen Recognitionはユーザーの裁量でコントロールできるものです。ユーザーはこれを有効にして、問題を解決できるか確認できるのです」と Fleet氏は説明します。「真のアクセシビリティへの取り組みから利益を上げようというものではありません。あくまでもユーザーに追加のツールを提供する方法なのです」

アクセシビリティツールには、暮らしを便利にし、面倒なことを減らす力がありますが、新たな依存関係や制限を生み出す可能性もあります。
Chancey Fleet氏

画像認識の機能が向上することで、 目の不自由な人のために、ラベルのない画像の説明を生成するAIが出てくるでしょう、とFleet氏は語ります。「AIがすぐに主観や感情を数値化できるようになるとは思いませんが、インフォグラフィックスや棒グラフのような、かなり統制された視覚的語彙を持つ要素の解釈には効果を発揮するようになると思います」。「アクセシビリティツールには、暮らしを便利にし、面倒を減らす力がありますが、新たな依存関係や制限を生む可能性もあります。近い将来、AIと機械学習が、さらに多くのヒューマンタスクを処理し、製品のインクルーシブ化に貢献することを大いに期待しています」

abstract illustration showing checkerboard, a hazard sign, gear, switches, and other ui elementsabstract illustration showing checkerboard, a hazard sign, gear, switches, and other ui elements

最高の製品とは初めからアクセシブル

スタートからアクセシビリティを組み込むということは、デフォルトでアクセシブルなデザインシステムから始めることを意味します。最初から、すべてのデザインコンポーネントとコード要素がアクセシビリティ標準に沿うようにすることで、企業はアクセシビリティに関する問題を長期的な視点で防ぐことができます。カリフォルニア大学バークレー校のアクセシブルテクノロジーの推進者であり、カリフォルニア大学のアクセシビリティイニシアチブのリーダーであるLucy Greco氏は、インクルーシブ性をデザインシステムの基盤にする場合、チームはアクセシビリティのあらゆる側面を考慮する必要があると述べています。「障がいのある人がマウスなしでデザインシステムを使用できますか? コンポーネントはドラッグ&ドロップですか?」と彼女は問います。「ドラッグ&ドロップの場合、マウスエミュレーションキーボードを使ってその動作を完了できますか?」

このコンセプトがきっかけとなり、eBayのAnna Zaremba氏のチームは、アクセシビリティを最初から簡単に組み込むことができるプラグイン、Includeを開発しました。このツールは、アクセシビリティのための注釈にフォーカスしており、デザイナーは簡単に仕様書を作成し、開発者は短時間で要件を理解できるようになります。「私たちは、インクルーシブデザインを確実にデザインプロセスの一部にする方法を考え出したいと思っていました」とZaremba氏は言います。「特にeBayに入社したばかりで、業界全体のベストプラクティスに精通していない新人デザイナーにとって、アクセシビリティは荷が重いからです」

Includeは、アクセシビリティのための注釈(a11y)付けを容易にするためのツールで、デザイナーは仕様書を作成しやすくなり、開発者は要件を理解しやすくなります。あらゆるプロジェクトのデザイン段階でアクセシビリティを考慮し、デザイナーと開発者が適切にコラボレーションできるようにするために開発されました。最終的には、誰もが利用できるデジタル体験が実現されるのです!

Zaremba氏のチームは効率を優先し、既存のデザインや開発者のワークフローに組み込むことができるプラグインの構築を選択しました。このツールを使用して、各個人がFigma内のトップレベルのフレームを選択し、チェッカーを実行できます。ツールはそれを受けて、たとえば、情報提供としてマークされた画像にaltテキストを追加するよう推奨するなど、理由も込みでアクションアイテムのリストを返します。こうした推奨事項は、一般的に見られる問題やバグ、eBayの様々な分野から寄せられたアクセシビリティの優先順位に基づいています。「一人ひとり始める場所は様々ですが、このプラグインが役立てば嬉しいです」とZaremba氏は言います。

Zaremba氏のチームは、プラグインをオープンソース化し、Figma Communityを通じて誰でも自由に利用できるようにし、GitHubでコードを公開することにしました。「eBayには、コミュニティに還元する方法として、ツールを共有するという強力な文化があります」とZaremba氏は言います。「私たちは、このツールをオープンソース化することで、より多くの人たちが自分たちの製品やデジタル体験を改善できると考えていました」オープンソース化には他にも利点があります。 たとえば、チームが有益なフィードバックを受け取れるだけでなく、将来の貢献への道も開けます。誰でもコードをフォークして、その上にビルドし、コミュニティに戻すことができます。「時間を費やしてくれた人、試してくれた人、時間を割いて私たちにメールを書いてくれた人、皆さんに本当に感謝しています」とZaremba氏は言います。「多くの人が関わるほど、良いものになるはずです」

アクセシビリティを最優先にする

では、企業はどうすればアクセシビリティを優先できるのでしょうか? eBayのプラグインがチームメイトを教育しているように、誰もがアクセシビリティを実務的に理解する文化を作ることが重要です。そのためには、障がいを持つ人たちを開発やデザインのパイプラインに、作業者として、またテスターとして参加してもらう必要があります。「チームに障がいを持つ人がいれば、アクセシブルでない製品ができる可能性は低くなります」とGreco氏は言います。彼女はまた、こうしたチームメイトは最終テストだけでなく制作プロセスのあらゆる側面に関わる必要があるとも述べ、障がい者コミュニティでよく知られている「私たち抜きに私たちのことを決めないでほしい」という言葉を引用しています。Fleet氏は、有償のユーザーテストの堅牢なプログラムに加えて、社内にチームアクセシブルな取り組みを課し、アクセシビリティが低下するようなリリースをブロックする権限が必要だと推奨しています。

four colorful puzzle pieces on top of a black backgroundfour colorful puzzle pieces on top of a black background

これらは正しい施策ではあるものの、技術のインクルーシブ化はまだ道半ばです。Greco氏は、「私が期待しているのは、デザインシステムのコンポーネントライブラリが最初からアクセシブルに構築され、マシンだけでなく人間によってテストされるようになることです」と言います。

デザインシステムに関するその他の記事については、DesignSystems.comをご覧ください。

Figmaを使った制作とコラボレーション

無料で始める