Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2009年7月 > アクセシブルなドラッグ&ドロップとは?

Web標準Blog

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

2009年7月21日

アクセシブルなドラッグ&ドロップとは?

フロントエンド・エンジニア 矢倉

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-grabbedaria-dropeffectプロパティや、HTML5のDrag and Drop APIが利用できると述べています。

そして、上で示した4点の情報を具体的なコードを織り交ぜながら説明しています。

記事では、アーティストの好き嫌いを分類するというデモも作成しています。キーボードでの移動ですが、選択したオブジェクトから移動先を選択するという新たなインターフェースが提供されています。

ですから、厳密には「キーボードでドラッグ&ドロップを実現する」というわけではないのです。ドラッグ&ドロップによって可能となる一連のタスクを、別のUIで実現しているものになります。

「キーボードで操作できる」からアクセシブルであるとは限らない

さて、デモを試したときに、すこし驚いたことがありました。記事をあまり読まずにデモを開いており、「矢印キーで上下左右に要素を動かせる」ようなものを考えていたので、デモで提供された異なるインターフェースを理解できなかったのです。

しかし、ちょっと考えてみると、矢印キーで要素を動かせたところで、先述した運動障害、視覚障害に関連する問題を解決できるわけではありません。「キーボードから利用できるようにする」というガイドラインを、「同じ挙動をキーボードで実現すること」と誤って解釈していたことに気づいて、ハッとさせられました。

ゴールをしっかりと見定め、解決するためのタスクをきちんと考えなければ、ちんぷんかんぷんな「アクセシビリティ対応」になるおそれがあることを、身をもって再認識させられた記事でした。