はじめに
非常に多くのユーザーの日々の業務に欠かせない Smartsheet のような作業管理プラットフォームを使用していると、食い違いや仕事の障壁、顧客体験の低下につながるようなことがどれほど問題であるか、よくご存じでしょう。 そうした問題による影響は、最初は個々人がタスクを完了できないといったことから始まるかもしれませんが、それらがさらに影響することで、瞬く間に手に負えない状況に陥ってしまいます。 そうなると、最終的には生産性や収益性の大幅な低下にもつながりかねません。
Smartsheet はあらゆる業界の、あらゆる規模のお客様からご利用いただいており、どのお客様に対しても同じ目標を掲げています。 私たちは、すべてのお客様に Smartsheet にて同じワールドクラスの体験をしていただけるよう努力しています。
COVID-19 の影響
私は 2020 年 5 月に Smartsheet のユーザー体験チームの一員になりました。ちょうど COVID-19 によるロックダウンが始まったばかりの頃でした。 突如 100% リモート ワークになった従業員の生産性と士気を維持する方法を急いで見つけなくてはなりませんでしたが、幸運にも組織全体に Smartsheet を導入していたため、機能は全社で完全に確保されていました。 私たちは、より動的な働き方へのシフトを促すプロジェクトを優先しつつ、会社のロードマップを前進させていきました。 アクセシビリティに優れた製品を作り出すことは、当社の最優先プロジェクトの 1 つでした。 私たちチームは、「アクセシビリティに優れた」製品とはユーザーにとってどのようなものを意味するのか、またそれを実現するにはどのような計画が必要なのかを考え出さなければなりませんでした。
アクセシビリティ ロードマップの定義
まずは、最新とは言えなくなっていた VPAT を更新する必要がありました。 Web ページの検証や、アクセシビリティ違反の自動特定が可能な、WAVE や Accessibility Insights といったツールを使用して、4 つの重要な課題を特定しました。 私たちが特定し、真っ先に解決しようとした課題は以下の通りです。
- 色のコントラスト: UI 要素がはっきりと見えるよう、WCAG 2.0 AA Standards に準拠して、コントラストを十分に持たせる
- 代替テキスト: 必要な画像やビジュアルに適切な説明文を付け、必要不可欠ではないビジュアルは適宜非表示にする
- ARIA ラベル: すべての UI 要素に工夫を凝らした ARIA ラベルや必要に応じて説明文を付け、適切な情報を提供する
- ARIA タグ: 役割が製品全体に提示されたといった補足的な ARIA タグを適切に使用して、ユーザー体験をより制御できるようにする
私たちは、外部のアクセシビリティ テスト ベンダーによる正式なテスト プロセスが開始される前に、特定および修正すべき項目として、これら 4 つの課題を選びました。 指摘されるであろう違反を取り除くことによって、テストの影響を最小限に抑えたいと考えたのです。 また、キーボード ナビゲーションの問題に対しても、既存機能の再設計も含め、新しく設計することによって対応したいと考えました。
アクセシビリティを最優先にする
既存コードでアクセシビリティの課題を修正することは重要なステップでしたが、反動もありました。 これらの課題をコードの欠陥として扱ったことで、技術チームは計画済みの仕事を犠牲にして、これらの課題の修正を優先せざるを得なくなりました。 長期的な成功をおさめるには、製品開発サイクルの早い段階でアクセシビリティを設計する必要があったのです。 2020 年、私たちは新たな設計システムを開発するという任務を課せられました。 そのシステムは、当社の基本的な UI を大幅に再設計するものだったので、アクセシビリティに優れた体験を最初から設計する絶好のタイミングになりました。 新しい設計システムに取り組むことで、すべき作業を半分まで進めることができました。
アクセシビリティに優れたコンポーネント
新しい設計システムは、一般的に使用されるコンポーネント、フォント スタイル、色、スペーシング ガイドで構成されました。 個々のコンポーネントは以下を目的に設計されました。
- 色のコントラスト要件を満たす
- その他のツールにキーボード フォーカスのステータスを含める
- 一貫性のあるビジュアル階層、スペーシング、アラインメントなどでユーザー体験を創出できるよう、設計者にビルディング ブロックを提供する
しかし当社には、設計者がアクセシビリティを最優先した体験を創出する助けとなる、ツールとガイダンスが欠けていました。
a11y ツールキットの拡張
当社は、アクセシビリティ (a11y) に関する重要な 4 つの課題を特定する前から、将来に向けて a11y の問題を回避する方法を社内チームに教育する必要性を感じていました。
- そこで、アクセシビリティの注釈に特化したコンポーネント ライブラリを作成しました。 これにより、設計者は、キーボード ナビゲーション、ビジュアル要素の代替テキスト、ARIA ラベルやその他のタグに対する詳細なスペックを、技術者に提供できるようになるからです。
当社の新たなグローバル トップ レール コンポーネントの a11y スペック の例 (最終版ではありません)。 - Smartsheet を初めて使用するユーザー体験設計者向けに、a11y スペック コンポーネントとその使用方法に関するセクションをプレゼンテーションに追加しました。
- プレゼンテーションでは、アクセシビリティに関する検討事項についてじっくり考えるケース スタディとして、ARIA の役割、タグの順序、ARIA ラベル、ARIA の説明などの新機能を使用するプロセスを一つひとつ説明し、焦点を変える要素を使用した成果について、重要な背景情報を提供しました。
さらに掘り下げる
次に、既存のコンポーネント（設計済みでコードとしてまだ実装されていないコンポーネントと、実装途中にあるコンポーネント）をすべて監査して、アクセシビリティを見直すことなく新しいコードがリリースされることのないようにしました。 そうして、機能のリリース前に、アクセシビリティ仕様に不足がないことを確認しました。 また、すでに実装されている既存コンポーネントに対しても同様の監査を開始しました。
今後もお楽しみに
Smartsheet のアクセシビリティに対する取り組みは初期段階にありますが、私たちは、アクセシビリティに関する検討事項を製品設計や開発サイクルのもっと初期段階に組み込もうと、多大な努力を重ねています。 今後も組織全体でアクセシビリティに優れた設計が生み出す効果に対する意識を高め、すべてのお客様により便利に、また快適に Smartsheet をお使いいただけるよう尽力いたします。
