アクセシブルなドラッグ＆ドロップとは？
Opera Developer Communityにて、The Paciello GroupのGez Lemonにより、"Accessible drag and drop using WAI-ARIA" という記事が公開されていました。
ドラッグ＆ドロップを利用するWebアプリケーションなどは増えていますが、それらのアクセシビリティに関する認知や取り組みは、まだまだという状態でしょう。記事では、問題の認識から具体的な対応方法までを詳しく解説しています。
ドラッグ＆ドロップの問題は？
一言「アクセシビリティ」と書いてしまいましたが、ドラッグ＆ドロップには具体的にどのような問題があるのでしょうか。Gezは、次のふたつの点から、ドラッグ＆ドロップの持つアクセシビリティ上の問題を提起しています。
- 運動障害を持つ人にとっては、ドラッグ＆ドロップという動作を行うことが難しい
- 視覚障害者は、ドラッグ対象となるオブジェクトの認知や、ドロップ元/ドロップ先の位置を知ることが非常に困難
WAI-ARIAとHTML5の利用で異なるUIを提供
Gezはこれらのを踏まえたうえで、WCAG 2.0の「すべての機能をキーボードから利用できるようにする」というガイドラインに従い、キーボード操作可能なドラッグ＆ドロップについて考察しています。ドラッグ＆ドロップは簡単なプロセスですが、支援技術ユーザーには次の項目に関し問題があるとしています。
- どのオブジェクトがドラッグ可能なのかを示す
- オブジェクトがドラッグ状態にあるかいないかを示す
- ドロップしたときに何が起こるのかを示す
- ドロップ先のターゲットを識別する
これを実現するにあたり、WAI-ARIAのaria-grabbedやaria-dropeffectプロパティや、HTML5のDrag and Drop APIが利用できると述べています。
そして、上で示した4点の情報を具体的なコードを織り交ぜながら説明しています。
記事では、アーティストの好き嫌いを分類するというデモも作成しています。キーボードでの移動ですが、選択したオブジェクトから移動先を選択するという新たなインターフェースが提供されています。
ですから、厳密には「キーボードでドラッグ＆ドロップを実現する」というわけではないのです。ドラッグ＆ドロップによって可能となる一連のタスクを、別のUIで実現しているものになります。
「キーボードで操作できる」からアクセシブルであるとは限らない
さて、デモを試したときに、すこし驚いたことがありました。記事をあまり読まずにデモを開いており、「矢印キーで上下左右に要素を動かせる」ようなものを考えていたので、デモで提供された異なるインターフェースを理解できなかったのです。
しかし、ちょっと考えてみると、矢印キーで要素を動かせたところで、先述した運動障害、視覚障害に関連する問題を解決できるわけではありません。「キーボードから利用できるようにする」というガイドラインを、「同じ挙動をキーボードで実現すること」と誤って解釈していたことに気づいて、ハッとさせられました。
ゴールをしっかりと見定め、解決するためのタスクをきちんと考えなければ、ちんぷんかんぷんな「アクセシビリティ対応」になるおそれがあることを、身をもって再認識させられた記事でした。